MICHELEPISANI.IT

Guida HTML5

Un nuovo modo di strutturare le pagine web

I nuovi content models in HTML5

Agosto 15
07:082014

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.

Esempio di content model con i nuovi tag introdotti nella specifica

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).

 

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele

Ciao domenico,
hai provato con

Michele

Ciao Luca,
hai provato a contattare l'assistenza di Facebook? Attualmente la via migliore …

domenico

ciao, puoi aiutarmi?

ho creato un form che tramite una chiamata mi restituisce una …

Luca

Peccato che fb abbia modificato tutto ed ora sembra non esserci alcun modo per accedere alle …