Resumen
La semántica en HTML5 define una estructura clara que mejora la comprensión del contenido por personas, navegadores y lectores de pantalla. Usar etiquetas con significado aporta orden, facilita el trabajo en equipo, mejora la accesibilidad y ayuda al SEO al permitir que Google indexe mejor cada sección.
¿Qué es la semántica en HTML5 y por qué importa?
La semántica asigna significado a las secciones del documento mediante etiquetas específicas. No cambia el diseño por sí misma, pero indica qué es cada parte del proyecto y cómo debe ser interpretada.
- Diferencia clave: head vs header. El head contiene lo que el navegador necesita para cargar el proyecto; el header es el encabezado visible del contenido.
- El body es el cuerpo que se renderiza en pantalla.
- Etiquetas como header, main y footer delimitan secciones principales con propósito claro.
- Beneficio directo: los lectores de contenido pueden anunciar “estás en el header con una barra de navegación” y guiar a usuarios con baja visión.
- Beneficio técnico: Google puede indexar mejor las secciones cuando el documento utiliza etiquetas semánticas correctas.
¿Cómo se estructura una página con etiquetas semánticas?
Una base semántica típica separa el encabezado, el contenido principal y el cierre. Además, incorpora navegación y organización interna del contenido con etiquetas como nav, section, article y aside.
¿Cómo se ve el código base?
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mi sitio web</title>
</head>
<body>
<header>
<h1>Mi sitio web</h1>
<nav>
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section id="articulos">
<article>
<h2>Título del artículo</h2>
<p>Contenido del artículo dentro de la sección principal.</p>
</article>
<!-- Puedes repetir más <article> según el contenido -->
</section>
<aside>
<p>Barra lateral con opciones o enlaces relacionados.</p>
</aside>
</main>
<footer>
<p>Copyright 2025 Mi sitio. Todos los derechos reservados.</p>
</footer>
</body>
</html>
¿Qué hace cada etiqueta?
- head: metadatos y recursos necesarios para cargar el proyecto.
- header: encabezado visible; suele incluir logotipo, título y barra de navegación.
- nav: la navegación principal; se implementa con una unorganized list (ul), list items (li) y enlaces anchor (a).
- main: contenido relevante que el usuario viene a consumir.
- section: agrupa bloques temáticos dentro del main.
- article: pieza de contenido independiente, como entradas de un blog.
- aside: barra lateral que complementa o filtra el contenido principal.
- footer: cierre con información secundaria, como derechos o enlaces menos densos.
Consejos prácticos: - Usa etiquetas semánticas para que cualquier integrante del equipo identifique rápido la sección que debe modificar. - Mantén la navegación en nav para que lectores de pantalla y buscadores la detecten con precisión. - Inserta contenidos repetibles en article y organízalos por section cuando corresponda.
¿Cómo mejora la accesibilidad y el SEO con semántica?
La semántica crea un mapa comprensible del contenido para tecnologías de asistencia y motores de búsqueda.
- Accesibilidad: lectores de pantalla anuncian secciones como header, nav, main y footer, guiando la lectura.
- SEO: Google indexa mejor páginas con estructura clara, lo que optimiza la posibilidad de aparecer ante búsquedas relevantes.
- Mantenibilidad: el equipo entiende dónde está cada parte del proyecto al leer el HTML.
- Futuro con CSS: podrás aplicar estilos apuntando a secciones específicas con precisión.
¿Tienes dudas sobre cómo organizar tu estructura semántica o tu menú de navegación? Comparte tus preguntas y ejemplos para revisarlos juntos.