¿Qué es el HTML semántico?
El HTML semántico consiste en elegir elementos que describan qué es el contenido, no cómo se ve. Un <nav> es un bloque de navegación. Un <article> es contenido autónomo. Un <button> realiza una acción. Estos elementos aportan un significado que los navegadores, las tecnologías de asistencia y los motores de búsqueda pueden procesar.
La alternativa es una página construida con elementos genéricos <div> y <span>, lo que a menudo se denomina “div soup”. Puede verse idéntica en pantalla, pero es opaca para un lector de pantalla y más difícil de mantener. La semántica no cuesta nada y rinde frutos en todas partes.
Landmarks
Los elementos landmark definen las regiones principales de una página y permiten a los usuarios saltar entre ellas.
<!-- layout.html -->
<body>
<header>
<a href="/">hackweb</a>
<nav aria-label="Main">
<a href="/guides">Guides</a>
</nav>
</header>
<main>
<h1>Guides</h1>
</main>
<footer>
<p>© 2026 hackweb.dev</p>
</footer>
</body>- header — contenido introductorio de la página o de una sección.
- nav — un bloque de enlaces de navegación. Etiqueta los nav repetidos con
aria-label. - main — el contenido principal; se utiliza una sola vez y es el punto al que saltan los lectores de pantalla.
- aside — contenido relacionado tangencialmente con el contenido principal.
- footer — contenido de cierre, como el copyright o enlaces relacionados.
Los usuarios de lectores de pantalla pueden listar y saltar entre landmarks, lo que convierte una página larga en una estructura navegable.
Encabezados
Los encabezados forman el esquema de la página. Utiliza un único <h1> para el tema principal, y luego <h2> y <h3> para las secciones y subsecciones.
<!-- outline.html -->
<h1>CSS Grid</h1>
<h2>Tracks and lines</h2>
<h3>Defining columns</h3>
<h3>Placing items</h3>
<h2>Responsive grids</h2>Nunca elijas el nivel de un encabezado basándote en su tamaño. Utiliza CSS para la apariencia y los encabezados para la estructura. Saltar niveles, como pasar de h1 a h4, hace que el esquema sea confuso para las tecnologías de asistencia.
Elementos de contenido
Más allá de los landmarks, HTML dispone de elementos para tipos específicos de contenido.
- article — contenido autónomo que podría existir por sí solo, como una publicación o un comentario.
- section — un grupo temático, generalmente con un encabezado.
- figure y figcaption — contenido multimedia con un pie de foto.
- blockquote y cite — una cita y su fuente.
- time — una fecha o hora con un
datetimelegible por máquina. - address — información de contacto.
- ul, ol, dl — listas desordenadas, ordenadas y de descripción.
<!-- post.html -->
<article>
<h1>What is DNS?</h1>
<p><time datetime="2026-09-15">September 15, 2026</time></p>
<figure>
<img src="/dns.svg" alt="A DNS lookup walks the name hierarchy" width="800" height="400" />
<figcaption>Resolving a name step by step.</figcaption>
</figure>
<blockquote cite="https://example.com">
<p>DNS is the internet's phone book.</p>
</blockquote>
</article>Usar el elemento correcto significa obtener el comportamiento predeterminado y el significado adecuados, sin necesidad de trabajo extra.
Enlaces frente a botones
Este es el error semántico más común.
- Usa
<a href>para la navegación hacia una URL. Permite hacer clic derecho, abrir en una pestaña nueva, añadir a marcadores y activación mediante teclado. - Usa
<button>para acciones que cambian el estado o envían datos. Es enfocable, operable mediante teclado y se anuncia como un botón.
<!-- controls.html -->
<a href="/guides/css">Read the CSS guide</a>
<button type="button" onclick="toggleMenu()">Toggle menu</button>Un <div onclick="..."> parece clickable, pero no es accesible mediante teclado, no se anuncia como un control y no es enfocable. Corregirlo requiere recrear manualmente todo lo que un botón ya te ofrece de forma nativa.
Formularios y tablas
Los formularios tienen su propia semántica: <form>, <label>, <fieldset>, <legend>, <input>, <select> y <textarea>. Cada input debe tener una etiqueta, y agrupar los controles relacionados con fieldset y legend ayuda a todos los usuarios. La guía de Formularios y Validación profundiza más en este tema.
Las tablas son para datos tabulares, no para el diseño (layout). Utiliza <table>, <thead>, <tbody>, <th> junto con scope y <caption> para que la relación entre las celdas y los encabezados sea clara.
Cuando un div es suficiente
Los elementos genéricos no son un pecado. Usa <div> y <span> cuando realmente necesites un contenedor para estilos o diseño que no tenga un significado semántico. La regla es sencilla: recurre a un elemento semántico cuando exista uno, y usa un div cuando ninguno encaje. Añadir section sin un encabezado o nav alrededor de un único enlace no relacionado añade ruido en lugar de significado.
Mejores prácticas
- Usa un solo
h1y mantén los niveles de los encabezados en orden. - Estructura las páginas con header, nav, main y footer.
- Usa article y section para el contenido, no div.
- Prefiere button para acciones y anclas para la navegación.
- Asigna a cada imagen un texto
altsignificativo, oalt=""si es decorativa. - Etiqueta los controles de formulario y agrupa los que estén relacionados.
- Valida tu HTML para que el parser no tenga que recuperarse.
Errores comunes
- Construir todo utilizando divs y spans.
- Usar un div con un onclick en lugar de un button.
- Elegir los niveles de los encabezados basándose en el tamaño de la fuente.
- Utilizar múltiples elementos h1 sin un tema principal claro.
- Usar tablas para definir el layout.
- Envolver enlaces individuales en un nav, o usar section sin un encabezado.
Próximos pasos
La semántica es la base de una página accesible y fácil de encontrar. Refuerza tus conocimientos con los conceptos básicos de HTML, haz que tu sitio sea inclusivo con la guía de Accesibilidad, apóyalo con los conceptos básicos de SEO y completa el panorama con Formularios y Validación.