Un principio importante nel web design è l'idea di utilizzare gli elementi HTML per indicare cosa sono effettivamente, piuttosto che come potrebbero apparire nel browser per impostazione predefinita. Questo è noto come utilizzo di HTML semantico.

Che cos'è l'HTML semantico?

L'HTML semantico o il markup semantico è HTML che introduce un significato alla pagina web piuttosto che solo la presentazione. Ad esempio, a

 tag indica che il testo allegato è un paragrafo. Questo è sia semantico che di presentazione perché le persone sanno cosa sono i paragrafi e i browser sanno come visualizzarli.

Il rovescio della medaglia di questa equazione, tag come  e  non sono semantici. Definiscono solo come dovrebbe apparire il testo (grassetto o corsivo) e non forniscono alcun significato aggiuntivo al markup.

Esempi di tag HTML semantici includono:

• Tag di intestazione

   attraverso

Ci sono molti altri tag HTML semantici da utilizzare per creare un sito Web conforme agli standard.

Perché dovresti preoccuparti della semantica?

Il vantaggio di scrivere HTML semantico deriva da quello che dovrebbe essere l'obiettivo trainante di qualsiasi pagina web: il desiderio di comunicare. Aggiungendo tag semantici al tuo documento, fornisci informazioni aggiuntive su quel documento, che aiutano nella comunicazione. Nello specifico, i tag semantici rendono chiaro al browser qual è il significato di una pagina e del suo contenuto. Tale chiarezza viene comunicata anche ai motori di ricerca, garantendo che vengano fornite le pagine giuste per le query giuste.

I tag HTML semantici forniscono informazioni sul contenuto di quei tag che vanno oltre il loro aspetto su una pagina. Testo racchiuso tra  tag viene immediatamente riconosciuto dal browser come un tipo di linguaggio di codifica. Invece di provare a riprodurre quel codice, il browser capisce che stai usando quel testo come esempio del codice ai fini di un articolo o di un tutorial online.

L'uso di tag semantici ti offre anche molti più hook per lo styling dei tuoi contenuti. Forse oggi preferisci che i tuoi esempi di codice vengano visualizzati nello stile predefinito del browser, ma domani potresti volerli richiamare con un colore di sfondo grigio; in seguito, potresti voler definire la famiglia di caratteri a spaziatura fissa precisa o pila di caratteri da utilizzare per i tuoi campioni. Puoi fare tutte queste cose facilmente usando il markup semantico e CSS applicati in modo intelligente.

Usare correttamente i tag semantici

Quando si utilizzano tag semantici per trasmettere un significato piuttosto che per scopi di presentazione, fare attenzione a non utilizzarli in modo errato semplicemente per le loro proprietà di visualizzazione comuni. Alcuni dei tag semantici più comunemente utilizzati in modo improprio includono:

• citazione — Alcune persone usano il tag per il rientro del testo che non è una citazione. Questo perché le virgolette sono rientrate per impostazione predefinita. Se vuoi semplicemente far rientrare il testo che non è un blockquote, usa invece i margini CSS.
• p — Alcuni editor web usano (uno spazio unificatore contenuto in un paragrafo) per aggiungere spazio extra tra gli elementi della pagina, piuttosto che definire i paragrafi effettivi per il testo di quella pagina. Come nell'esempio precedente, dovresti invece usare la proprietà margin o padding style per aggiungere spazio.
• ul — Come con

  , racchiudendo il testo all'interno di a

   tag fa rientrare quel testo nella maggior parte dei browser. Questo è sia HTML semanticamente errato che non valido, perché solo
  •  i tag sono validi entro a
    etichetta. Ancora una volta, usa il margine o lo stile di riempimento per far rientrare il testo.
  • h1, h2, h3, h4, h5 e h6 — È possibile utilizzare i tag di intestazione per rendere i caratteri più grandi e più audaci, ma se il testo non è un'intestazione, utilizzare invece le proprietà CSS font-weight e font-size.

  Usando tag HTML che hanno un significato, crei pagine che forniscono più informazioni rispetto a quelle che semplicemente circondano tutto con

   tag.

  Quali tag HTML sono semantici?

  Sebbene quasi tutti i tag HTML4 e tutti i HTML5 i tag hanno significati semantici, alcuni tag lo sono in primis semantico.

  Ad esempio, HTML5 ha ridefinito il significato di  e  i tag devono essere semantici. Il  il tag non trasmette ulteriore importanza; piuttosto, il testo con tag è in genere reso in grassetto. Allo stesso modo, il  il tag non trasmette ulteriore importanza o enfasi; piuttosto, definisce il testo che è tipicamente reso in corsivo.

  Tag HTML semantici

  Abbreviazione
  Acronimo
  Citazione lunga
  Definizione
  Indirizzo dell'autore/i del documento
  Citazione
  Riferimento codice
  Telescrivi testo
  Divisione logica
  Contenitore di stile in linea generico
  Testo cancellato
  Testo inserito
  enfasi
  Forte enfasi
  Titolo di primo livello
  Titolo di secondo livello
  Titolo di terzo livello
  Titolo di quarto livello
  Titolo di quinto livello
  Titolo di sesto livello
  	Pausa tematica
  Testo da inserire da parte dell'utente
  Testo preformattato
  Citazione in linea breve
  Esempio di output
  pedice
  Apice
  Testo variabile o definito dall'utente