Nel mio post precedente ho introdotto le novità semantiche che HTML5 ci offre per garantire maggiore uniformità e leggibilità al codice delle nostre pagine web. Oggi, invece, analizzeremo i vari tag HTML5 che possiamo utilizzare per sviluppare pagine web il cui codice abbia buona leggibilità.
Gli elementi <header> e <footer>
Generalmente possiamo pensare all’header come l’intestazione del sito uguale in tutte le pagine. Il tag header di HTML5 ci aiuta non solo a definire lo spazio di intestazione del sito, ma costituisce un aiuto per tutte le volte che dobbiamo definire l’intestazione di un elemento. Ad esempio se dobbiamo creare un box contenente la classifica delle squadre che fanno parte del campionato di Serie A e ci serve un’intestazione “Classifica” possiamo utilizzare l’elemento <header> come in esempio:
[html]
<body>
<header>
<h1>Questa è l’intestazione del nostro sito</h1>
</header>
<div>
<header>Classifica</header>
<section>Inter …</section>
<section>Roma …</section>
<section>Milan …</section>
</div>
</body>
[/html]
Come vediamo dal codice, abbiamo utilizzato il tag non solo nell’intestazione del sito, ma anche come intestazione di un box interno (in questo caso della classifica).
Sfruttando questo metodo di utilizzazione degli elementi dobbiamo considerare gli elementi della pagina non più nell’ottica degli ID: #elemento, ma secondo le CLASSI: .elemento. Dovremo, quindi, prestare attenzione alle regole CSS da utilizzare per le varie parti della nostra pagina web.
Lo stesso discorso appena introdotto per l’<header> vale per l’elemento <footer>. Chiaramente la differenza sostanziale tra i due è a livello semantico; il funzionamento dei due, invece, è identico.
L’elemento <section>
Il tag <section> è utile per definire porzioni di pagina che indicano elementi differenti. Questo elemento contiene, spesso, un <header> e un <footer> che definiscono l’intestazione e la chiusura del box. Anche per <section> l’utilità non è solo pratica, nella divisione del codice, ma anche semantica per permettere di differenziare le sezioni del sito.
L’elemento <article>
Il tag <article> ci permette di definire una porzione di codice con la quale vogliamo identificare un contenuto indipendente dal resto del sito, come ad esempio un post o un articolo generico. Chiaramente, nella pagina Chi siamo del nostro sito internet non useremo un tag <article>, ma un tag <section>, perchè si tratta di un contenuto fortemente dipendente dal resto del sito.
Grazie all’attributo cite possiamo anche definire l’url dell’articolo, nel caso si tratti di un contenuto esterno al nostro sito internet.
Possiamo pensare ad una possibile struttura di codice per una pagina contenente alcuni articoli inerenti l’HTML5 come nell’esempio seguente:
[html]
<body>
<section>
<header>
<h2>I tag di HTML5</h2>
</header>
<article>
<h3>L’elemento <article></h3>
<p>Il tag <article> è utile per definire …</p>
</article>
<article>
<h3>L’elemento <header></h3>
<p>Il tag <header> serve per indicare …</p>
</article>
<footer>Raccolta di articoli pubblicata il 20/06/2010 alle 14:30</footer>
</section>
</body>
[/html]
L’elemento <nav>
Il tag <nav> è definito per quella parte della pagina che contiene i link di navigazione interni al sito. Questo contenitore di link deve essere la barra di navigazione principale del sito e può essere un menu verticale, orizzontale, con sottomenu a comparsa ecc… Chiaramente, nel caso di menu secondari (ad esempio nel footer, o a lato) è meglio non utilizzare l’elemento <nav> proprio perchè a livello semantico esso è dedicato alla barra di navigazione principale del sito.
L’utilizzazione del tag è basilare:
[html]
<nav>
<a href="home">Home Page</a>
<a href="chi-siamo">Chi siamo</a>
<a href="prodotti">Prodotti</a>
<a href="servizi">Servizi</a>
<a href="contatti">Contatti</a>
</nav>
[/html]
L’elemento <aside>
Il tag <aside> è un wrapper per elementi in linea con la pagina web, ma non strettamente appartenenti al contenuto presente. In un tag <aside> possiamo trovare banner pubblicitari, menu, menu laterali, ed elementi marginali della nostra pagina web.
Conclusione
Oggi abbiamo introdotto alcuni elementi HTML5 che ci offrono la possibilità di sviluppare siti internet in linea con gli standard e mantenendo il codice più leggibile possibile. Ho trovato su internet, alcuni post nei quali, concettualmente, si dice: “ah, finalmente arrivano i tag HTML5 così non dobbiamo più usare i DIV“.
Io non credo affatto che sia un male usare i DIV, ma che anzi siano indispensabili per chi vuole sviluppare sul web in questi tempi. Tuttavia penso che sia corretto cercare di mantenere il codice più semplice a livello di leggibilità, rispettare la semantica della pagina web e sviluppare secondo gli standard. Questo non vuol dire eliminare i DIV dallo sviluppo web, ma semplicemente, utilizzare, quando possibile, i tag introdotti quest’oggi.
Nel nostro prossimo appuntamento cercheremo di analizzare le questioni di compatibilità tra browser per gli elementi HTML5.
