DEFINICION
La semántica en HTML5 se refiere al uso de elementos o etiquetas que describen claramente el significado y la función del contenido que contienen, tanto para los desarrolladores como para los navegadores y otras tecnologías como motores de búsqueda y lectores de pantalla. A diferencia de etiquetas genéricas como <div> o <span>, que solo agrupan contenido sin aportar información sobre su propósito, las etiquetas semánticas en HTML5 indican explícitamente el tipo de contenido o su rol dentro de la página web.
BENEFICIOS
Las etiquetas semánticas permiten a los motores de búsqueda interpretar mejor el contenido y el contexto de las páginas, lo que facilita su indexación y puede mejorar el posicionamiento en resultados.
Ayudan a tecnologías de asistencia como lectores de pantalla a navegar e interpretar el contenido, beneficiando especialmente a usuarios con discapacidades visuales.
La estructura semántica hace que el HTML sea más comprensible para desarrolladores, simplificando las actualizaciones y colaboración en equipos.
El uso de estándares semánticos prepara los sitios para evoluciones tecnológicas y normativas de accesibilidad.
Etiquetas como <article>, <section> y <header> definen claramente la jerarquía y propósito de cada parte del documento.
Evitar el sobreanidamiento de elementos <div> reduce la complejidad del código, mejorando la velocidad de carga.
ELEMENTOS
- Los elementos semánticos en HTML5 incluyen etiquetas específicas que describen el significado del contenido que encierran, facilitando la estructuración y comprensión del documento. Aquí los principales:
Principales elementos semánticos:
- <article>: Define contenido independiente y autónomo (entradas de blog, noticias).
- <aside>: Contenido relacionado indirectamente con el principal (barras laterales, enlaces).
- <details> y <summary> Crean widgets interactivos para mostrar/ocultar información
- <figure> y <figcaption>: Marcan imágenes/gráficos con su descripción
- <footer>: Información de pie de página o sección (contacto, derechos).
- <header>: Encabezado de página o sección (títulos, logos).
- <main>: Contenido central único de la página.
- <mark>: Resalta texto relevante en un contexto.
- <nav>: Agrupa enlaces de navegación principales.
- <section:> Divide el documento en bloques temáticos.
- <time>: Especifica fechas/horas legibles por máquinas.