HTML5 introduce un buon numero di nuovi elementi, inizieremo a descrivere quelli strettamente connessi alla organizzazione dei contenuti ed alla strutturazione della pagina.
Il working draft elenca in questa macrocategoria i seguenti elementi:
- section
- article
- aside
- hgroup
- header
- footer
- nav
- figure
- figcaption
Darò per ognuno, oltre alla traduzione della definizione fornita del W3C, qualche suggerimento per l’utilizzo, attenendomi quanto più strettamente possibile alle linee indicate nel documento.
Prima di iniziare permettetemi una paio di brevi digressioni, la prima a proposito di ciò che il W3C descrive come Sectioning content: si tratta del contenuto che definisce l’ambito di headings (h1, h2, h3, h4, h5, h6, hgroup) e footers. Gli elementi che fanno parte di questa classificazione sono:
- article
- aside
- nav
- section
ai quali si aggiungono i sectioning root: blockquote, body, details, fieldset, figure, td.
Ognuno di questi elementi potenzialmente possiede un heading (e quindi un outline) ed un footer; tratteremo brevemente l’outline nell’ambito della descrizione del tag hgroup.
La seconda digressione riguarda i global attributes, gli attributi globali, applicabili cioè a tutti gli elementi, compongono la lista:
- accesskey
- class
- dir
- id
- lang
- style
- tabindex
- title
HTML5 ne introduce di nuovi:
- contenteditable: indica che l’elemento rappresenta una area editabile; è possibile per l’utente modificare il contenuto e manipolare il markup, dedicheremo uno spazio apposito nella guida per questo attributo.
- contextmenu: da utilizzare per puntare ad un context menu fornito dall’autore.
- gli attrinuti data-* (attributi custom definibili dall’utente)
- draggable e dropzone: da utilizzare insieme alle nuove Drag&Drop API.
- hidden: (booleano) indica che un elemento non è ancora o non è più rilevante. Il browser non deve mostrare elementi che abbiano questo attributo.
- role e aria-* (assistive technology).
- spellcheck: esplicitato per indicare se il contenuto richieda un controllo a livello di spelling.
Section
Definizione formale
L’elemento section rappresenta una sezione generica del documento o dell’applicazione. Una sezione, in questo contesto, è un raggruppamento tematico di contenuti, tipicamente corredato da un heading.
La specifica indica chiaramente quando utilizzarlo e quando avvalersi di altri costrutti. Alcuni casi d’uso suggeriti:
- un capitolo in una guida.
- i vari tabs di un documento (ovviamente strutturato a tabs).
- le sezioni numerate di una tesi.
- le varie sezioni (boxes) di una Home Page che raggruppano contenuti generici (introduzione, contatti, news).
section deve essere quindi utilizzato ogni qualvolta si intenda veicolare del contenuto che richiede una intestazione. L’elemento non deve essere utilizzato come aggregatore di stili per contenuti disomogenei; in questi casi è accettato l’utilizzo del tag div, contenitore più generico, che rimane nelle specifiche benché se ne scoraggi l’uso: il draft lo definisce letteralmente "last resort" (traducibile con "ultima spiaggia").
Nel caso di posts di un blog o di un forum, per articoli di un giornale o commenti inseriti dall’utente è preferibile l’utilizzo dell’elemento article, che vedremo a breve.
Ecco l’esempio minimale della sintassi di section fornito nel draft:
<section>
<h1>Titolo sezione</h1>
<p>Contenuti</p>
</section>Notate la presenza di un heading, rappresentato dall’elemento h1.
Ora vediamone una applicazione leggermente più elaborata (che ricorre volutamente al "last resort" come contenitore esterno):
<!doctype html>
<html>
<head>
<title>Guida HTML5</title>
<style>
#container { margin: 0 auto; width: 400px;}
</style>
</head>
<body>
<div id="container">
<section>
<h1>Introduzione ad HTML5</h1>
<p>Definizione</p>
<p>Perchè HTML5</p>
</section>
<section>
<h1>Storia</h1>
<p>Da HTML Tags ad HTML 4.01</p>
<p>XHTML</p>
</section>
<section>
<h1>Nuovi tags</h1>
<p>Section</p>
<p>Article</p>
<p>Nav</p>
<p>Aside</p>
<p>...</p>
</section>
</div>
</body>
</html>Ecco il risultato mostrato da Firefox:
Benché le sezioni possano contenere headings di qualsiasi livello o rank (da 1 a 6) il W3C consiglia l’uso di h1 o comunque di un heading correlato al livello di indentazione della sezione stessa.
