Header

Link copiato negli appunti

Funzioni e dati tecnici

Il tag header serve a rappresentare "un gruppo di ausili introduttivi o di navigazione". Tale definizione, seppure apparentemente vaga, contiene in sé i concetti chiave per comprendere appieno la funzione di questo tag:

L'elemento <header> è un contenitore per altri elementi.
L'elemento <header> non va confuso con quella che è la testata/intestazione principale di un documento (quella che oggi si definisce in genere con il tag <h1>).
La natura e gli scopi dell'elemento <header> non dipendono dalla sua posizione nel documento, ma dai suoi contenuti (ausili alla navigazione o elementi introduttivi).
Il suo uso non è obbligatorio e in alcuni casi può risultare superfluo se non utilizzato in maniera appropriata.

<header>
 <h1>Questo è un titolo</h1>
 <h2>Questo è un sotto-titolo</h2>
 [...]
</header>

Header: esempi concreti

Riprendendo il nostro progetto guida, dove nella lezione precedente abbiamo definito il contenuto dell'<head>:

<head>
    <meta charset="utf-8">
    <title> We5! Il blog della guida HTML5 </title>
    <link rel="stylesheet" href="monitor.css" media="screen">
    <link rel="stylesheet" href="printer.css" media="print">
    <link rel="stylesheet" href="phone_landscape.css"
          media="screen and (max-device-width: 480px) and (orientation: landscape)">
    <link rel="stylesheet" href="phone_portrait.css"
          media="screen and (max-device-width: 480px) and (orientation: portrait)">
    <link rel="icon" href="standard.gif" sizes="16x16" type="image/gif">
    <link rel="apple-touch-icon" href="iphone.png"   sizes="57x57" type="image/png">
    <link rel="icon" href="vector.svg"   sizes="any"   type="image/svg+xml">
</head>

A questo punto possiamo iniziare a comporre il <body> del nostro documento partendo proprio con il tag <header>, che con l'elemento <hgroup> definisce il titolo principale del documento (del sito) e la cosiddetta tagline:

<header>
  <hgroup>
      <h1>We5! Il blog della guida HTML5</h1>
      <h2>Approfittiamo fin da oggi dei vantaggi delle specifiche HTML5!</h2>
  </hgroup>
</header>

Ma header non deve contenere necessariamente solo titoli <hn>! Se titolo e sottotitolo principali sono certamente elementi introduttivi ai contenuti successivi, è naturalmente un ausilio di navigazione una lista di link che andrà a formare la barra di navigazione principale del sito. Ecco come possiamo completare la struttura del nostro primo <header>:

<header>
  <hgroup>
    <h1>We5! Il blog della guida HTML5</h1>
    <h2>Approfittiamo fin da oggi dei vantaggi delle specifiche HTML5!</h2>
  </hgroup>
  <nav>
    <h1>Navigazione:</h1>
    <ul>
      <li><a href="/home">Home</a></li>
      <li><a href="/about">Gli autori</a></li>
      <li><a href="/refactoring">Il progetto four2five</a></li>
      <li><a href="/archives">Archivio</a></li>
    </ul>
  </nav>
</header>

Nel seguente schema abbiamo realizzato graficamente ciò che il codice semanticamente rappresenta nel nostro progetto:

Figura 8 - Struttura del documento: primo header
schema template html5 [header]

Abbiamo inserito una sezione di navigazione (<nav> </nav>) introdotta da un elemento <h1> e strutturata con una lista non ordinata.

In realtà, il menu di navigazione non deve essere necessariamente inserito nell'<header>, nel nostro esempio non poteva essere fatto altrimenti ma esistono numerosi tipi di layout in cui il menu di navigazione può essere facilmente slegato dagli elementi introduttivi di intestazione del documento.

Il template del nostro progetto guida, lo accennavamo nelle precedenti lezioni, è relativo ad un blog. Nel corpo del documento, ad un certo punto, trova posto una sezione che ospita i contenuti principali della pagina, i post. Per definire semanticamente la sezione useremo il tag <section>; ciascun post sarà definito a livello strutturale da un tag <article>:

<section>
  <h1>L'ultimo post</h1>
  <article>
  [...]
  </article>
</section>

Si noti, innanzitutto, come il tag <h1> che fa da titolo principale alla sezione non sia racchiuso in un elemento <header>. Ribadiamo: non è obbligatorio inserire i titoli <hn> all'interno di un contenitore <header>.

A questo punto, dobbiamo definire due elementi fondamentali per la struttura di un post di blog: il titolo e la data. Sono certamente ausili introduttivi, secondo la definizione da cui siamo partiti. é più che legittimo e sensato, pertanto, racchiuderli in un tag <header>:

<section>
  <h1>L'ultimo post</h1>
  <article>
    <header>
      <time datetime="2010-11-22" pubdate>Lunedì 22 Novembre</time>
      <h2>Nuove scoperte sul tag video!</h2>
    </header>
    <p>
      [...]
    </p>
    <footer>
      [...]
    </footer>
  </article>
</section>

Ecco quindi come il nostro articolo potrebbe essere rappresentato graficamente:

Figura 9 - Struttura del documento: header degli articoli
schema template html5 [header]

I due scenari mostrati rendono bene l'idea rispetto agli utilizzi tipici dell'elemento <header>. La specifica suggerisce come altri contesti d'uso la tavola dei contenuti di una sezione, un form di ricerca o i loghi più rilevanti presenti nel documento.

Nella prossima lezione capiremo come utilizzare l'elemento <footer> e quale è la sua rilevanza semantica all'interno di un template.