Article
Definizione formale
L’elemento article rappresenta una porzione di contenuto indipendente di un documento, di una pagina o di un sito, tale porzione è sostanzialmente distribuibile e riusabile indipendentemente dal contesto in cui viene definita.
Come accennato nella descrizione di section, campi di applicazioni di article possono essere i un post di un forum, un articolo di un magazine, un commento inserito da un utente. Anche una widget interattiva è candidata a rappresentare il contenuto di un elemento article.
I tags article possono essere innestati e tipicamente contengono un heading per il titolo; un esempio di caso reale riportato nella documentazione: un articolo in un blog ed alcuni commenti ad esso correlati. A scopi didattici ho semplificato l’esempio eliminando alcuni elementi che non sono stati ancora trattati in questa guida ed aggiungendo (poco) stile:
<!doctype html>
<html>
<head>
<title>Il mio Blog</title>
<style>
article { border: 1px solid #ccc; width: 350px; padding: 4px; }
section article { width: 300px; margin: 0 auto; }
</style>
</head>
<body>
<article>
<h1>Titolo articolo</h1>
<p>In questo articolo parleremo di ...</p>
<section>
<h1>Commenti</h1>
<article>
<p>Postato da: Riccardo Brambilla</p>
<p>Pessimo articolo, sei stato esageratamente prolisso.</p>
</article>
</section>
</article>
</body>
</html>Il risultato in Opera:
È interessante notare il nesting dei due article(s) e le due diverse funzioni che ricoprono; se il ruolo assegnato al primo è quello più logicamente prevedibile (contenere il testo dell’articolo), l’utilizzo del secondo è più raffinato (è il contenitore di un commento all’articolo stesso).
La scelta di ricorrere al tag section come wrapper del commento ci permette di rivelarne un impiego solo apparentemente diverso dagli esempi presentati nel paragrafo ad esso dedicato; se infatti in questo caso non si tratta di elencare punti di un sommario è altrettanto chiara la coerenza rispetto alla definizione formale, poichè si intende trasmettere una informazione che richiede indubitabilmente la presenza di un heading.
nav
Definizione formale
L’elemento nav rappresenta la sezione della pagina che contiene i link a pagine esterne o ad altre parti della pagina stessa; è una sezione di link di navigazione.
La specifica puntualizza che nav non è pensato per contenere un generico gruppo di link presente in pagina, lo scopo principale per cui è stato introdotto è quello di raggruppare i link costituenti la navigazione principale (e se presente quelli della secondaria) del sito. Benché possa essere utilmente impiegato per contenere i link tipicamente presenti in un tag footer (elemento che vedremo nelle prossime lezioni) non è in quella situazione considerato necessario.
Il tipico contenuto di nav potrebbe essere una lista non ordinata (ul) di link di navigazione come esplicitato nell’esempio minimale che segue:
<nav>
<ul>
<li><a href="home.html">Home page</a></li>
<li><a href="contatti.html">Contatti</a></li>
<li><a href="dovesiamo.html">Dove siamo</a></li>
</ul>
</nav>È d’altra parte conforme alla specifica un elemento nav che contenga paragrafi a loro volta contenenti links, e che non utilizzi quindi liste.
aside
Definizione formale
L’elemento aside rappresenta una sezione della pagina che racchiude un contenuto solo tangenzialmente correlato a ciò che lo circonda e che può considerarsi come separato da esso. Queste sezioni sono spesso definite come sidebars (colonne laterali).
Il working draft attuale consiglia l’utilizzo di questo elemento per raggruppare contenuti pubblicitari ed elementi di navigazione che puntino all’esterno del documento.
Un box contenente l’archivio dei vecchi post di un blog, tipicamente collocato in una colonna sulla destra della pagina, è un potenziale candidato per l’impiego di aside; altrettanto calzante il caso di un gruppo di link che puntino a blog esterni (blogroll).
Altro possibile utilizzo: evidenziare una citazione all’interno di un articolo:
<p>Di professione Coder e Team Leader Riccardo ama molto la divulgazione scientifica:
<q>Mi piacerebbe scrivere testi utili ed interessanti. La sfida in questi casi è ottenere che il lettore
si appassioni all'argomento senza annoiarsi.</q></p>
<aside>Il mio sogno è di scrivere testi che appassionino il lettore.</aside>
<p>Nel frattempo si dedica allo sviluppo ...</p>