HTML semántico: 10 errores habituales y las etiquetas correctas

Una página HTML puede verse perfecta y estar mal escrita. div por todas partes, negrita puesta con b, títulos elegidos por su tamaño: el navegador lo muestra todo sin quejarse, pero los lectores de pantalla, los motores de búsqueda y tus compañeros pierden la información que las etiquetas tenían que llevar. A eso se le llama HTML semántico: usar la etiqueta que dice qué es el contenido, no solo qué aspecto debe tener. Estos son los diez errores más habituales y su corrección.

Por qué importa la semántica

• Accesibilidad. Un lector de pantalla ofrece saltar directamente a la navegación, al contenido principal o al pie de página. Solo puede hacerlo si existen nav, main y footer. Con div, el usuario oye una página plana.
• SEO. Los motores se apoyan en la estructura para identificar el contenido principal, los títulos y las relaciones entre secciones. Una jerarquía limpia se entiende a la primera; una sopa de div hay que adivinarla.
• Mantenimiento. <nav> se lee sin comentarios; <div class="nv2"> obliga a abrir el CSS. El código semántico se relee seis meses después.
• Comportamientos gratis. Un button se activa con el teclado, un a se abre en otra pestaña con el clic de rueda, un label amplía la zona pulsable de una casilla. Todo eso hay que reprogramarlo a mano si haces trampas con div.

Error 1: div en lugar de header, nav, main y footer

La estructura de una página tiene etiquetas propias. Un div con el identificador header no es una de ellas para el navegador.

No hagas esto:

<div id="header">…</div>
<div id="menu">…</div>
<div id="content">…</div>
<div id="footer">…</div>

Haz esto:

<header>…</header>
<nav aria-label="Navigation principale">…</nav>
<main>…</main>
<footer>…</footer>

Cada una de estas etiquetas lleva un rol implícito (banner, navigation, main, contentinfo) que las tecnologías de asistencia reconocen. main debe ser único en la página; header y footer pueden repetirse dentro de un article.

Error 2: el pie de una imagen dentro de un párrafo

Una imagen y su pie forman una unidad. La etiqueta figure las asocia y figcaption lleva el pie.

No hagas esto:

<img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
<p>Le mont Blanc, juillet 2026</p>

Haz esto:

<figure>
  <img src="montagne.jpg" alt="Le mont Blanc au lever du soleil">
  <figcaption>Le mont Blanc, juillet 2026</figcaption>
</figure>

figure también sirve para un bloque de código, un gráfico o una cita acompañados de un pie.

Error 3: b e i para dar énfasis

b e i describen una apariencia. strong y em describen una intención: importancia alta, énfasis puesto en una palabra. Un lector de pantalla puede cambiar la entonación en em, nunca en i.

No hagas esto:

<b>Attention</b> : ce réglage est <i>irréversible</i>.

Haz esto:

<strong>Attention</strong> : ce réglage est <em>irréversible</em>.

b e i no están prohibidos: mantienen un uso preciso, una palabra clave destacada sin importancia particular para b, un término extranjero o el nombre de un barco para i. Si solo quieres negrita decorativa, eso es CSS: font-weight: 700.

Error 4: una jerarquía de títulos rota

Las etiquetas h1 a h6 forman el esquema del documento. Elegir un h4 porque tiene «el tamaño adecuado» rompe ese esquema: los lectores de pantalla navegan de título en título y los motores deducen de ahí la estructura.

No hagas esto:

<h1>Nos services</h1>
<h4>Développement</h4>     <!-- saut de h1 à h4 -->
<h1>Hébergement</h1>       <!-- second h1 pour une sous-partie -->

Haz esto:

<h1>Nos services</h1>
  <h2>Développement</h2>
    <h3>Sites vitrine</h3>
  <h2>Hébergement</h2>

Un solo h1 por página, sin saltarse ningún nivel, y el tamaño se ajusta en CSS. Si un título tiene que ser pequeño visualmente, eso es h2 { font-size: 1.1rem }, no h5.

Error 5: section y article confundidos, o usados para todo

article designa un contenido autónomo, que mantendría su sentido fuera de la página: una entrada de blog, un comentario, una ficha de producto. section agrupa un contenido temático dentro de un conjunto y siempre debería tener un título. Un div sigue siendo la opción correcta para una simple agrupación de maquetación.

No hagas esto:

<section>
  <section><img src="logo.svg" alt="Gekkode"></section>
  <section>Du texte sans titre</section>
</section>

Haz esto:

<article>
  <h2>Titre du billet</h2>
  <section>
    <h3>Première partie</h3>
    …
  </section>
</article>

<div class="colonnes">…</div> <!-- pure mise en page : div -->

Error 6: un enlace que hace de botón, y al revés

Un enlace (a) lleva a alguna parte. Un botón (button) dispara una acción: enviar, abrir un menú, mostrar una ventana. Un a href="#" con un gestor de clic no es ni lo uno ni lo otro, y un div pulsable no es accesible ni con el teclado ni con los lectores de pantalla.

No hagas esto:

<a href="#" onclick="ouvrirMenu()">Menu</a>
<div class="btn" onclick="envoyer()">Envoyer</div>

Haz esto:

<button type="button" aria-expanded="false" aria-controls="menu">Menu</button>
<button type="submit">Envoyer</button>
<a href="https://www.gekkode.com/es/tarifs/">Voir les tarifs</a>

El button nativo responde a Intro y a Espacio, recibe el foco con el teclado y anuncia su rol. Todo eso se pierde con un div.

Error 7: enlaces que dicen «haz clic aquí»

El texto de un enlace tiene que anunciar su destino por sí solo: los lectores de pantalla ofrecen la lista de enlaces de la página fuera de contexto, y los motores usan el ancla para calificar la página de destino.

No hagas esto:

Pour nos tarifs, <a href="https://www.gekkode.com/es/tarifs/">cliquez ici</a>.

Haz esto:

Consultez <a href="https://www.gekkode.com/es/tarifs/">nos tarifs 2026</a>.

Error 8: imágenes sin alt

El atributo alt describe la imagen para quien no la ve: lector de pantalla, imagen que no carga, motor de búsqueda. Es obligatorio. Una imagen puramente decorativa lleva un alt vacío, no ausente.

No hagas esto:

<img src="graphique-ventes.png">
<img src="separateur.png" alt="separateur.png">

Haz esto:

<img src="graphique-ventes.png" alt="Ventes trimestrielles 2026 : hausse de 12 % au T2">
<img src="separateur.png" alt=""> <!-- décorative : alt vide -->

El nombre del archivo nunca es una descripción. Describe lo que la imagen aporta al texto.

Error 9: campos de formulario sin label

Un texto colocado al lado de un campo no está vinculado a él. La etiqueta label, asociada mediante for e id, anuncia el campo al lector de pantalla y hace que el texto sea pulsable para dar el foco.

No hagas esto:

Adresse e-mail <input type="email" name="email">
<input type="text" placeholder="Votre nom">

Haz esto:

<label for="email">Adresse e-mail</label>
<input id="email" type="email" name="email" autocomplete="email">

<label for="nom">Votre nom</label>
<input id="nom" type="text" name="nom" autocomplete="name">

El placeholder no sustituye al label: desaparece al escribir y su contraste suele ser insuficiente. Otras buenas prácticas para los formularios HTML completan esta.

Error 10: estilos en línea y listas simuladas

Dos malas costumbres que mezclan estructura y presentación. El estilo en línea impide cambiar la apariencia sin tocar el HTML; la lista simulada con guiones y br no es una lista para el navegador, que no puede ni anunciarla ni contarla.

No hagas esto:

<h1 style="font-size: 24px; color: #333;">Titre</h1>
<p>- Pommes<br>- Poires<br>- Cerises</p>

Haz esto:

<h1 class="titre-page">Titre</h1>
<ul>
  <li>Pommes</li>
  <li>Poires</li>
  <li>Cerises</li>
</ul>

.titre-page {
  font-size: 1.5rem;
  color: #333;
}

Comprobar tu HTML

Tres controles rápidos, por orden:

1. El validador del W3C señala las etiquetas mal cerradas, los atributos desconocidos y los alt que faltan.
2. La pestaña Accesibilidad de las herramientas de desarrollo (Chrome, Firefox) muestra el árbol tal y como lo percibe un lector de pantalla: si tus header, nav y main aparecen ahí como regiones, la estructura es buena.
3. La navegación con el teclado: tabula por la página. Todo lo que se pulsa debe recibir el foco, en un orden lógico. Un div pulsable falla aquí.

Para la lista completa de etiquetas de estructura y de contenido, mira 20 etiquetas HTML5 que hay que conocer. Y una vez estructurada la página, el CSS toma el relevo, por ejemplo para centrar los elementos sin tocar el HTML.