Paolo De Feo
a- a+

Struttura di un sito in HTML5: header, nav, section, article, aside, footer e il nuovo doctype

Vediamo caratteristiche principali e novità della nuova struttura modulare per le pagine web scritte in HTML5.

La nuova e ordinata struttura modulare prevista dall’HTML5 è possibile grazie all’implementazione di nuove specifiche di marcatura: vediamole insieme.

DOCTYPE

Un cenno merita il nuovo DOCTYPE definito in HTML5: nessuna stringa lunga e confusa, ma solo un semplice snippet che indica al browser che tipo di documento sta elaborando.

Eccolo:

<!DOCTYPE html>

HEADER

Il tag <header> serve per mostrare informazioni introduttive inerenti ad una sezione di documento oppure ad un’intera pagina.

<header>
<h1>Benvenuto nel mio sito web</h1>
<p>qui va il contenuto…</p>
</header> 

<p>The rest of my home page...</p>

NAV

Come facilmente intuibile, il tag <nav> serve a delimitare una sezione dedicata a custodire gli elementi per l’esplorazione del sito: è in pratica un marcatore per il menu di navigazione.

<nav>
<a href="index.html">Home</a>
<a href="chi-siamo.html">chi siamo</a>
<a href="contatti.html">contatti</a>
</nav>

SECTION

Il tag <section> serve per stabilire un raggruppamento tematico di contenuti. Questo tag può essere usato ad esempio per ospitare e mostrare la parte centrale dei contenuti di navigazione.

<section>
  <h1>Webmasterpoint.org</h1>
  <p>Werbmasterpoint.org è il sito di riferimento italiano per sviluppatori e web designer</p>
</section>

ARTICLE

Come specificato in una nota del WHATWG (Web Hypertext Application Technology Working Group), il tag <article> serve a definire una sezione di contenuto che forma una parte indipendente di una porzione di documento o di un sito. In parole povere, tutti quei contenuti come news, blog post e simili.

<article>
<a href="http://www.sito-news-italia.com/2011/05/25/
news-del-giorno.html">
link ipertestuale</a><br />
Qui va il contenuto della notizia del giorno
</article>

ASIDE

Il tag <aside> serve per fornire informazioni supplementari all’utente: è un tag che fa da contorno al flusso informativo principale, creando un approfondimento che può essere utile in alcuni casi (come spiegazioni particolari).

<p>Il TNT è un potente esplosivo.</p>
<aside>
<h4>TNT</h4>
TNT è l’acronimo di trinitrotoluene, meglio conosciuto come “tritolo”.
</aside>

FOOTER

Il tag <footer> serve generalmente a inglobare, a piè di pagina, informazioni come autore, data di creazione del sito e simili.

<footer>Copyright 2011-2012 WMP</footer>

In pratica, la creazione  di pagine web avviene seguendo una precisa “scaletta” d’implementazione. Risultato: un markup più pulito e facilmente gestibile.



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Redazione
Condividi le tue opinioni su questo articolo!