Tag di Struttura Content Model

La fondamentale differenza tra gli standard html e xhtml che lo hanno preceduto è che l’html5 ha introdotto un nuovo content model, basato appunto contenuti, punteggiando l’esperienza e la struttura dei siti web negli ultimi anni.

In sostanza, mentre prima le etichette che avevamo a disposizione per descrivere gli elementi, indicavano la caratteristica intrinseca dell’entità (il tag p, per il paragrafo, il tag img per le immagini), ora esistono dei tag di struttura che identificano il ruolo o la funzione che i tag al loro interno hanno rispetto all’intero sistema sito.

Quindi una lista link creata con ul + li se usata dentro un tag nav, indica una lista di navigazione per muoversi all’interno del sistema, gli stessi tag ul+li se usati all’interno di un tag article, potrebbero ad esempio indicare una raccolta di link a risorse (un elenco di ebook o di link interessanti), parte integrante del contenuto dell’articolo.

Vediamoli in dettaglio:

<header>
Rappresenta una raccolta di contenuti introduttivi (esempio titolo, sottotitolo del sito) di un intero documento o di una sua parte (ad esempio la testata di un articolo)
<section>
In linea generale rappresenta una sezione, una porzione di pagina o di applicazione
<article>
viene definito come “elemento” di contenuto atomico, riutilizzabile singolarmente (ad esempio attraverso un feed)
<nav>
racchiude delle informazioni di navigazione (link ad altre pagine/sezioni) – non necessariamente a lista
<aside>
Racchiude contenuti trasversali, non legati al tema della pagina/sezione (esempi sidebar, adv, quotes….)
<footer>
Contiene informazioni di “chiusura” di una pagina o di una parte di essa. Se riguarda un articolo, può raccogliere informazioni come autore, link a documenti correlati, copy. Se riguarda un documento ne sono esempi, informazioni di contatto, agreement,  etc…

Esempi

  <!-- questo esempio preso dall'api del w3c illustra la struttura tipica di un block-->

<header>
  <h1>Titolo</h1>
  <p>Tagline</p>
 </header>
<!-- sidebar con archivi e ultimi post -->
 <aside>
  <nav>
   <h1>My blogroll</h1>
   <ul>
    <li><a href="http://blog.example.com/">Example Blog</a>
   </ul>
  </nav>
  <nav>
   <h1>Archives</h1>
   <ol reversed>
    <li><a href="/last-post">My last post</a>
    <li><a href="/first-post">My first post</a>
   </ol>
  </nav>
 </aside>

 <article>
  <!-- this is a blog post -->
  <h1>My last post</h1>
  <p>This is my last post.</p>
  <footer>
   <p><a href="/last-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <article>
  <!-- this is also a blog post -->
  <h1>My first post</h1>
  <p>This is my first post.</p>
 
  <footer>
   <p><a href="/first-post" rel=bookmark>Permalink</a>
  </footer>
 </article>
 <footer>
  <nav>
   <a href="/archives">Archives</a> —
   <a href="/about">About me</a> —
   <a href="/copyright">Copyright</a>
  </nav>
 </footer>
</body>

See the Pen PPWERV by Mariachiara Pezzotti (@merissimissima) on CodePen.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.