L'introduzione di nuovi tag come header, hgroup, nav, aside, section, article, footer ed altri rivoluzionano il modello strutturale del documento comunicando al browser il modo in cui dovrà restituire lato utente la visualizzazione della pagina.
Viene stravolto ad esempio il concetto di H1 come tag unico per indicare un titolo che funga da argomento principale della pagina in quanto esso può essere ripetuto, ad esempio in una lista di contenuti, per ogni titolo di ciascun elemento visualizzato nella lista. In altre parole il contenuto della pagina viene settorializzato ed ogni settore è come se avesse una trattazione a se; niente di diverso dai div a livello concettuale ma assai diverso a livello di comunicazione al browser e sua interpretazione.
Con il codice seguente faccio un esempio di una pagina web in HTML5 che sfrutta questo concetto:
<!doctype html>
<html>
<head>
<title>La mia lista della spesa</title>
</head>
<body>
<header>
<hgroup>
<h1>Lista della spesa online</h1>
<h2>Elenco di alimenti e bevande suddiviso per reparto alimentare</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Profilo</a></li>
<li><a href="#">La mia spesa</a></li>
<li><a href="#">I miei ordini precedenti</a></li>
<li><a href="#">I miei prodotti preferiti</a></li>
</ul>
</nav>
</header>
<section>
<h1>Frutta</h1>
<article>
<h1>Arance</h1>
<p>Arance rosse di Sicilia</p>
</article>
<article>
<h1>Prugne</h1>
<p>Prugne blu della California</p>
</article>
</section>
<section>
<h1>Frigo</h1>
<article>
<h1>Yogurt</h1>
<p>Yogurt magro alla frutta</p>
</article>
<article>
<h1>Mozzarelle</h1>
<p>Mozzarelle di bufala per la pizza.</p>
</article>
</section>
<footer></footer>
</body>
</html>Il risultato a video è mostrato in Fig. 1 ed è interessante notare come il browser riesca ad intepretare in modo diverso, nonostante l'assenza di un foglio di stile, lo stesso tag H1 presente nelle diverse porzioni identificate dai tag hgroup, section e article.
Fig. 1 - Esempio di content model con i nuovi tag introdotti nella specifica HTML5
Di content model ce ne sono altri oltre all'appena visto sectioning content e per ciascuno di essi fanno parte gruppi diversi di elementi più o meno numerosi finalizzati alle relative funzionalità; di seguito una lista dei content model esisteni con la propria definizione ed alcuni tag rappresentativi di ciascun gruppo che possono essere presenti in più gruppi sia in base alla loro funzione di default che agli eventuali attributi assegnati:
- Metadata content: ne fanno parte quegli elementi atti alla presentazione del documento (come i tag title, meta, style, ...) ed al suo funzionamento (link, script, ...).
- Sectioning content: ne fanno parte quegli elementi atti a contenere dei contenuti ordinati, non mi dilungo nella descrizione dato che l'esempio di codice in questo articolo ne mostra la loro funzionalità (article, section, aside, nav).
- Heading content: per definire i titoli come hgroup e h1 mostrati nell'esempio ma anche h2, h3, ...
- Phrasing content: per il testo del documento e elementi visuali (button, canvas, select, textarea, video, ...).
- Embedded content: per incorporare elementi esterni nella pagina (iframe, embed, audio, video ...).
- Interactive content: per le interazioni con l'utente (a, audio, button, input, video se con l'attributo controls, ...).
- Flow: per racchiudere tutti o quasi tutti gli altri elementi della pagina ed all'interno dei form (span, div).
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
Scrivi un Commento