La Etiqueta ASIDE

Representa contenido relacionado indirectamente con el flujo principal del documento.

La etiqueta <aside> representa contenido relacionado indirectamente con el flujo principal del documento. Es ideal para secciones complementarias como barras laterales, notas o contenido relacionado contextualmente.

Sintaxis básica

<aside>
  <!-- Contenido relacionado indirectamente -->
</aside>

  • Es un elemento de bloque.

  • Puede ubicarse dentro o fuera de <article>/<section>, dependiendo del contexto.

Casos de uso comunes

Barra lateral con contenido relacionado

<main>
  <article>
    <!-- Contenido principal -->
  </article>

  <aside class="sidebar">
    <h3>Artículos relacionados</h3>
    <ul>
      <li><a href="#">Cómo aprender HTML</a></li>
      <li><a href="#">Guía de CSS</a></li>
    </ul>
  </aside>
</main>

Notas o explicaciones dentro de un artículo

<article>
  <h2>Historia del Internet</h2>
  <p>ARPANET fue la precursora...</p>

  <aside>
    <h4>¿Sabías qué?</h4>
    <p>El primer mensaje enviado fue "LO" por un fallo en la conexión.</p>
  </aside>
</article>

Publicidad o widgets

<aside class="publicidad">
  <h3>Patrocinado</h3>
  <img src="ads/curso-web.jpg" alt="Curso de desarrollo web">
</aside>

Reglas clave

Usos correctos

  • Contenido relacionado tangencialmente al tema principal.

  • Elementos que no son esenciales para entender el contenido principal.

  • Ubicación flexible: dentro/fuera de <article>, <section>, o <body>.

Usos incorrectos

  • Contenido principal o esencial para la comprensión.

  • Espacio para navegación primaria (mejor usar <nav>).

  • Contenedor genérico sin relación con el contenido circundante.

Accesibilidad

  • Los lectores de pantalla reconocen <aside> como contenido secundario.

Buenas prácticas:

  • Usar encabezados (<h2>, <h3>) para identificar secciones.

  • Añadir aria-label si el contexto no es claro:

<aside aria-label="Recursos adicionales">
  <!-- Contenido -->
</aside>

Estilización con CSS

Personaliza la apariencia para diferenciar el contenido secundario:

aside {
  background: #f8f9fa;
  border-left: 4px solid #3498db;
  padding: 1rem;
  margin: 1rem 0;
}

.sidebar {
  width: 300px;
  float: right;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

aside h3 {
  color: #2c3e50;
  margin-top: 0;
} 

SEO y semántica

Los motores de búsqueda interpretan <aside> como contenido secundario.

Recomendaciones:

  • No ocultar contenido importante dentro de <aside>.

  • Mantener el contenido relevante y relacionado.

  • Evitar spam o keywords forzadas.

Errores comunes

Confundir con <div> genérico

<!-- Incorrecto -->
<aside>
  <nav> <!-- Menú principal debe ir en <nav> -->
    <a href="/">Inicio</a>
    <a href="/contacto">Contacto</a>
  </nav>
</aside>

Contenido no relacionado

<!-- Incorrecto -->
<article>
  <h2>Recetas saludables</h2>
  <aside>
    <h3>Noticias políticas</h3> <!-- Sin relación -->
  </aside>
</article>

Anidación innecesaria

<!-- Redundante -->
<aside>
  <aside> <!-- Doble aside sin propósito -->
    <p>Contenido...</p>
  </aside>
</aside>

Ejemplos prácticos

Ejemplo 1: Glosario en artículo técnico

<article>
  <h2>Introducción a JavaScript</h2>
  <p>Los closures son funciones que...</p>

  <aside class="glosario">
    <h4>Término clave</h4>
    <dl>
      <dt>Closure</dt>
      <dd>Función que recuerda su entorno léxico</dd>
    </dl>
  </aside>
</article>

Ejemplo 2: Perfil de autor en blog

<aside class="autor">
  <img src="autor.jpg" alt="Foto de María Gómez">
  <h3>María Gómez</h3>
  <p>Desarrolladora web con 10 años de experiencia...</p>
  <a href="#">Ver más publicaciones</a>
</aside>

Comparación: <aside> vs <section> vs <div>

Elemento Propósito Semántica
<aside> Contenido relacionado indirecto Alta (específico)
<section> Agrupación temática general Media
<div> Contenedor sin significado Nula

Buenas prácticas

Jerarquía visual:

Usa márgenes/padding para separar claramente del contenido principal.

Responsividad:

@media (max-width: 768px) {
  .sidebar {
    float: none;
    width: 100%;
  }
} 

Contenido dinámico:

Ideal para widgets de redes sociales o feeds externos.

Conclusión:

La etiqueta <aside> es esencial para:

  • Organizar contenido complementario de manera semántica.

  • Mejorar la accesibilidad y estructura del documento.

  • Separar visualmente información secundaria sin afectar el flujo principal.

¡Úsala para crear layouts limpios y significativos!