ADNDC / RADIO

7 dic 2015

HTML 5 Etiqueta Aside - Fuera o dentro de Article

Esta etiqueta se presenta como uno de los tantos nuevos elementos en HTML 5.
Debido a su complejidad y a los diferentes campos donde puede ser aplicada no queda del todo claro para muchos desarrolladores web su funcionamiento.
Debemos entender ante todo que la etiqueta </aside> nace como una etiqueta complementaria a la información que estamos incluyendo en nuestro proyecto. No hay que confundirla con la etiqueta Div pues ésta aun es mucho más genérica, o sea, no tiene tanto valor semántico como lo tiene Aside.

¿Concretamente, dónde podemos y debemos aplicar Aside?
Primeramente, debemos comprender su lógica.  La importancia de </aside> dependerá de su posición y los elementos que estén interviniendo en su funcionamiento.  Por ejemplo, podemos incluirla dentro y fuera del elemento </article>.

Cuando se encuentre dentro de </article> entonces </aside> debe presentar un contenido meramente relacionado con el </article> que lo está conteniendo, de tal manera que si el elemento </article> fuera eliminado o movido de lugar, </aside> quedaría sin sentido. Un buen ejemplo sería que en </article> hablemos de un tema específico, por ejemplo, la vida de Albert Einstein y en alguna parte del artículo mencionar una de sus frases célebres, o algún contenido extra que complete información del artículo, entonces </aside> actuaría como complemento de </article>

Aquí el ejemplo:
<article>
                 <header>
                               <hgroup>
<h1>ALBERT EINSTEIN</h1>
<h3>entre la ciencia y el amor</h3>
</hgroup>
               </header>
                 <section>
                              <p>Aquí el contenido que habla de Albert Einstein</p>
               </section>
                 <aside>
                                <p>Datos extra para completar el contenido de Albert Einstein</p>
               </aside>
</article>

Sin embargo, el uso más común de esta etiqueta es tal y como lo hemos visto en nuestro vídeo tutorial de Youtube, (clic aquí para ver el vídeo) donde </aside> juega un papel más genérico desarrollando así enlaces a diferentes contenidos que pueden o no ser relacionados con nuestro contenido general, o sea, </aside> pasaría a ser una etiqueta hija directa de </body> y por lo tanto contiene información que no tienen que ver precisamente con la idea original.  Normalmente, cuando la utilizan de esa manera suele contener tags, banners, publicidad, redes sociales, opiniones de usuarios etc.   Por lo general la colocan en los laterales de la página, pero no es una regla.