Contenido del Artículo
- ¿Qué es la semántica en HTML5?
- <header> - Cabecera de contenido
- <nav> - Navegación principal
- <section> - Sección temática
- <article> - Contenido independiente
- <footer> - Pie de contenido
- Estructura semántica completa
- Accesibilidad y Semántica
- Errores comunes y buenas prácticas
- Aplicaciones educativas
- Ejercicio práctico
- Recursos para profundizar
¿Qué es la semántica en HTML5?
La semántica HTML5 se refiere al uso de etiquetas que describen el significado del contenido más que solo su apariencia. Estas etiquetas ayudan a navegadores, motores de búsqueda y tecnologías asistivas a entender la estructura y propósito de cada sección.
Mejor SEO
Los buscadores indexan contenido con mayor precisión
Accesibilidad
Lectores de pantalla navegan mejor el contenido
Mantenibilidad
Código más legible y fácil de actualizar
Usar HTML semántico puede mejorar hasta un 30% la accesibilidad para usuarios con discapacidad visual (estudio W3C 2023).
<header> - Cabecera de contenido
Representa contenido introductorio o de navegación. Puede usarse múltiples veces en una página.
<header>
<h1>Nombre del Sitio</h1>
<p>Eslogan o descripción breve</p>
</header>
| Donde usar | Ejemplos |
|---|---|
| Cabecera de página | Logo, menú principal, buscador |
| Cabecera de artículo | Título, autor, fecha de publicación |
| Cabecera de sección | Títulos introductorios |
<nav> - Navegación principal
Contiene enlaces de navegación esenciales. No debe usarse para todos los grupos de enlaces.
Uso principal
Menús globales, tabla de contenidos
Evitar en
Enlaces de pie de página, enlaces sociales
Accesibilidad
Screen readers anuncian "región de navegación"
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/cursos">Cursos</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>Una página puede tener múltiples
<section> - Sección temática
Agrupa contenido temáticamente relacionado. Debe incluir un encabezado (h1-h6).
<section>
<h2>Nuestros Servicios</h2>
<p>Descripción de servicios...</p>
</section>| Caso de uso | Ejemplo |
|---|---|
| Capítulos | Secciones de un artículo largo |
| Pestañas | Contenido de cada pestaña |
| Agrupaciones | Características de producto |
<article> - Contenido independiente
Representa contenido autónomo que podría distribuirse independientemente.
Contenido distribuible
Noticias, posts de blog, comentarios
Anidamiento
Artículos pueden contener secciones
Identificación
Debería tener encabezado y/o autor
<article>
<header>
<h2>Título del Artículo</h2>
<p>Por Autor - Fecha</p>
</header>
<p>Contenido principal...</p>
<footer>
<p>Etiquetas: HTML, Semántica</p>
</footer>
</article><footer> - Pie de contenido
Contiene información sobre su sección padre: autoría, enlaces relacionados, copyright.
<footer>
<p>© 2023 Escuela Web</p>
<address>contacto@escuelaweb.edu</address>
<nav>
<a href="/privacidad">Política de Privacidad</a>
</nav>
</footer>| Uso típico | Contenido |
|---|---|
| Pie de página | Copyright, enlaces legales, mapa sitio |
| Pie de artículo | Autor, fecha, etiquetas |
| Pie de sección | Enlaces relacionados |
Estructura semántica completa
Ejemplo de página web con todas las etiquetas:
<body>
<header>
<h1>Portal Educativo</h1>
<nav>...</nav>
</header>
<main>
<article>
<header>...</header>
<section>...</section>
<section>...</section>
<footer>...</footer>
</article>
</main>
<aside>
<section>...</section>
</aside>
<footer>
<!-- Pie de página global -->
</footer>
</body>
Accesibilidad y Semántica
El uso correcto mejora la experiencia para tecnologías asistivas:
Puntos de referencia
Screen readers usan etiquetas para navegación
Navegación por secciones
Saltar entre header, main, footer
Atributos ARIA
role="banner", "navigation", "main" implícitos
| Etiqueta | Rol ARIA implícito |
|---|---|
| <header> | banner (si en body) |
| <nav> | navigation |
| <main> | main |
| <footer> | contentinfo |
Errores comunes y buenas prácticas
Evita estos errores frecuentes:
Uso incorrecto de divs
Reemplazar divs genéricos por etiquetas semánticas
Anidamiento ilógico
Evitar header dentro de footer, etc.
Falta de encabezados
Toda section/article debe tener título (h2-h6)
Semántica excesiva
No usar section para cada pequeño grupo
Valida tu estructura con el W3C Validator y herramientas como Lighthouse.
Aplicaciones educativas
Implementación en proyectos pedagógicos:
Artículos académicos
Estructurar papers con header/section/footer
Portafolios estudiantiles
Crear estructuras semánticas para proyectos
Plataformas LMS
Organizar contenido de cursos
Blogs educativos
Estructurar posts con article/section
Ejercicio práctico
Reestructura este código usando semántica HTML5:
<!-- Código a mejorar -->
<div id="top">
<div class="logo">Escuela Web</div>
<div class="menu">...</div>
</div>
<div class="content">
<div class="post">
<div class="post-title">Título</div>
<div class="post-body">...</div>
</div>
</div>
<div id="bottom">
<p>Copyright</p>
</div>Compara tu solución con validadores semánticos y mide la mejora en accesibilidad.
Recursos para profundizar
Continúa tu aprendizaje:
WAI-ARIA Authoring Practices
Pautas avanzadas de accesibilidad
HTML5 Outliner
Herramientas para analizar estructura
Componentes semánticos
Patrones para cards, acordeones, modales
SEO técnico avanzado
Schema.org y rich snippets
La semántica HTML5 es fundamental para la Web 3.0 y tecnologías emergentes como la navegación por voz.
