Semantica degli elementi HTML

  • (X)HTML
  • Gabriele Romanato
Semantica degli elementi HTML

Sia che si tratti di HTML, XHTML o HTML5, la semantica degli elementi di un linguaggio di marcatura derivato da SGML si traduce nell'utilizzo dell'elemento appropriato per un dato scopo. Lo scopo è sempre quello di marcare i contenuti di un documento web secondo le caratteristiche semantiche di un dato elemento. Seguendo questo approccio avremo una marcatura semantica, viceversa avremo una marcatura difficile da comprendere e incoerente.

Elementi generici

Gli elementi generici sono quegli elementi che non hanno un ruolo semantico predefinito. Essi sono:

  • div
  • span

Il primo è un elemento di blocco, il secondo un elemento inline. Questi elementi ricevono un ruolo solo con l'uso di determinati attributi (come id o class). In linea di massima, questi elementi andrebbero usati solo quando altri elementi semantici non sono adatti allo scopo. Esempio:


<div id="header">
  <h1>...</h1>
</div>

Con l'introduzione di HTML5, il bisogno di questi elementi generici si è ridotto. L'esempio precedente può essere riscritto come:


<header>
  <h1>...</h1>
</header>

Elementi presentazionali

Gli elementi presentazionali andrebbero sempre evitati in favore di elementi semantici o dei fogli di stile CSS. Essi sono:

  • b
  • i
  • strike
  • blink
  • font
  • center

Elementi semantici

Gli elementi semantici più usati comprendono:

  1. Intestazioni: h1-h6
  2. Paragrafi: p
  3. Liste non ordinate: ul
  4. Liste ordinate: ol
  5. Liste di definizione: dl
  6. Citazioni di blocco: blockquote
  7. Citazioni inline (brevi): q
  8. Fonte della citazione: cite
  9. Enfasi semplice: em
  10. Enfasi forte: strong
  11. Codice di computer: code
  12. Testo preformattato: pre
  13. Inserimento di contenuto: ins
  14. Cancellazione di contenuto: del
  15. Abbreviazioni: abbr
  16. Acronimi: acronym (deprecato in HTML5 in favore di abbr)
  17. Informazioni sull'autore del documento: address

Alcuni consigli:

  • Le intestazioni andrebbero usate seguendo il loro ordine sequenziale, dove 1 rappresenta l'intestazione di maggior rilievo e 6 quella di minor rilievo, senza salti. Questo infatti consente ai lettori di schermo di navigare tra le intestazioni seguendo il loro ordine logico. Quindi: 
    
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h2>...</h2>
<h3>...</h3>
    è corretto, mentre: 
    
<h1>...</h1>
<h3>...</h3>
<h2>...</h2>
<h3>...</h3>
<h2>...</h2>
    è errato, poichè si può ottenere lo stesso effetto con i CSS: 
    
h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.8em;
}
  • address va usato per le informazioni riguardanti l'autore effettivo del documento, non per marcare le informazioni relative al proprietario del sito. Potete usarlo per marcare i riferimenti a voi o alla vostra web agency.
Torna su