Tag HTML
Scopri cos'è un tag HTML: tag di apertura e chiusura, differenza tra tag, elementi e attributi, elementi void e regole di annidamento.
Un tag HTML è una parola chiave (il nome del tag) racchiusa tra parentesi angolari, come <p> o <img>. I tag sono i mattoni fondamentali di HTML: dicono al browser dove inizia e finisce un contenuto e di che tipo è. Il browser legge i tag e costruisce la pagina a partire da essi, ma non mostra mai i tag stessi.
Questa pagina spiega cos'è un tag, come un tag di apertura si distingue da un tag di chiusura, come i tag si combinano in elementi con attributi, quali tag stanno da soli (elementi void) e le regole per annidare i tag correttamente.
Tag di apertura e di chiusura
La maggior parte dei tag viene in coppie: un tag di apertura e un tag di chiusura. Il tag di chiusura è identico a quello di apertura, ma inizia con una barra obliqua (/).
<p> <!-- opening tag -->
</p> <!-- closing tag -->- Il tag di apertura segna il punto in cui inizia il contenuto.
- Il tag di chiusura segna il punto in cui termina il contenuto.
Tutto ciò che si trova tra i due tag è il contenuto a cui i tag si applicano.
Tag, elemento e attributo
Questi tre termini vengono spesso confusi, quindi è utile definirli con precisione.
- Un tag è la parola chiave tra parentesi angolari da sola —
<p>o</p>. - Un elemento è l'unità completa: il tag di apertura, il contenuto e il tag di chiusura insieme.
- Un attributo è un'informazione aggiuntiva inserita all'interno del tag di apertura che configura l'elemento.
Ecco un singolo elemento paragrafo suddiviso nelle sue parti:
<p class="intro">Hello world</p>| Parte | Cos'è |
|---|---|
<p ...> | il tag di apertura |
class="intro" | un attributo (nome class, valore "intro") |
Hello world | il contenuto |
</p> | il tag di chiusura |
| l'intera riga | l'elemento |
Quindi <p> è un tag, mentre <p>Hello world</p> è un elemento. Per saperne di più, consulta Elementi HTML e Attributi HTML.
Esempio di elemento completo
<!DOCTYPE html>
<html>
<head>
<title>Tags, elements, and attributes</title>
</head>
<body>
<h1>HTML tags</h1>
<p class="intro">This whole line is a paragraph element.</p>
</body>
</html>Elementi void (vuoti)
Alcuni elementi non hanno contenuto e quindi non hanno un tag di chiusura. Questi vengono chiamati elementi void (o elementi vuoti). Sono composti da un singolo tag.
Gli elementi void più comuni sono:
<br>— un'interruzione di riga<hr>— una separazione tematica (regola orizzontale)<img>— un'immagine<input>— un campo modulo
<p>First line<br>Second line</p>
<hr>
<img src="logo.png" alt="Company logo">
<input type="text" name="username">In HTML si scrive un elemento void come un singolo tag senza barra obliqua, ad esempio <br>. La forma auto-chiudente <br /> è anch'essa accettata ed è obbligatoria in XHTML, ma è opzionale in HTML.
I tag non distinguono maiuscole e minuscole
I nomi dei tag HTML non distinguono tra maiuscole e minuscole: <P>, <p> e <P> significano tutti la stessa cosa. Per convenzione, tuttavia, i tag vengono scritti in minuscolo, ed è questo lo stile raccomandato.
<!-- All three are valid and identical to the browser -->
<DIV></DIV>
<Div></Div>
<div></div>Annidamento corretto dei tag
I tag possono contenere altri tag. Quando lo fanno, devono essere annidati correttamente: un elemento interno deve aprirsi e chiudersi completamente all'interno del suo elemento padre. I tag non possono sovrapporsi.
<!-- Correct: <em> opens and closes inside <p> -->
<p>This is <em>important</em> text.</p><!-- Wrong: the tags overlap -->
<p>This is <em>important</p></em>Nell'esempio errato, <em> viene aperto all'interno di <p> ma chiuso fuori da esso. I browser cercano di recuperare da errori come questo, ma il risultato è imprevedibile, quindi chiudi sempre prima il tag più interno.
Per le note che il browser ignora anziché renderizzare, consulta Commenti HTML.
Nota storica: negli anni '90, gli autori talvolta racchiudevano i contenuti degli script in marcatori di commento HTML per nasconderli ai browser molto vecchi che non capivano
<script>. Questa tecnica è obsoleta e non dovrebbe essere usata oggi.