Sono entrambi HTML valido. La barra finale è ammessa sugli elementi vuoti e il browser la ignora. Su un tag non vuoto come la barra viene ignorata allo stesso modo, quindi il div resta aperto fino a un .

Guida HTML interattiva: Tag HTML

Q: Che differenza c'è tra un tag HTML e un elemento HTML?

Un tag è il markup che scrivi, come o . Un elemento è l'insieme che il browser costruisce a partire da esso: il tag di apertura, i suoi attributi, il contenuto e il tag di chiusura. Hi sono due tag che formano un elemento p.

Q: I tag HTML distinguono tra maiuscole e minuscole?

No. e producono lo stesso elemento, e così qualsiasi combinazione di maiuscole e minuscole. Il minuscolo è lo stile standard ed è ciò che producono quasi tutti i formattatori.

Cos'è un tag HTML

Un tag HTML è un nome tra parentesi angolari che marca un pezzo di contenuto. Quasi tutti i tag vanno in coppia: un tag di apertura come <p> e un tag di chiusura con una barra come </p>. Tutto quello che sta in mezzo è il contenuto, e l'insieme completo è un elemento.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

Cambia <h1> in <h2> (sia il tag di apertura sia quello di chiusura) e il titolo diventa più piccolo. È il nome del tag a dire al browser cos'è il contenuto.

Anatomia: tag, attributi ed elementi

<a href="/docs/html/links" class="nav">Links</a>

Parte	Nell'esempio
Tag di apertura	`<a href="/docs/html/links" class="nav">`
Nome del tag	`a`
Attributi	`href="/docs/html/links"` e `class="nav"`
Contenuto	`Links`
Tag di chiusura	`</a>`
Elemento	tutto quanto sopra insieme

Gli attributi vanno sempre nel tag di apertura, mai in quello di chiusura. Sono spiegati nella pagina sugli attributi.

I nomi dei tag non distinguono tra maiuscole e minuscole: <P> e <p> sono uguali. Scrivili in minuscolo.

Tag vuoti: nessun tag di chiusura

Alcuni elementi non possono contenere niente, quindi hanno solo un tag di apertura. Si chiamano elementi vuoti (void elements; si sente dire anche tag autochiudenti):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

L'elenco completo: area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr.

Puoi scriverli come <br /> con una barra. In HTML la barra non fa niente; è ammessa perché il codice in stile XHTML continui a funzionare. Anche una barra su un tag normale, come <div />, viene ignorata, il che significa che il div resta aperto.

Annidare i tag

Gli elementi vanno dentro altri elementi. La regola è: chiudi i tag nell'ordine inverso a quello in cui li hai aperti. L'ultimo aperto è il primo a essere chiuso.

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

I browser non rifiutano un annidamento sbagliato. Lo riparano, e la riparazione non è sempre quello che intendevi. Questo esempio passa al parser del browser due frammenti annidati male e stampa la struttura che ha davvero costruito:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

Succedono due riparazioni. I <b> e <i> che si sovrappongono vengono divisi in elementi in più. E un <p> non può contenere un <div>, quindi il browser chiude il paragrafo prima del div e trasforma il </p> rimasto in un nuovo paragrafo vuoto. Quando CSS o JavaScript si comportano in modo strano, l'annidamento sbagliato è una delle prime cose da controllare.

Elementi block e inline

La maggior parte dei tag rientra in due gruppi di visualizzazione. Gli elementi block (div, p, da h1 a h6, ul, section) iniziano su una nuova riga e occupano tutta la larghezza. Gli elementi inline (span, a, strong, em, code) stanno dentro una riga di testo e sono larghi solo quanto il loro contenuto.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

I riquadri blu si allargano su tutta la pagina; quelli color ambra avvolgono solo il loro testo. Il CSS può cambiarlo con la proprietà display, ma ogni tag parte dal suo valore predefinito. Vedi div e span per i due contenitori generici.

I tag HTML più comuni

Tag	Scopo
`<html>`, `<head>`, `<body>`	Lo scheletro del documento
`<title>`, `<meta>`, `<link>`	Informazioni sulla pagina nell'head
Da `<h1>` a `<h6>`	Titoli
`<p>`	Paragrafo
`<a>`	Link
`<img>`	Immagine
`<ul>`, `<ol>`, `<li>`	Liste
`<strong>`, `<em>`	Testo importante ed enfatizzato
`<br>`, `<hr>`	A capo, separazione tematica
`<div>`, `<span>`	Contenitori generici block e inline
`<table>`, `<tr>`, `<th>`, `<td>`	Tabelle
`<form>`, `<input>`, `<label>`, `<button>`	Moduli
`<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`	Struttura della pagina con significato

Per un elenco su una sola pagina da stampare, vedi il cheat sheet HTML.

Tag che non esistono

Se scrivi un tag che il browser non conosce, non va in errore. Crea un elemento sconosciuto, ne mostra il contenuto e lo tratta come inline:

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

Un tag sconosciuto non ha significato per motori di ricerca e screen reader, quindi preferisci un tag vero. Se costruisci un tuo componente con JavaScript, dagli un nome con un trattino (user-badge): i nomi con il trattino sono riservati agli elementi personalizzati e non entrano mai in conflitto con i futuri tag HTML.

Errori comuni

Dimenticare un tag di chiusura. Un </a> o un </strong> mancante trasforma il resto della pagina in un link o in grassetto. I browser chiudono da soli alcuni tag (</p>, </li>), ma non questi.
Chiudere un tag vuoto. </br> e </img> non sono validi. I browser leggono addirittura </br> come un <br> di apertura, quindi <br></br> dà due a capo.
Tag sovrapposti. Chiudi in ordine inverso: <b><i>x</i></b>, mai <b><i>x</b></i>.
Mettere un blocco dentro un paragrafo. Un <div>, una lista o un titolo dentro <p> chiude il paragrafo in anticipo. Usa un <div> come contenitore esterno.
Scegliere i tag per il loro aspetto. Usa <h2> perché è un titolo, non perché è grande. Dimensione e spessore del testo sono compito del CSS.

Domande frequenti

Che differenza c'è tra un tag HTML e un elemento HTML?

Un tag è il markup che scrivi, come <p> o </p>. Un elemento è l'insieme che il browser costruisce a partire da esso: il tag di apertura, i suoi attributi, il contenuto e il tag di chiusura. <p>Hi</p> sono due tag che formano un elemento p.

Quali tag HTML non hanno bisogno di un tag di chiusura?

Gli elementi vuoti non possono avere contenuto, quindi non hanno un tag di chiusura: <br>, <hr>, <img>, <input>, <meta>, <link>, <source>, <track>, <wbr>, <area>, <base>, <col> e <embed>.

Devo scrivere <br> o <br />?

Sono entrambi HTML valido. La barra finale è ammessa sugli elementi vuoti e il browser la ignora. Su un tag non vuoto come <div /> la barra viene ignorata allo stesso modo, quindi il div resta aperto fino a un </div>.

I tag HTML distinguono tra maiuscole e minuscole?

No. <P> e <p> producono lo stesso elemento, e così qualsiasi combinazione di maiuscole e minuscole. Il minuscolo è lo stile standard ed è ciò che producono quasi tutti i formattatori.

Quanti tag HTML esistono?

Lo standard HTML attuale definisce più di 100 elementi, ma le pagine di tutti i giorni ne usano da 20 a 30 circa: titoli, paragrafi, link, immagini, liste, div, span, moduli e i tag semantici di layout.

Cosa succede se uso un tag che non esiste?

Il browser crea comunque un elemento, ne mostra il contenuto e lo tratta come un elemento inline senza un significato particolare. Gli elementi personalizzati sono ammessi se il nome contiene un trattino, come <user-card>.

Concetti correlati