La etiqueta aside de HTML5 es probablemente el elemento al que se le da peor uso. El hecho de que la W3C mencione hasta en dos ocasiones la palabra sidebar en su definición hace que la mayoría de diseñadores y desarrolladores la usen incorrectamente, llevándolos a usarla para marcar un simple sidebar, cosa que desde el punto de vista semántico es del todo innecesario, la etiqueta aside no se creó con este fin.

En el artículo de hoy voy a intentar explicar el uso correcto de aside (siempre desde mi punto de vista, porque es una etiqueta muy dada a múltiples interpretaciones), con claro ejemplos sobre su uso y dejando claro como no debe de usarse, para eliminar esa tendencia de usar aside para marcar el sidebar.

Lo primero de todo, y como es costumbre, vamos con la definición de aside que la W3C nos da para esta etiqueta: La etiqueta aside representa una sección de una página con contenido que está tangencialmente relacionado con el contenido que la rodea, y que a su vez puede considerarse aparte de ese contenido.

Con esta definición hay dos cosas que nos quedan claras. El contenido de esta etiqueta está relacionado con el contenido que la rodea, con lo cual si la etiqueta aside está contenida dentro de una etiqueta article, su contenido estará directamente relacionado con el artículo englobado dentro de article. Por contra si el aside aparece directamente dentro de la etiqueta body en este caso su contenido estará relacionado con la temática de la página, a modo general. Lo segundo que sacamos en claro es que su contenido es independiente del flujo principal, con lo que la omisión de este contenido no deja incompleto un artículo o una web a modo general.

¿Y cuál es el problema a su aplicación?. La W3C extiende más esta definición y ahí es donde radica el problema. Dice textualmente "Such sections are often represented as sidebars in printed typography", y también, "The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements".

El problema de las etiquetas semánticas de HTML5 es que son eso, semánticas, y en semántica lo único realmente importante es su definición. Para mi ver la W3C se equivoca al poner de ejemplo un sidebar, aunque también hay que decir que no se refiere a cualquier sidebar, sino a uno muy particular, un sidebar en tipografía impresa. Así que su ejemplo va a comparar un blog, página web o similar, con por ejemplo una revista impresa, donde un sidebar se suele usar para aportar información adicional a un artículo, por supuesto poco o nada que ver con el típico sidebar de un blog o página web.

De esto último es de donde vienen la mayoría de malos usos de esta etiqueta, y es que no son pocas las webs donde definen esta etiqueta casi en exclusiva para cambiar el típico div id="sidebar" por un simple aside (hay que decir que la mayoría de estas webs son hispanohablantes, el típico problema de idioma). No es para nada correcto, y mucho más generalizando de esa manera, aunque según su definición bien pudiese encajar el contenido de un sidebar en un aside, siempre y cuando esté construido según las premisas semánticas de la definición general. La idea de la etiqueta aside no es la de enmarcar un sidebar.

¿Dónde se aplica entonces la etiqueta aside?. Su uso es más común de lo que por definición parece. Podríamos usarla para una bibliografía al final de un artículo, para una cita o blockquote, para enmarcar los comentarios (¿qué contenido está más relacionado y a su vez no forma parte de este que un comentario?) y porqué no, para un blogroll, siempre y cuando las webs que enlacemos sean de la misma temática que la nuestra, recuerda, siempre contenido relacionado. ¿Y la publicidad?. También es factible, pero siguiendo los dictados de la W3C.

Vamos con un par de ejemplos para que se vea más claro su uso. El primero es un fragmento de un artículo con un aside que aporta información adicional, el segundo será para enmarcar los comentarios de cualquier blog:

<p>Mi familia y yo visitamos el MUJA este verano</p>

<aside>
   <h4>MUJA</h4>
   <p>El MUJA es un museo del Jurásico situado en Colunga (Asturias)</p>
</aside>

<aside>
    <article>
      <head>
         Diplodocus
         21/11/2015
      </head>
      <p>Me ha encantado el MUJA, pero podría tener más material original y no tanta maqueta. El edificio con forma de huella de dinosario muy chulo.</p>
   </article>
    <article>
      <head>
         TRex
         21/11/2015
      </head>
      <p>He tenido suerte y me he encontrado con una exposición de maquetas de dinosaurios en los alrededores del museo, y además gratis.</p>
   </article>
</aside>

Y para terminar decir que en la red hay mucha información y no todo ella es ni mucho menos correcta. Que haya una gran número de páginas que sitúan el uso de aside como elemento para enmarcar un sidebar no convierte esta información en cierta, de hecho no lo es. Hay que tener un gran sentido crítico y leer abundantes documentos e información varia para dar con algo que al menos se acerque lo más posible a la definición de la W3C.

Así que te animo a leer un par de artículos que opinan de manera similar a este, uno en español (para que no se diga que nos equivocamos con el inglés) del blog de Jose J. Fernández y su artículo Curso de HTML: maquetación semántica de una página en HTML 5 y otro en inglés de una de las webs de referencia para HTML5, html5 Doctor y su artículo Understanding aside, que si bien ambos son de la misma opinión sobre su uso general, no tengo tan claro que lo usasen para un blogroll o los comentarios, aquí las opiniones son muy variadas, y tú has formarte la tuya propia.