Corso di HTML / Sintassi HTML: tag, attributi e annidamento

La sintassi HTML stabilisce come gli elementi, i tag, gli attributi, il testo e i commenti vengono scritti in un documento HTML. La maggior parte degli elementi utilizza un tag di inizio e un tag di fine, gli attributi si trovano nel tag di inizio e gli elementi annidati devono essere chiusi nell'ordine inverso rispetto a quello in cui sono stati aperti.

Sintassi di base degli elementi e dei tag HTML

Un elemento HTML è solitamente scritto con un tag di apertura, un contenuto e un tag di chiusura.

<tagname>Contenuto</tagname>

• <tagname> è il tag di apertura che indica il punto in cui l'elemento inizia.
• Contenuto è il testo o altro contenuto incluso dall'elemento.
• </tagname> è il tag di chiusura che indica il punto in cui l'elemento termina.

Il codice seguente crea un elemento p. Il tag di apertura è <p>, il contenuto è Sintassi HTML e il tag di chiusura è </p>.

<p>Sintassi HTML</p>

I nomi dei tag nella sintassi HTML non fanno distinzione tra maiuscole e minuscole ASCII. Tuttavia, l'uso delle lettere minuscole è la convenzione abituale, poiché rende il markup coerente e facile da leggere.

Gli elementi vuoti non hanno tag di chiusura.

Non tutti gli elementi HTML utilizzano un tag di chiusura. Un elemento vuoto non può contenere contenuto e non deve avere tag di chiusura.

<br>
<img src="image.webp" alt="Alba su un oceano blu">
<input type="text" name="username">
<meta charset="utf-8">

br, img, input e meta sono comuni elementi vuoti. Non scrivere tag di chiusura inesistenti come </br> o </img>.

Una barra finale, come in <br />, è consentita in un tag di apertura HTML per un elemento vuoto, ma non ha funzione di chiusura automatica in HTML ed è superflua.

Come scrivere gli attributi HTML

Gli attributi configurano un elemento o forniscono informazioni aggiuntive. Vengono scritti all'interno del tag di apertura, con il nome dell'attributo e il suo valore separati da un segno di uguale (=). Per un uso pratico degli attributi, confrontate gli attributi for, id e name in Collegare correttamente l'etichetta a input.

<tagname attribute="value">Contenuto</tagname>

Ad esempio, questo codice assegna a un elemento blockquote un attributo id con il valore quote-01.

<blockquote id="quote-01">

  Testo citato

</blockquote>

HTML supporta valori degli attributi tra virgolette doppie, virgolette singole e — in casi limitati — anche senza virgolette. L'uso coerente delle virgolette doppie è una convenzione pratica, poiché spazi e più caratteri speciali non sono consentiti in valori non tra virgolette.

<p style="color: red;">Testo rosso</p>

Nell'esempio sbagliato seguente, lo spazio termina il valore non tra virgolette style dopo color:. Pertanto, il browser non interpreta l'attributo come previsto.

<p style=color: red;>Testo rosso</p>

Gli attributi booleani come disabled, checked e required sono veri se presenti. Possono essere scritti utilizzando solo il nome dell'attributo.

<input type="text" disabled>

Chiudere elementi annidati nell'ordine corretto

Quando un elemento è inserito all'interno di un altro, chiudere l'elemento interno prima di chiudere quello esterno. Il seguente markup è correttamente annidato perché l'elemento strong è completamente contenuto all'interno dell'elemento p.

<p>Questa frase contiene <strong>testo importante</strong>.</p>

Il seguente esempio è annidato in modo errato perché le aree dei due elementi si sovrappongono.

<p>Questa frase contiene <strong>testo importante</p></strong>

Un browser può correggere il markup errato durante il parsing, ma il Document Object Model (DOM, modello a oggetti del documento) risultante può differire dalla struttura prevista. Non fate affidamento sulla correzione automatica del browser come sostituto di un markup valido.

Come scrivere i commenti HTML

Un commento HTML inizia con <!-- e termina con -->. I commenti non vengono visualizzati come contenuto della pagina, quindi possono documentare lo scopo del markup o lasciare una nota temporanea per gli sviluppatori.

<!-- Questo commento non viene visualizzato sulla pagina. -->

Un commento può estendersi su più righe.

<!--

  Questo è un commento HTML multilinea.

-->

Non annidate un commento HTML all'interno di un altro. I delimitatori di commento annidati possono causare la terminazione del commento in un punto diverso da quello previsto.

<!--

  &amp;lt;!-- Non annidare commenti. -->

-->

Struttura di base di un documento HTML

L'esempio seguente mostra una struttura minima e pratica per un documento HTML in italiano. Esercitatevi a trovare errori, a rilevare errori e a convalidare nuovamente i documenti HTML.

<!doctype html>
<html lang="it-IT">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Titolo del documento</title>
  </head>
  <body>
    <h1>Titolo della pagina</h1>
    <p>Il contenuto della pagina si trova qui.</p>
  </body>
</html>

• <!doctype html> seleziona la modalità standards, utilizzata per i documenti HTML moderni.
• <html lang="it-IT"> è l'elemento documento e lang="it-IT" indica l’italiano come lingua principale.
• <head> contiene i metadati del documento come la codifica dei caratteri, le impostazioni del viewport e il titolo del documento.
• <body> contiene i titoli, i paragrafi, le immagini, i link e altri contenuti che vengono visualizzati sulla pagina.

Come verificare la sintassi HTML

I browser cercano di visualizzare un documento anche se il suo markup contiene errori. Il fatto che una pagina appaia sullo schermo non dimostra quindi che la sua sintassi sia corretta. Verificate l'annidamento e gli attributi e utilizzate lo Nu HTML Checker per identificare errori di markup e avvisi.

Per regole precise su tag, attributi, elementi vuoti e commenti, vedere la sezione sulla sintassi HTML della HTML Living Standard del WHATWG.

Attributi booleani e caratteri letterali

Un attributo booleano è determinato dalla sua presenza e non da una stringa come "false". checked="false" è sempre presente, quindi è selezionato per impostazione predefinita, e "false" non è un valore valido per un attributo booleano. Rimuovere checked per farlo partire non selezionato per impostazione predefinita. Non trattare gli attributi booleani come normali attributi con valore di stringa.

<label><input type="checkbox" name="news" value="yes" checked> Notizie</label>
<label><input type="checkbox" name="updates" value="yes"> Aggiornamenti</label>

Solo il primo controllo dovrebbe essere selezionato per impostazione predefinita. Per visualizzare l'elemento <p> rappresentato letteralmente, scrivete le sue parentesi come < e >. Usate & per un e commerciale rappresentato letteralmente, se è necessaria una sequenza di escape. Distinguete il codice visualizzato come testo dal markup che crea un elemento.

<p>&lt;p&gt; è un elemento paragrafo. A &amp; B sono due nomi.</p>

Questo esempio mostra parentesi acute e un e commerciale invece di creare un paragrafo annidato. Vedete le regole HTML per attributi booleani .

Checklist della sintassi HTML

• Inserite <!doctype html> all'inizio di un documento HTML completo.
• Utilizzare costantemente lettere minuscole per nomi di tag e attributi.
• Mettere i valori degli attributi tra virgolette, preferibilmente virgolette doppie per coerenza.
• Non aggiungere tag di chiusura per elementi vuoti.
• Chiudere gli elementi annidati dall'interno verso l'esterno.
• Usare lang per identificare la lingua del documento.
• Non inserire dati riservati nei commenti o nel codice sorgente della pagina.
• Validare il documento finale invece di fare affidamento solo sul suo aspetto visivo.