HTML/XHTML  »  Articoli  »  HTML5 

header

L'elemento <header> rappresenta la testata di una sezione. Gli header possono contenere più della semplice intestazione della sezione. Sarebbe ad esempio ragionevole per un header includere sotto-intestazioni o altre informazioni di supporto:

<header>
  <h1>A Preview of HTML 5</h1>
  <p class="byline">By Lachlan Hunt</p>
</header>

<header>
  <h1>Example Blog</h1>
  <h2>Insert tag line here.</h2>
</header>

footer

L'elemento <footer> rappresenta il footer della sezione a cui si applica. Un footer, in genere, contiene informazioni su quella sezione (chi l'ha scritta, link a documenti correlati, copyright, etc):

<footer>© 2007 Example Inc.</footer>

nav

L'elemento <nav> rappresenta una sezione con link di navigazione. È adatta sia per la navigazione del sito sia per un indice:

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

aside

L'elemento <aside> serve per ospitare contenuto che è in qualche modo correlato al contenuto che lo circonda. In genere può essere utile per definire colonne laterali:

<aside>
  <h1>Archives</h1>
  <ul>
    <li><a href="/2007/09/">September 2007</a></li>
    <li><a href="/2007/08/">August 2007</a></li>
    <li><a href="/2007/07/">July 2007</a></li>
  </ul>
</aside>

section

L'elemento <section> rappresenta una generica sezione del documento o di un'applicazione, come un capitolo, per esempio:

<section>
  <h1>Chapter 1: The Period</h1>
  <p>It was the best of times, it was the worst of times,
     it was the age of wisdom, it was the age of foolishness,
     it was the epoch of belief, it was the epoch of incredulity,
     it was the season of Light, it was the season of Darkness,
     ...</p>
</section>

article

L'elemento <article> rappresenta una sezione indipendente di un documento, di una pagina o di un sito. È adatto per contenuti come news o post di un blog, interventi in un forum o commenti:

<article id="comment-2">
<header>
  <h4><a href="#comment-2" rel="bookmark">Comment #2</a> by <a href="http://example.com/">Jack O'Niell</a></h4>
  <p><time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>
</header>
<p>That's another great article!</p>
</article>

Si chiude qui la prima parte. Nella prossima vedremo le novità relative agli elementi per il multimedia e alla rappresentazione del documento.

Altre guide

Altre newsletter