Modulo 3: Contenido con article y aside
Seguimos con nuestro curso de HTML5, y hoy vamos a charlar sobre dos etiquetas súper útiles para organizar contenido de manera clara y con sentido: <article> y <aside>. Estas son como las herramientas que te ayudan a separar las historias principales de las notas al margen en tu página web. Te lo explico como siempre, compartiendo un momento tranquilo, con ejemplos prácticos para que lo domines sin complicaciones. ¡Vamos a darle orden a tu contenido como profesionales!
¿Qué son article y aside?
Ambas son etiquetas semánticas de HTML5, lo que significa que no solo agrupan contenido, sino que le dan un significado específico. Son elementos de bloque, así que ocupan todo el ancho disponible y empiezan en una nueva línea. Aquí va lo que hacen:
<article>: Representa un bloque de contenido independiente y completo, como un artículo, un post de blog o una noticia. Es algo que podrías sacar de la página y seguiría teniendo sentido por sí solo.<aside>: Es para contenido secundario o complementario, como una barra lateral, notas o anuncios. No es el foco principal, sino un extra que apoya lo demás.
Piensa en <article> como el capítulo de un libro y en <aside> como las notas al pie o un recuadro interesante en la página.
Contenido article
La etiqueta <article> se usa para piezas de contenido que tienen su propia identidad, como publicaciones, reseñas o historias. Es ideal para blogs, noticias o cualquier cosa que sea una «unidad» por sí misma.
¿Cómo se usa?
- Apertura:
<article> - Contenido: Normalmente incluye un título (
<h1>–<h6>) y texto, imágenes, etc., relacionados. - Cierre:
</article>
Ejemplo básico:
<article>
<h2>Mi Día Aprendiendo HTML</h2>
<p>Hoy descubrí cómo usar etiquetas semánticas. ¡Es genial!</p>
</article>
Resultado: Un bloque con un título y un párrafo que podría estar solo en otro sitio.
Atributos comunes
idoclass: Para identificar o estilizar.
<article id="post-1" class="entrada-blog">
<h2>Un Nuevo Proyecto</h2>
<p>Empecé a codificar algo increíble.</p>
</article>
¿Cuándo usarlo?
- Para posts de blog, artículos de noticias o reseñas.
- Cuando el contenido es independiente y podría compartirse solo (como en un feed RSS).
- Puede ir dentro de una
<section>o ser parte del<body>directamente.
Contenido aside
La etiqueta <aside> agrupa contenido que no es el foco principal, sino un extra que complementa lo que está alrededor. Es como una barra lateral o un «Dato curioso» en una revista.
¿Cómo se usa?
- Apertura:
<aside> - Contenido: Texto, enlaces, imágenes, etc., que apoyan el contenido principal.
- Cierre:
</aside>
Ejemplo básico:
<aside>
<h3>Dato Curioso</h3>
<p>HTML5 se lanzó oficialmente en 2014.</p>
</aside>
<aside id="sidebar" class="info-extra">
<p>Visita mi <a href="https://github.com">GitHub</a>.</p>
</aside>
¿Cuándo usarlo?
- Para barras laterales, anuncios, citas o notas relacionadas.
- Cuando el contenido está conectado al principal, pero no es esencial.
- Puede ir dentro o fuera de un
<article>o<section>.
Diferencias Clave
| Etiqueta | Propósito | Semántica | Ejemplo de uso | |-------------|------------------------------------|-------------------|----------------------------| | `<article>` | Contenido independiente y completo | Sí tiene | Post de blog, noticia | | `<aside>` | Contenido secundario o complementario | Sí tiene | Barra lateral, nota extra |
Ejemplo práctico de diferencia:
<!-- Un artículo completo -->
<article>
<h2>Mi Viaje a la Playa</h2>
<p>Fui a la playa y fue increíble.</p>
</article>
<!-- Un aside relacionado -->
<aside>
<h3>Consejo</h3>
<p>Lleva protector solar.</p>
</aside>
Combinándolas: Ejemplo Completo
Vamos a armar una página que mezcle <article> y <aside> con otras etiquetas que ya conocemos, como si fuera un blog sencillo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Blog</title>
</head>
<body>
<!-- Cabecera -->
<header>
<h1>Blog de Juan</h1>
</header>
<!-- Navegación -->
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#posts">Posts</a></li>
</ul>
</nav>
<!-- Contenedor principal -->
<div id="contenido">
<!-- Artículo principal -->
<article id="post-1">
<h2>Aprendiendo HTML5</h2>
<p>Hoy trabajé con etiquetas semánticas como <code><article></code>.</p>
<p>Fue más fácil de lo que pensaba.</p>
</article>
<!-- Aside con info extra -->
<aside id="sidebar">
<h3>Sobre el Autor</h3>
<p>Soy Juan, un fan de la programación.</p>
<p>Edad: 25<br>Hobby: Código</p>
</aside>
</div>
<!-- Pie -->
<footer>
<p>© 2025 - Juan</p>
</footer>
</body>
</html>
vamos a aplicarle estilo para que los veas con mas detalles.
¿Qué ves?
- Un
<header>con el título del blog. - Un
<nav>con enlaces de navegación. - Un
<article>con un post completo. - Un
<aside>con info secundaria del autor. - Todo envuelto en un
<div>y cerrado con un<footer>.
Anidamiento: Usándolas Juntas
Puedes meter <article> y <aside> dentro de otras etiquetas o combinarlas entre sí:
article con aside dentro:
<article>
<h2>Reseña de un Libro</h2>
<p>Leí un libro increíble sobre HTML.</p>
<aside>
<h3>Nota</h3>
<p>Autor: John Doe</p>
</aside>
</article>
- El
<aside>da un dato extra dentro del artículo.
Múltiples article con un aside al lado:
<div class="blog">
<section>
<article>
<h2>Post 1</h2>
<p>Primer contenido.</p>
</article>
<article>
<h2>Post 2</h2>
<p>Segundo contenido.</p>
</article>
</section>
<aside>
<h3>Enlaces Rápidos</h3>
<ul>
<li><a href="#post-1">Post 1</a></li>
<li><a href="#post-2">Post 2</a></li>
</ul>
</aside>
</div>
Dos <article> dentro de una <section>, con un <aside> como barra lateral.
Consejos
<article>: Úsalo para contenido que podrías copiar y pegar en otro sitio sin que pierda sentido.<aside>: Piensa en él como un «bonus» que no es crítico para la historia principal.- Combina con títulos: Ambas quedan mejor con un
<h2>o<h3>para darles contexto. - Prueba estructuras: Haz una página con varios
<article>y un<aside>para practicar.
Los que a aprendido hoy:
<article>: Para bloques completos e independientes, como posts o noticias.<aside>: Para contenido secundario que complementa, como barras laterales o notas.
Con <article> y <aside>, tu página se organiza como un libro bien escrito: historias claras y extras útiles al margen. el siguente capitulos hablaremos de Uso de elementos semánticos: <main>, <nav>, <header>, <footer>.