Commenti HTML

Un commento HTML è una nota nel markup che il browser ignora: non viene visualizzata sulla pagina e non ha alcun effetto sul layout. I commenti esistono esclusivamente per le persone che leggono e mantengono il codice sorgente. Aiutano a spiegare perché esiste un determinato markup, a lasciare promemoria per dopo e a disabilitare temporaneamente il codice senza eliminarlo.

Questa pagina tratta la sintassi dei commenti, i commenti su singola riga e multiriga, le regole che rendono un commento valido (e gli errori che lo invalidano), come commentare il codice durante il debug, e i commenti condizionali di Internet Explorer legacy che potresti ancora incontrare in progetti datati.

Sintassi

Un commento si apre con <!-- e si chiude con -->. Tutto ciò che si trova tra questi marcatori viene ignorato dal browser:

<!-- This is an HTML comment -->

Puoi inserire un commento su una riga propria, oppure dopo del markup sulla stessa riga:

<p>Total price</p>
<!-- TODO: pull this value from the cart, not hard-coded -->
<p>$42.00</p> <!-- includes tax -->

Il --> di chiusura è obbligatorio. Se lo dimentichi, il browser continua a trattare tutto ciò che segue come parte del commento finché non trova il prossimo --> (o la fine del documento), nascondendo silenziosamente interi blocchi della tua pagina — un bug comune e difficile da individuare.

Perché usare i commenti

• Spiegare l'intento. Il codice mostra cosa succede; un commento può registrare perché. "Perché questo <div> è vuoto?" trova risposta in una singola riga di note.
• Collaborazione. In un codebase condiviso, i commenti indicano ai colleghi come una sezione è destinata a funzionare.
• Note TODO / FIXME. Segnala lavori incompiuti o problemi noti in modo che siano facili da trovare in seguito (<!-- TODO: add alt text -->).
• Debug. Nascondi temporaneamente il markup per isolare un problema senza perdere il codice originale.

Commenti su singola riga e multiriga

La stessa sintassi <!-- --> funziona per una riga o per molte. Un commento multiriga si estende semplicemente su più righe tra i marcatori di apertura e chiusura:

<!-- This is a single-line comment -->

<!--
  This is a multi-line comment.
  Everything here is ignored by the browser,
  no matter how many lines it spans.
-->
<p>This paragraph is visible.</p>

HTML non ha una sintassi separata per i commenti a blocco — a differenza di CSS, che usa /* ... */, o JavaScript, che usa // e /* ... */. In HTML si usa sempre <!-- -->.

Commentare il codice per il debug

Racchiudere il markup in un commento è un modo rapido per disabilitarlo senza eliminarlo. Questo è prezioso quando stai cercando quale elemento causa un problema:

<h1>The main heading</h1>

<!-- Temporarily disabled while debugging the layout
<aside>
  <p>This sidebar is hidden for now.</p>
</aside>
-->

<a href="https://www.w3docs.com">Homepage</a>

L'elemento <aside> qui sopra non viene renderizzato e il browser non lo costruisce nemmeno nel DOM. Quando hai finito, rimuovi <!-- e --> per ripristinare il codice.

Commenti validi e non validi

Un commento segue alcune regole. Violarle può far sì che il browser tratti il commento come testo, o che inghiotta markup che volevi conservare.

Non puoi annidare i commenti. Il primo --> chiude il commento, quindi il secondo --> diventa testo in eccesso sulla pagina:

<!-- outer comment <!-- inner comment --> still inside? -->

Qui il commento termina al primo -->. Il testo rimanente still inside? --> viene renderizzato come testo visibile — quasi mai quello che volevi.

Evita -- all'interno di un commento. Secondo le specifiche HTML, il testo di un commento non dovrebbe contenere -- se non come parte del --> di chiusura. Non deve inoltre iniziare con > o ->. Questi sono validi:

<!-- A perfectly valid comment -->
<!-- Visit the section "Pricing" below -->

E questi sono problematici:

<!-- Don't use a -- double dash inside -->   <!-- the "--" can confuse parsers -->
<!--> Starts with > — invalid -->
<!-- Missing the closing marker     <-- the rest of the page may vanish

L'abitudine più sicura: apri con <!--, scrivi la tua nota usando trattini singoli o parole, e chiudi sempre con -->.

Provalo: commenti HTML in un documento completo

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document.</title>
  </head>
  <body>
    <h1>The main heading</h1>
    <!-- <p>We want to hide this paragraph temporarily.</p> -->
    <a href="https://www.w3docs.com">Homepage</a>
    <!-- TODO: this link will point to the homepage -->
  </body>
</html>

Il browser renderizza solo il titolo e il collegamento. Le due righe commentate non producono nulla sullo schermo, come mostra l'anteprima live qui sotto.

Commenti condizionali (Internet Explorer legacy)

Le versioni precedenti di Internet Explorer (da IE 5 a IE 9) supportavano una speciale sintassi di commento condizionale. Per tutti gli altri browser appariva come un commento ordinario e veniva ignorato, ma IE leggeva ed eseguiva il markup al suo interno quando la condizione corrispondeva:

<!--[if IE]>
  <link rel="stylesheet" href="ie-only.css">
<![endif]-->

<!--[if lt IE 9]>
  <p>You are using an old version of Internet Explorer.</p>
<![endif]-->

Questo era un metodo standard per fornire CSS o script solo a versioni specifiche di IE. I commenti condizionali sono obsoleti. Internet Explorer 10 ha eliminato il supporto per essi, e i browser moderni non li hanno mai supportati, quindi non dovresti usare questa tecnica nel nuovo codice. Viene trattata qui solo per riconoscerla nei progetti legacy.

Dove i commenti possono e non possono essere inseriti

Tutti i browser moderni supportano i commenti HTML e ignorano il loro contenuto, quindi la sintassi è sicura da usare ovunque il tuo markup necessiti di spiegazioni.

Esercitati