Hoy vamos a hablar de la etiqueta <aside> en HTML.
Si sabes un poco de inglés, ya sabrás que la palabra «aside» se traduce generalmente como «a un lado» o «aparte». Así que el propio nombre ya nos está indicando una pista de su uso.
Recuerda que esta lección forma parte del Diccionario HTML de Dropcoding donde aprenderás este lenguaje desde cero.
¿Qué es la etiqueta ASIDE en HTML?
La etiqueta <aside> en HTML es una etiqueta que se usa para representar una sección de una página que contiene información que está relacionada con el contenido principal, pero que se puede separar de este contenido sin afectar a su comprensión.
Esto puede ser, por ejemplo, una caja de texto, una nota al margen, un anuncio de publicidad, la biografía del autor, enlaces relacionados, o cualquier otra cosa que complemente o sea una información adicional al contenido.
Ejemplo de cómo se utiliza la etiqueta <aside>
Para clarificar un poco las cosas, vamos a ver un ejemplo. Vamos a utilizar una estructura muy básica de HTML. Aquí tenemos el contenido principal dentro de la etiqueta <article>, es donde tenemos el artículo.
Y luego tenemos el elemento <aside> que en este caso será una sección que aparecerá al lado del contenido principal y nos va a ofrecer ciertos enlaces a artículos que también nos pueden interesar.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de uso de la etiqueta Aside</title>
<style>
/* Aquí iría el CSS para darle estilo a tu página */
</style>
</head>
<body>
<article>
<h1>Título del Artículo</h1>
<p>Este es el contenido principal del artículo...</p>
</article>
<aside>
<h2>Artículos Relacionados</h2>
<ul>
<li><a href="#">Artículo 1</a></li>
<li><a href="#">Artículo 2</a></li>
<li><a href="#">Artículo 3</a></li>
</ul>
</aside>
</body>
</html>
Es decir, la típica sección de artículos relacionados. Entonces aquí simplemente lo que hemos hecho es, en vez de colocar el típico <div> normal y corriente, hemos colocado un <aside>. Y ahora, con un poquito de CSS, vamos a ver cómo queda en el navegador.
Diferencias entre ASIDE y DIV
Es posible que ahora mismo estés pensando: «¿Qué diferencia hay entre un <aside> y un <div> normal de toda la vida? ¿Cambia mucho la cosa si pongo un <aside> en vez de un <div>?» Pues la verdad es que no cambia mucho la cosa ya que la principal diferencia del uso de estas etiquetas es a nivel semántico.
Recordar que las dos etiquetas sirven para agrupar contenido. Solo que el elemento <aside> proporciona información adicional, por ejemplo, a motores de búsqueda.
Consejos y algunas conclusiones finales
Personalmente me gusta utilizar este tipo de etiquetas. Pero reconozco que no es estrictamente necesario, pero sí recomendable.
Así que ya sabes, espero que te haya gustado el vídeo y si tienes alguna pregunta o tienes alguna sugerencia puedes dejarla en los comentarios. ¡Nos vemos en la próxima lección! Adiós.