Ridefinizione dell'elemento HTML 5 aside
Il presente articolo è la traduzione dell' originale - "Aside Revisited - pubblicato originariamente su http://html5doctor.com/aside-revisited/. La traduzione viene riportata con il consenso dei curatori del sito. Eventuali immagini e porzioni di codice sono dei legittimi proprietari
L'articolo è un aggiornamento del precedente. La specifica è cambiata per consentire di poter utilizzare l'elemento come contenuto secondario, cambiando il suo contesto, a seconda che esso è contenuto all'interno dell'elemento article.
Dal momento che le specifiche HTML5 non sono ancora definitive, è normale attendersi dei cambiamenti migliorativi in merito.
L'elemento aside, definito un pò come l'incompreso, è stato ottimizzato in base ai feedback inviati dalla comunità di sviluppo web. In questo articolo, daremo un'occhiata a quello che è cambiato.
Ridefinizione dell'elemento <aside>
Quando è stato discusso precedentemente dell'elemento aside in Understanding Aside, la definizione che è stata fornita è stata quella di usare tale elemento come un oggetto "tangente" i contenuti principali, quali link correlati ad altre pagine - interne o esterne al sito - e glossari. Non sembra essere un elemento appropriato per contenere testi secondari relativi al sito nel suo complesso, in genere noto come "sidebar".
Dai commenti letti in giro per il web, tale definizione non è stata accolta in manera ottimale dagli sviluppatori. Gli scrittori di specifiche hanno ascoltato, elaborato e proposto che l'elemento aside venga impiegato come contenuto secondario quando non è nidificato all'interno di un elemento article.
Esempi di utilizzo dell'elemento <aside> in 2 differenti contesti
Con la nuova definizione dell'elemento aside, è fondamentale essere consapevoli del suo contesto. Quando viene utilizzato all'interno di un elemento article, il contenuto deve essere specifico a tale articolo (ad esempio, un glossario).
Quando, invece, viene utilizzato all'esterno dell'elemento article, il contenuto deve essere relativo al sito intero (ad esempio blogroll, raggruppamento di navigazione aggiuntiva, ed ogni contenuto pubblicitario se il contesto è relativo alla pagina.
I due usi dell'elemento aside sono illustrati con un esempio:
<body>
<header>
<h1>My Blog</h1>
</header>
<article>
<h1>My Blog Post</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<aside>
<!-- Since this aside is contained within an article, a parser
should understand that the content of this aside is directly related
to the article itself. -->
<h1>Glossary</h1>
<dl>
<dt>Lorem</dt>
<dd>ipsum dolor sit amet</dd>
</dl>
</aside>
</article>
<aside>
<!-- This aside is outside of the article. Its content is related
to the page, but not as closely related to the above article -->
<h2>Blogroll</h2>
<ul>
<li><a href="#">My Friend</a></li>
<li><a href="#">My Other Friend</a></li>
<li><a href="#">My Best Friend</a></li>
</ul>
</aside>
</body>
Conclusioni
L'elemento aside potrebbe rappresentare un contenuto secondario quando utilizzato al di fuori dell'elemento article. Da tenere presente che aside - e più in generale un contenuto secondario - non vuol dire necessariamente "sidebar". Lo stile del contenuto non deve dettare l'uso dell'elemento. Il contenuto che non è l'obiettivo primario di un articolo (o pagina) ma è legato all'articolo (o alla pagina), aside è ciò di cui si necessita, indipendentemente dal suo visual design.
| < Prec. | Succ. > |
|---|
