Articolo originale: HTML Comment – How to Comment Out a Line or Tag in HTML
In questo articolo, imparerai come aggiungere commenti su una singola riga e commenti multi-riga ai tuoi documenti HTML.
Vedrai anche perché i commenti sono considerati una buona pratica quando si scrive del codice HTML.
Iniziamo!
Il tag di commento HTML
La sintassi generica per un commento HTML è la seguente:
<!-- Sono un commento! -->
I commenti in HTML iniziano con <!--
e terminano con -->
.
Non dimenticare il punto esclamativo all'inizio del tag! Ma non c'è bisogno di aggiungerlo alla fine.
Il tag circonda qualsiasi testo o altro tag HTML che vuoi trasformare in un commento.
Quando usare i commenti HTML
I commenti HTML non vengono mostrati nel browser. Ciò vuol dire che ogni commento che aggiungi al tuo codice sorgente HTML non sarà visualizzato quando il documento viene renderizzato in una pagina web.
Detto ciò, tieni a mente che chiunque può vedere il codice sorgente di praticamente qualsiasi sito web pubblicato su Internet andando su Visualizza sorgente pagina
– e questo include anche tutti i commenti!
Quindi i tuoi commenti saranno visibili se rendi pubblico il documento HTML e qualcuno decide di guardare il codice sorgente.
Scrivere commenti può essere utile ed è una buona pratica da seguire quando si scrive del codice sorgente. I commenti ti aiutano a documentare il codice e comunicare informazioni riguardo al codice e al ragionamento che hai seguito, per te stesso e per gli altri. Sono utili anche per ricordarti cosa stavi pensando/facendo quando torni su un progetto dopo mesi in cui non ci stavi lavorando.
I commenti aiutano anche a comunicare con gli altri sviluppatori che lavorano su un progetto con te. Dei commenti possono spiegar loro chiaramente perché hai aggiunto certe righe di codice.
Come scrivere commenti su riga singola in HTML
Un commento su singola riga occupa soltanto una riga. Come detto precedentemente, la riga non verrà mostrata nel browser.
Usa un commento su singola riga quando vuoi spiegare e chiarire il motivo alla base del codice che lo segue oppure quando vuoi aggiungere dei promemoria per te stesso come:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Aggiungere navbar qui -->
<h2>About me</h2>
<p>I am learning to code with freeCodeCamp.</p>
<p>I am going through each and every one of their awesome and super helpful certifications. </p>
<p>I am on my way to becoming a fullstack web developer!</p>
<h3>Work Experience</h3>
</body>
</html>
I commenti su riga singola sono anche utili quando vuoi chiarire dove finisce un tag. Torna utile in documenti HTML lunghi e complessi in cui c'è un sacco di roba e potresti fare confusione riguardo a dove si trova un tag di chiusura.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section class="contact">
</section> <!--il tag di chiusura della sezione contact è qui-->
</body>
</html>
Come scrivere commenti in linea in HTML
Puoi anche aggiungere dei commenti nel mezzo di una frase o di una riga di codice.
Solo il testo contenuto in <!-- -->
sarà trasformato in un commento e il resto del testo nel tag non sarà influenzato.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>I am <!--going to be--> a web developer</p>
</body>
</html>
Come scrivere commenti multi-riga in HTML
Usando esattamente la stessa sintassi che hai visto finora, i commenti possono occupare più righe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>I am a web developer</p>
<!--Questo sarà il mio portfolio
Dove inserirò i progetti di cui sono più soddisfatto.
Posso continuare ad andare avanti su cosa voglio aggiungere
perché sto scrivendo un commento multi-riga-->
</body>
</html>
Come trasformare un tag in un commento in HTML
E se volessi trasformare un tag in un commento in HTML?
Devi inserire il tag in <!-- -->
, in questo modo:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>My portfolio page</h2>
<h3>freeCodeCamp certification projects</h3>
<!-- <section class="hero">
</section> -->
<h2>About Me</h2>
</body>
</html>
Trasformare dei tag in commenti aiuta con il debugging.
Quando qualcosa non funziona come dovrebbe o come desideri, inizia a trasformare i tag in commenti, uno alla volta. Questo ti permette di testarli e vedere quale sta causando il problema.
Scorciatoie da tastiera per aggiungere commenti HTML
Esistono delle scorciatoie che puoi usare per aggiungere commenti – e probabilmente finirai per utilizzarle spesso. La scorciatoia è Command /
per gli utenti Mac o Control /
per gli utenti Windows e Linux.
Per aggiungere un commento su riga singola, premi semplicemente la combinazione di tasti mostrata qui sopra all'interno dell'editor di codice. Poi l'intera riga diventerà un commento. Però tieni a mente che dato che tutta la riga diventerà un commento, questa scorciatoia funziona solo per i commenti su riga singola. Dovrai inserire manualmente i commenti in linea.
Per aggiungere i commenti multi-riga, seleziona ed evidenzia tutto il testo o i tag che vuoi trasformare in commento e premi la combinazione di tasti mostrata precedentemente. Ogni riga selezionata diventerà un commento.
Conclusione
E il gioco è fatto – adesso sai come usare i commenti in HTML!
Impara di più sull'HTML con il corso gratuito di freeCodeCamp sul Web Design Responsivo (disponibile in italiano!).
È ideale per principianti e non necessita di conoscenze pregresse. Inizierai dalle basi e migliorerai le tue abilità con la pratica. Alla fine dovrai completare cinque progetti per ottenere la certificazione.
Grazie per aver letto questo articolo e buono studio :)