Comprendere l' elemento aside

La presente è la traduzione dell' articolo - Understanding aside - pubblicato originariamente su http://html5doctor.com/understanding-aside/. La traduzione viene riportata con il consenso dei curatori del sito.

HTML 5 introduce un nuovo elemento per delimitare informazioni aggiuntive  che possono migliorare un articolo, ma non c'è nulla di particolarmente difficoltoso nell' apprendimento di questo tag. Nonostante la semplicità dell'elemento in oggetto, c'è un pò di confusione circa il suo utilizzo. Sarà cura dell' articolo in oggetto fare chiarezza. Si vedrà per quale motivo è stato creato il tag <aside>, includendo anche qualche esempio in merito.

 Per prima cosa si veda  cosa indicano le specifiche HTML 5 per l' elemento <aside>:

L' elemento aside rappresenta la parte della pagina,  contenente del testo ed  affiancata ai contenuti principali del sito,  separato dai contenuti stessi. Tale sezione è da considerarsi come una barra laterale nella pagina web.

 Cosa si intende per "sidebar", lo si vedrà in seguito nell' articolo; al momento potrebbe non avere alcun significato. Il contenuto all' interno dell' elemento <aside> dovrebbe essere composto da informazioni relative al contesto dell' articolo che si sta leggendo. Se il testo racchiuso nel tag <aside> risponde a tale requisito, allora tale elemento risponde in maniera ottimale non solo dal punto di vista semantico, ma  per quanto concerne  anche la formattazione con i CSS.

Che relazione ci dovrebbe essere tra le due cose? Ottimale. <aside> potrebbe contenere una citazione, un glossario oppure una serie di link correlati.

 Esempi di utilizzo

 Come suggerito nelle specifiche, una citazione è un buon esempio di contenuto separato dall' articolo principale ma comunque in relazione con esso mettendo in evidenza le parti di interesse.

 <article>
    <header>
        <h1>Lorem Ipsum Dolor Sit Amets</h1>
    </header>
    <p>Aliquam erat volutpat. Vestibulum eleifend pellentesque urna, at
    sodales est faucibus sit amet. Praesent in mi dui. <q>Aliquam sed
    bibendum nisl. Mauris pharetra enim sit amet ipsum dictum placerat. Sed
    lacinia pulvinar iaculis. Nam sit amet hendrerit purus.</q> Sed a urna
    laoreet lorem pulvinar fermentum. Aenean vel luctus libero. Ut tincidunt
    metus sagittis ante viverra feugiat.</p>
    <aside>
        <q>Mauris pharetra enim sit amet ipsum dictum placerat.</q>
    </aside>
    <p>Nulla quis lacus non quam luctus vestibulum. Pellentesque imperdiet
    risus gravida ante consectetur fermentum. Vivamus et est nec risus volutpat
    elementum. Ut faucibus, lectus consectetur volutpat dapibus, quam diam
    luctus enim, vitae mollis enim purus non ante.</p>
</article>

Per saperne di più sull' elemento <header>, si legga l' articolo inerente tale tag. 

In una pagina formattata, o più comunemente, in un articolo da stampare, si vorrebbe presentare in maniera visiva una citazione accanto all' articolo principale. <aside> è legato al contenuto ma non entra a far parte del corpo vero e proprio dell' articolo stesso.

Un altro esempio potrebbe essere un glossario di termini utilizzati in un articolo:

<article>
    <header>
        <h1>Web Technologies</h1>
    </header>
    <p>Curabitur dignissim lorem a CSS diam posuere tempor. Nam hendrerit,
    eros vel condimentum tempor, ipsum justo cursus justo, quis vestibulum
    turpis turpis sit amet tellus. Quisque quis PHP magna eget ipsum faucibus
    bibendum at non diam. Sed sapien est, cursus ac ullamcorper id, egestas vel
    urna JavaScript. Nullam aliquam dolor vitae quam pharetra auctor.</p>
    <aside>
        <dl>
            <dt>CSS</dt>
            <dd>A set of standards for styling documents presented on the
            World Wide Web.</dd>
            <dt>PHP</dt>
            <dd>A server-side scripting language suited to dynamic HTML document
            generation for the web.</dd>
            <dt>JavaScript</dt>
            <dd>A client-side scripting language used for manipulating HTML documents
            within a browser.</dd>
        </dl>
    </aside>
</article>

 Uso errato di <aside>

 E' facile confondere questo elemento con un impiego per il quale non è stato creato e, come anticipato, la definizione di <aside> potrebbe confondere alcuni webmaster. Il fraintendimento nel quale si cade per tale elemento è quello di utilizzarlo come barra laterale per dei menu. Anche se ci fosse una "relazione" tra il contenuto della barra laterale ed il testo dell' articolo, ciò non è sufficente per poterlo utilizzare in questo modo.

Menu di navigazione, ads banner, box di ricerca, blogrolls ed altri elementi, non sono direttamente correlati all' articolo e, pertanto, non giustificano l' uso di <aside>.

Nella  definizione di <aside> è molto importante  notare che esso si riferisce a barre laterali per quanto concerne un articolo stampato, quale potrebbe essere una rivista. Una "sidebar" in una rivista potrebbe contenere ulteriori note in merito all' articolo. Traducendo tutto questo in HTML 5, potrebbe essere preso in considerazione un elemento <aside>. Se un articolo sul PHP dovesse essere stampato, mostrando un annuncio del tipo "Eccellente, Economico, Web Hoisting", come una barra laterale, non dovrebbe essere incluso nel tag <aside>.  In questi casi dovrebbero essere utilizzati altri elementi con significati più specifici e semantici.

 Conclusioni

Come qualsiasi tag HTML, se usato correttamente, l' elemento <aside> potrebbe essere molto utile in fase di markup semantico dei contenuti. <aside> può essere impiegato per migliorare un articolo inserendo informazioni aggiuntive o per mettere in evidenza stralci interessanti. Gli "aside" sono "stand-alone", non essenziali come parti di un articolo ma, se usati correttamente, possono dare un ulteriore livello di informazioni ai contenuti. Evitare di "forzare" del  testo in un elemento <aside> se non strettamente correlato all' articolo. In questo caso non dovrebbe essere utilizzato. HTML 5 offre molti  nuovi elementi di markup per le pagine web, da impiegare in maniera più saggia.