Introduzione a HTML 5: altri nuovi elementi

Negli articoli precedenti di questa serie abbiamo già introdotto alcuni nuovi elementi di HTML 5, partendo da quelli che saranno con ogni probabilità i più utilizzati.

Ora allarghiamo la panoramica e vediamone altri.

hgroup

In HTML 5 gli elementi heading (h1, h2, e cosi via) non cambiano.

Tuttavia possono essere raggruppati in modo da ripetere la gerarchia in diverse parti della pagina.

Riprendendo uno dei nostri articoli:

<article>
  <header>
    <hgroup>
      <h1>Titolo del primo articolo</h1>
      <h2>Sottotitolo del primo articolo</h2>
    </hgroup>
  </header>
  Questo è il primo articolo
  <footer>
    <p>Commenti (0)</p>
  </footer>
</article>

Gli elementi h1 e h2 che abbiamo inserito all’interno dell’articolo fanno storia a sè, e non sono relazionati con altri elementi heading nel resto della pagina.

Questo è dovuto al fatto che sono contenuti in un elemento hgroup.

Figure e figcaption

Per identificare meglio le parti visuali (immagini, video) che fanno parte dell’articolo si usa il nuovo elemento figure.

Opzionalmente, una descrizione dell’elemento visuale può essere inserita come figcaption.

<article>
  <header>
    <h1>Titolo del secondo articolo</h1>
  </header>
  Questo è il secondo articolo
  <figure>
    <img src="img/sample.jpg" alt="A sample image" />
    <figcaption>This is just a sample image</figcaption>
  </figure>
  <footer>
    <p>Commenti (0)</p>
  </footer>
</article>

Rimane quindi il normale elemento img, ma inserito in un contenitore più specifico.

Altri elementi

Non è finita qui: vediamo una lista rapida di altre novità.

mark identifica un elemento che ha assunto una importanza temporanea relativa al contesto. L’esempio più chiaro è una ricerca nel sito: negli articoli risultanti, viene evidenziata la parola che è stata cercata.

small identifica gli elementi con un importanza minore, quali note sul copyright, disclaimer, informazioni legali, e cosi via. Nota: l’elemento esisteva già, ma ora si pone l’accento sul significato del contenuto e non semplicemente sulla dimensione del testo.

cite identifica un nome o un titolo, quale ad esempio un film o una canzone.

address identifica un indirizzo e-mail o geografico

time identifica una informazione relativa all’orario, ad esempio:

<article>
  <header>
    <hgroup>
      <h1>Titolo del primo articolo</h1>
      <h2>Sottotitolo del primo articolo</h2>
    </hgroup>
    <time datetime="2012-05-06" pubdate>pubblicato il 6 Maggio 2012</time>
  </header>
  Questo è il primo articolo
  <footer>
    <p>Commenti (0)</p>
  </footer>
</article>

E adesso parliamo di stile

Con questa carrellata di elementi abbiamo concluso la parte di scrittura della pagina in HTML.

Ma come abbiamo già detto la vera rivoluzione sta nell’interazione di HTML 5 con CSS e JavaScript.

Dal prossimo articolo affronteremo quindi i fogli di stile per verificare le novità portate da CSS 3.