Struttura
HTML 5 introduce un set di nuovi elementi che rendono più semplice la definizione della struttura di una pagina. La maggior parte delle pagine scritte in HTML 4 contiene una varietà di elementi strutturali comuni, come header, footer, colonne. Oggi è una prassi piuttosto diffusa definirli nel markup usando elementi div e assegnando a ciascuno un id o una classe descrittiva:
Figura 1 - Tipico layout a due colonne definito con div e attributi id e class. Contiene un header, un footer, una barra orizzontale di navigazione sotto l'header. L'area principale contiene una colonna per gli articoli e una barra laterale
L'uso di elementi div è molto diffuso perché la versione attuale di HTML 4 manca dei necessari elementi semantici per descrivere e definire queste parti in maniera più specifica. HTML 5 tenta di dare una risposta a questo problema introducendo nuovi elementi per rappresentare ciascuna di queste diverse sezioni:
Figura 2 - I div sono sostituiti da nuovi elementi: header, nav, section, article, aside, footer
Il markup del documento sarebbe più o meno questo:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Molti vantaggi derivano dall'adozione di questi elementi. Usati insieme ad elementi per la definizione di titoli (da h1 a h6), tutto ciò fornisce un modo per marcare sezioni annidate con livelli di titolo, al di là dei sei livelli possibili con le precedenti versioni di HTML. La specifica include un dettagliato algoritmo per la generazione di uno schema strutturale che prende in conto la struttura di questi elementi e rimane retrocompatibile con le versioni precedenti. Ciò può essere usato sia dai produttori di editor e strumenti per per lo sviluppo, sia dai produttori di browser per generare indici in grado di assistere gli utenti nella navigazione del documento.
Per esempio, osserviamo la struttura che segue con elementi section e h1 annidati:
<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>
Si noti che, per mantenere una migliore compatibilità con gli attuali browser, è anche possibile usare in modo appropriato altri elementi di titolo (da h2 a h6) al posto dei soli elementi h1.
Identificando lo scopo delle sezioni di una pagina attraverso l'uso di specifici elementi di sezione, le tecnologie assistive possono aiutare l'utente a navigare più facilmente nella struttura della pagina. Per esempio, possono facilmente saltare la sezione di navigazione o passare direttamente da un articolo all'altro senza la necessità da parte dell'autore della pagina di fornire i classici skip link. Gli autori possono al tempo stesso trarre benefici perché sostituendo molti dei div nel documento con uno solo dei tanti elementi distinti per la definizione della struttura possono mantenere il codice più pulito e comprensibile.
Guide HTML/XHTML
Guida HTMLL'HTML è il principale linguaggio di pubblicazione di pagine Web.... |
Guida XHTMLXHTML è il nuovo standard per il WEB ed è la transizione verso... |
Newsletter @Daily HTML.it
Ogni mattina, dal lunedì al venerdì, le novità pubblicate su tutti i siti tecnici del network HTML.it: articoli, guide, notizie dal Web, blog e molto altro.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |