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:
- Intestazioni:
h1-h6
- Paragrafi:
p
- Liste non ordinate:
ul
- Liste ordinate:
ol
- Liste di definizione:
dl
- Citazioni di blocco:
blockquote
- Citazioni inline (brevi):
q
- Fonte della citazione:
cite
- Enfasi semplice:
em
- Enfasi forte:
strong
- Codice di computer:
code
- Testo preformattato:
pre
- Inserimento di contenuto:
ins
- Cancellazione di contenuto:
del
- Abbreviazioni:
abbr
- Acronimi:
acronym
(deprecato in HTML5 in favore diabbr
) - 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:
è corretto, mentre:<h1>...</h1> <h2>...</h2> <h3>...</h3> <h2>...</h2> <h3>...</h3>
è errato, poichè si può ottenere lo stesso effetto con i CSS:<h1>...</h1> <h3>...</h3> <h2>...</h2> <h3>...</h3> <h2>...</h2>
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.