Etiqueta HTML <aside>
La etiqueta <aside> es uno de los elementos de HTML5 utilizados para definir una sección que contiene contenido relacionado tangencialmente con el contenido principal. Por lo general, se utiliza para complementar un artículo con información adicional o resaltar partes que puedan resultar interesantes para el usuario. El contenido dentro de <aside> es una parte independiente y no esencial de la página web, por lo que si se elimina, el contenido principal no se verá afectado.
Las notas al final, comentarios, listas de términos, información de referencia, una colección de enlaces, citas destacadas, etc., son ejemplos de información que puede encontrarse dentro del elemento <aside>.
éxito
No confunda el elemento
<aside>con una barra lateral. La barra lateral es solo un elemento visual, y la etiqueta<aside>no tiene necesariamente un aspecto de barra lateral.
peligro
No utilice el elemento
<aside>para texto entre paréntesis, ya que está destinado a contenido tangencial y no a texto en línea o complementario dentro del flujo principal.
Puede utilizar este elemento para efectos tipográficos en el contenido que está separado del contenido principal de la página. Por ejemplo, puede usarse para bibliografías, citas destacadas, comentarios con información adicional, etc.
Sintaxis
La etiqueta <aside> se escribe en pares. El contenido se coloca entre las etiquetas de apertura (<aside>) y cierre (</aside>).
Ejemplo de la etiqueta HTML <aside>:
Etiqueta HTML <aside>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>I like watching Game of Thrones.</p>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>Resultado
Ejemplo de la etiqueta HTML <aside> junto con la etiqueta HTML <article>:
Ejemplo de la etiqueta HTML <aside> junto con la etiqueta <article>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the aside tag</h1>
<aside>
<h2>Here is some heading</h2>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</aside>
<article>
<h3>Game of Thrones</h3>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</article>
</body>
</html>Diferencia entre las etiquetas <aside> y <div>
El elemento <div> es un contenedor genérico sin significado semántico, mientras que el elemento <aside> aporta significado semántico al indicar que su contenido está relacionado tangencialmente con el contenido principal. Esta distinción afecta a la accesibilidad y al SEO.
Atributos
La etiqueta <aside> admite los Atributos globales y los Atributos de eventos.
Ejemplo con un atributo global:
<aside class="sidebar-note" id="extra-info">
<p>Additional context goes here.</p>
</aside>Cómo dar estilo a una etiqueta HTML <aside>
aside {
background-color: #f9f9f9;
border-left: 4px solid #ccc;
padding: 10px;
}Práctica
¿Cuál es el uso correcto y las características de la etiqueta HTML <aside> según el artículo en W3Docs?