Ejercicio práctico 17: Estructura HTML de un blog
Aprende a utilizar las etiquetas article, header, footer y section en HTML para estructurar y estilizar un blog. Cómo estructurar un blog de manera correcta y simple.
Actividad
Crea una estructura básica de blog usando las etiquetas <article>, <header>, <footer>, y <section>.
Solución interactiva
Solución con el código HTML completo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Blog</title>
</head>
<body>
<article>
<header>
<h1>Título del Blog</h1>
<p>Publicado el 30 de mayo de 2024</p>
</header>
<section>
<p>Este es el contenido del artículo del blog.</p>
</section>
<footer>
<p>Autor: Gabriel Maza</p>
</footer>
</article>
</body>
</html>
Variantes del mismo ejercicio
Variante 1: Blog completo con <nav>, <main>, <aside> y múltiples artículos
Un blog real tiene navegación, contenido principal, barra lateral y múltiples artículos. Esta variante muestra la estructura completa usando solo etiquetas semánticas.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Blog Semántico</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
}
header[role="banner"] {
background: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}
nav {
background: #34495e;
padding: 12px;
text-align: center;
}
nav a {
color: white;
margin: 0 15px;
text-decoration: none;
}
main {
display: flex;
max-width: 1100px;
margin: 20px auto;
gap: 30px;
padding: 0 20px;
}
.articulos {
flex: 3;
}
article {
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
margin-bottom: 20px;
}
aside {
flex: 1;
background: #f8f8f8;
padding: 20px;
border-radius: 8px;
align-self: flex-start;
}
footer[role="contentinfo"] {
background: #2c3e50;
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}
</style>
</head>
<body>
<header>
<h1>📝 Blog de Tecnología</h1>
<p>Noticias, tutoriales y opiniones sobre desarrollo web</p>
</header>
<nav>
<a href="/">Inicio</a>
<a href="/tutoriales">Tutoriales</a>
<a href="/noticias">Noticias</a>
<a href="/contacto">Contacto</a>
</nav>
<main>
<div class="articulos">
<article>
<header>
<h2>Introducción a HTML5 Semántico</h2>
<p>
Publicado el <time datetime="2026-06-10">10 de junio de 2026</time>
por <address style="display: inline;">Gabriel Maza</address>
</p>
</header>
<section>
<p>
Las etiquetas semánticas de HTML5 permiten estructurar el contenido de forma
que tanto los navegadores como los motores de búsqueda entiendan mejor la
organización del sitio.
</p>
</section>
<footer>
<p>Categorías: <a href="#">HTML</a>, <a href="#">Principiantes</a></p>
</footer>
</article>
<article>
<header>
<h2>Por qué dejé de usar solo divs</h2>
<p>
Publicado el <time datetime="2026-06-08">8 de junio de 2026</time>
por <address style="display: inline;">María López</address>
</p>
</header>
<section>
<p>
Durante años estructuré mis sitios solo con divs. Desde que adopté etiquetas
semánticas, mi código es más limpio, los lectores de pantalla navegan mejor
y Google posiciona mis páginas más alto.
</p>
</section>
<footer>
<p>Categorías: <a href="#">Buenas Prácticas</a>, <a href="#">SEO</a></p>
</footer>
</article>
</div>
<aside>
<h3>📌 Artículos Relacionados</h3>
<ul>
<li><a href="#">Guía completa de Flexbox</a></li>
<li><a href="#">CSS Grid vs Flexbox</a></li>
<li><a href="#">Accesibilidad Web (A11Y)</a></li>
</ul>
<h3>🏷️ Etiquetas Populares</h3>
<p>
<a href="#" style="margin:0 5px;">HTML</a>
<a href="#" style="margin:0 5px;">CSS</a>
<a href="#" style="margin:0 5px;">JavaScript</a>
<a href="#" style="margin:0 5px;">SEO</a>
</p>
</aside>
</main>
<footer>
<p>© 2026 Blog de Tecnología. Todos los derechos reservados.</p>
<p><a href="/privacidad" style="color: #aaa;">Política de Privacidad</a></p>
</footer>
</body>
</html>
Este ejemplo introduce <time datetime=""> (formato de fecha legible por máquinas) y <address> (información de contacto del autor), dos etiquetas semánticas menos conocidas pero muy útiles.
Variante 2: Página de portfolio personal con <figure> y <figcaption>
Las etiquetas semánticas no son solo para blogs. Un portfolio de diseño o fotografía también se beneficia de una estructura clara.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 40px;
}
.galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
figure {
margin: 0;
border: 1px solid #e0e0e0;
border-radius: 10px;
overflow: hidden;
background: #fafafa;
}
figure img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
figcaption {
padding: 12px 16px;
font-size: 14px;
}
figcaption h3 {
margin: 0 0 4px;
font-size: 16px;
}
figcaption p {
margin: 0;
color: #666;
}
footer {
text-align: center;
margin-top: 60px;
padding: 20px;
border-top: 1px solid #ddd;
color: #888;
}
</style>
</head>
<body>
<header>
<h1>🎨 Portfolio de Diseño</h1>
<p>Proyectos de diseño web y gráfico — 2025-2026</p>
</header>
<main>
<section>
<h2>Proyectos Destacados</h2>
<div class="galeria">
<figure>
<img src="https://via.placeholder.com/400x300?text=Rediseño+Web" alt="Rediseño web corporativo" />
<figcaption>
<h3>Rediseño Web Corporativa</h3>
<p>Cliente: EmpresaTech S.A. | 2026</p>
</figcaption>
</figure>
<figure>
<img src="https://via.placeholder.com/400x300?text=E-commerce" alt="E-commerce deportivo" />
<figcaption>
<h3>E-commerce Deportivo</h3>
<p>Cliente: SportTotal | 2025</p>
</figcaption>
</figure>
<figure>
<img src="https://via.placeholder.com/400x300?text=App+Móvil" alt="App móvil de delivery" />
<figcaption>
<h3>App Móvil de Delivery</h3>
<p>Cliente: FastFood Express | 2025</p>
</figcaption>
</figure>
</div>
</section>
</main>
<footer>
<p>📧 contacto@miportfolio.com | 📱 +54 11 1234-5678</p>
</footer>
</body>
</html>
Variante 3: Comparativa <div> vs etiquetas semánticas
La misma página construida de dos formas distintas. Así se entiende por qué las etiquetas semánticas son mejores que usar solo <div>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Sitio con Divs</title>
</head>
<body>
<div class="header">
<h1>Mi Sitio</h1>
</div>
<div class="nav">
<a href="#">Inicio</a>
<a href="#">Acerca</a>
</div>
<div class="content">
<div class="article">
<h2>Artículo</h2>
<p>Contenido del artículo.</p>
</div>
</div>
<div class="footer">
<p>© 2026</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Sitio Semántico</title>
</head>
<body>
<header>
<h1>Mi Sitio</h1>
</header>
<nav>
<a href="#">Inicio</a>
<a href="#">Acerca</a>
</nav>
<main>
<article>
<h2>Artículo</h2>
<p>Contenido del artículo.</p>
</article>
</main>
<footer>
<p>© 2026</p>
</footer>
</body>
</html>
La versión semántica es más corta, más legible y comunica el propósito de cada sección sin necesidad de clases como .header o .footer. Además, tecnologías asistivas como lectores de pantalla pueden navegar directamente entre <nav>, <main> y <article>.
Variante 4: Página de documentación con estructura semántica avanzada
Un sitio de documentación técnica (como este mismo) usa etiquetas semánticas para organizar grandes volúmenes de contenido.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Documentación de API</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
margin: 0;
}
nav {
width: 250px;
background: #2c3e50;
color: white;
padding: 20px;
min-height: 100vh;
}
nav a {
color: #bbb;
display: block;
padding: 6px 0;
text-decoration: none;
}
nav h3 {
color: white;
margin-top: 20px;
}
main {
flex: 1;
padding: 30px;
max-width: 800px;
}
section {
margin-bottom: 40px;
}
code {
background: #f4f4f4;
padding: 2px 6px;
border-radius: 3px;
font-size: 0.9em;
}
</style>
</head>
<body>
<nav>
<h3>📚 Documentación</h3>
<a href="#introduccion">Introducción</a>
<a href="#autenticacion">Autenticación</a>
<a href="#endpoints">Endpoints</a>
<a href="#errores">Códigos de Error</a>
<a href="#ejemplos">Ejemplos</a>
</nav>
<main>
<section id="introduccion">
<h2>Introducción</h2>
<p>
Nuestra API REST permite acceder a los datos de forma programática.
Todas las respuestas son en formato <code>JSON</code>.
</p>
</section>
<section id="autenticacion">
<h2>Autenticación</h2>
<p>
Usá el header <code>Authorization: Bearer <token></code> en
cada request. Obtené tu token desde el panel de desarrollador.
</p>
</section>
<section id="endpoints">
<h2>Endpoints Disponibles</h2>
<dl>
<dt><code>GET /api/usuarios</code></dt>
<dd>Lista todos los usuarios registrados.</dd>
<dt><code>GET /api/usuarios/:id</code></dt>
<dd>Obtiene un usuario específico por ID.</dd>
<dt><code>POST /api/usuarios</code></dt>
<dd>Crea un nuevo usuario.</dd>
</dl>
</section>
<section id="errores">
<h2>Códigos de Error</h2>
<ul>
<li><code>200</code> — OK</li>
<li><code>401</code> — No autorizado</li>
<li><code>404</code> — No encontrado</li>
<li><code>500</code> — Error interno del servidor</li>
</ul>
</section>
<section id="ejemplos">
<h2>Ejemplos de Uso</h2>
<pre><code>// Obtener usuario con ID 42
fetch('https://api.ejemplo.com/usuarios/42', {
headers: {
'Authorization': 'Bearer mi-token-secreto'
}
})
.then(res => res.json())
.then(data => console.log(data));</code></pre>
</section>
</main>
</body>
</html>
Buenas y Malas Prácticas
| ✅ Buena práctica | ❌ Mala práctica |
|---|---|
Usar <header>, <nav>, <main>, <footer> en toda página | Estructurar todo con <div class="..."> sin semántica |
Poner <h1> a <h6> en orden jerárquico dentro de <section> | Saltear niveles de headings (ej: <h1> y luego <h4>) |
Usar <time datetime="2026-06-10"> para fechas de publicación | Escribir fechas sin formato legible por máquinas |
Usar <article> para contenido independiente y auto-contenido | Usar <article> como wrapper genérico de layout |
Incluir <nav> para bloques de navegación principales | Poner enlaces de footer o breadcrumbs dentro de <nav> (no es navegación principal) |
Agregar <aside> para contenido complementario o tangencial | Poner el contenido principal dentro de <aside> |
Preguntas Frecuentes (FAQ)
¿Las etiquetas semánticas realmente mejoran el SEO?
Sí, y de forma significativa. Google usa las etiquetas semánticas para entender la estructura y jerarquía del contenido. Un <article> bien delimitado le dice a Google "este bloque es una pieza de contenido independiente". Un <nav> le indica qué enlaces son navegación principal. Esto ayuda a generar rich snippets y mejora el posicionamiento.
¿Puedo seguir usando <div> si ya uso etiquetas semánticas?
Sí, son complementarias. Las etiquetas semánticas definen la estructura global (<header>, <main>, <footer>) y los <div> sirven para agrupar elementos dentro de esas secciones cuando no hay una etiqueta semántica específica (ej: un wrapper para centrar contenido con CSS, o un contenedor de cards).
¿Qué diferencia hay entre <section> y <article>?
<article> representa contenido independiente y auto-contenido que tendría sentido por sí solo fuera de la página (un post de blog, un comentario, un widget). <section> agrupa contenido temáticamente relacionado que depende del contexto de la página. Una página puede tener múltiples <section>, pero cada <article> debería poder leerse de forma independiente.
¿Cuántos <nav> puedo tener en una página?
No hay un límite técnico, pero la recomendación es usar <nav> solo para los bloques de navegación principal. Para otros grupos de enlaces (footer, breadcrumbs, paginación, redes sociales), no es necesario <nav>. Un <nav> por página suele ser suficiente; dos como máximo (navegación principal + navegación secundaria).
🔧 Descubrí más sobre este tema en esta parte del sitio 👉 Estructura básica de un documento HTML y también en la sección de Etiquetas semánticas en HTML5.