Guida HTML interattiva: Commenti

Q: Come si scrive un commento in HTML?

Inizialo con : . Il browser ignora tutto quello che sta tra i due segni, compresi i tag, quindi la stessa sintassi serve a commentare il codice.

Q: I commenti HTML si possono annidare?

No. Il primo --> chiude il commento, quindi in c --> il testo c --> viene mostrato nella pagina. Per commentare un blocco che contiene un commento, togli o modifica prima il commento interno.

Q: I commenti HTML funzionano dentro CSS o JavaScript?

No. Dentro un elemento usa / ... /, e dentro uno usa // o / ... /. Un commento HTML in un blocco di stile non nasconde le regole CSS al suo interno.

Come scrivere un commento in HTML

Un commento HTML inizia con . Il browser ignora tutto quello che sta tra i due segni, quindi il testo non compare mai nella pagina:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments</title>
</head>
<body>
  <!-- This comment is not displayed -->
  <h1>Visible heading</h1>

  <!--
    A comment can span several lines.
    Use it for notes to yourself or your team.
  -->
  <p>Visible paragraph.</p>
</body>
</html>

Si vedono solo il titolo e il paragrafo. In HTML c'è una sola sintassi per i commenti, e funziona per una riga o per molte.

La scorciatoia in VS Code e nella maggior parte degli editor: seleziona alcune righe e premi Ctrl + / (Cmd + / su Mac). L'editor aggiunge i segni al posto tuo, e gli stessi tasti li tolgono.

Commentare il codice

Dato che il browser ignora i tag dentro un commento, racchiudere del markup tra  lo nasconde senza cancellarlo. È il modo più rapido per provare una pagina senza un elemento:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comment out</title>
  <style>
    .banner { background: #fef3c7; padding: 8px 12px; border-radius: 6px; }
  </style>
</head>
<body>
  <!-- <div class="banner">Sale ends Friday</div> -->
  <h1>Shop</h1>
  <!--
  <ul>
    <li>Old menu item</li>
    <li>Another old item</li>
  </ul>
  -->
  <p>Remove the comment markers around the banner to bring it back.</p>
</body>
</html>

Cancella  sulla riga del banner e ricompare. Il codice commentato viene comunque scaricato con la pagina, quindi quando sei sicuro che non ti serve, eliminalo.

I commenti non si possono annidare

Il primo --> chiude sempre il commento. Se il codice che commenti contiene già un commento, quello esterno finisce prima del previsto e il resto finisce nella pagina. Questo esempio passa dei commenti annidati al parser del browser e mostra cosa resta visibile:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested comments</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const html = '<!-- outer <!-- inner --> still meant to be hidden -->';
    const box = document.createElement('div');
    box.innerHTML = html;
    document.getElementById('out').textContent =
      'Source:  ' + html + '\nVisible: ' + box.textContent;
  </script>
</body>
</html>

still meant to be hidden --> viene mostrato come testo. Prima di commentare un blocco grande, togli i commenti al suo interno (o modifica il loro --> così non corrisponde più).

Qualche altra regola: un commento non può iniziare con , quindi tienili entrambi fuori dal testo del commento.

I commenti sono pubblici

I commenti fanno parte dell'HTML che il server invia, quindi ogni visitatore può leggerli con Visualizza sorgente o con gli strumenti per sviluppatori. Anche uno script può elencarli:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Comments are public</title>
  <style>
    li { font-family: monospace; }
  </style>
</head>
<body>
  <!-- TODO: fix the checkout button -->
  <p>This page has comments. Here they are:</p>
  <!-- admin password is hunter2 (never do this) -->
  <ul id="list"></ul>
  <script>
    const walker = document.createTreeWalker(document, NodeFilter.SHOW_COMMENT);
    while (walker.nextNode()) {
      const li = document.createElement('li');
      li.textContent = walker.currentNode.data.trim();
      document.getElementById('list').appendChild(li);
    }
  </script>
</body>
</html>

Usa i commenti solo per note sul codice. Niente di privato (password, chiavi API, URL interni, dati dei clienti) deve mai stare nell'HTML, commentato o no. Gli strumenti di build e i minificatori di solito tolgono i commenti dall'HTML di produzione, e così si risparmia anche qualche byte.

Commenti in CSS e JavaScript

I commenti HTML funzionano solo nell'HTML. Dentro <style> e <script> usi la sintassi dei commenti di quel linguaggio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS and JS comments</title>
  <style>
    /* A CSS comment: this rule is disabled */
    /* p { color: #dc2626; } */

    <!-- h1 { color: #2563eb; } -->
  </style>
</head>
<body>
  <h1>This heading is blue</h1>
  <p id="msg">Paragraph</p>
  <script>
    // A JavaScript comment
    /* Block comments work in JavaScript too */
    document.getElementById('msg').textContent = 'Set by the script';
  </script>
</body>
</html>

Il titolo diventa blu: il CSS ignora i segni  stessi e applica comunque la regola tra loro. Solo /* ... */ disattiva il CSS. La pagina sui commenti in CSS spiega quella sintassi.

Commenti condizionali

Il codice vecchio a volte contiene . Erano istruzioni per Internet Explorer 9 e precedenti. Tutti i browser attuali li trattano come commenti normali, quindi il contenuto viene ignorato e l'intero blocco si può eliminare.

Errori comuni

Annidare i commenti. Il --> interno chiude il commento esterno. Togli i commenti interni prima di commentare un blocco.
Mettere segreti nei commenti. I commenti vengono inviati a ogni visitatore.
Un --> mancante. Tutto quello che segue <!-- fino alla fine del file sparisce, e sembra che metà pagina sia svanita.
Usare  nel CSS. Non disattiva le regole. Usa /* */.
Usare // nell'HTML. // note viene mostrato come testo. L'HTML capisce solo .

Domande frequenti

Come si scrive un commento in HTML?

Inizialo con : . Il browser ignora tutto quello che sta tra i due segni, compresi i tag, quindi la stessa sintassi serve a commentare il codice.

Come si scrive un commento su più righe in HTML?

L'HTML ha una sola sintassi per i commenti, e può estendersi su quante righe vuoi. Metti  dopo l'ultima.

Qual è la scorciatoia per commentare in HTML?

In VS Code e nella maggior parte degli editor di codice, seleziona le righe e premi Ctrl + / (Windows e Linux) o Cmd + / (Mac). L'editor racchiude la selezione tra , e gli stessi tasti li tolgono.

I commenti HTML si possono annidare?

No. Il primo --> chiude il commento, quindi in  c --> il testo c --> viene mostrato nella pagina. Per commentare un blocco che contiene un commento, togli o modifica prima il commento interno.

Gli utenti possono vedere i commenti HTML?

Non vengono mostrati, ma arrivano al browser insieme alla pagina. Chiunque può leggerli con Visualizza sorgente o con gli strumenti per sviluppatori, quindi non metterci mai password, chiavi o note private.

I commenti HTML funzionano dentro CSS o JavaScript?

No. Dentro un elemento <style> usa /* ... */, e dentro uno <script> usa // o /* ... */. Un commento HTML in un blocco di stile non nasconde le regole CSS al suo interno.

Concetti correlati