Introducción

Semantic Html Explained

4 min de lectura
Ver contenido

HTML Semántico: Construyendo Estructura de Documento Significativa

Introducción

HTML semántico significa usar elementos HTML según su propósito previsto en lugar de su apariencia visual. WCAG 1.3.1 (Información y Relaciones) requiere que la información, estructura y relaciones transmitidas a través de la presentación puedan determinarse programáticamente. Usar HTML semántico es la base del desarrollo web accesible.

Cuando los desarrolladores usan <div> y <span> para todo, las tecnologías asistivas no pueden entender la estructura de la página. Los usuarios de lectores de pantalla pierden la capacidad de navegar por encabezados, landmarks o listas—características que hacen el contenido web navegable y comprensible.

¿Qué Es HTML Semántico?

El Concepto Básico

Los elementos semánticos describen su significado tanto a navegadores como a desarrolladores:

<!-- No semántico: Significado poco claro -->
<div class="header">
  <div class="nav">
    <div class="nav-item">Inicio</div>
  </div>
</div>
<div class="main">
  <div class="big-text">Bienvenido</div>
</div>

<!-- Semántico: El significado es claro -->
<header>
  <nav>
    <a href="/">Inicio</a>
  </nav>
</header>
<main>
  <h1>Bienvenido</h1>
</main>

Quién Se Beneficia

Tipo de Usuario Beneficio
Usuarios de lectores de pantalla Navegar por encabezados, landmarks y listas
Usuarios de teclado Entender regiones y estructura de la página
Motores de búsqueda Mejor comprensión del contenido y relevancia
Desarrolladores El código es autodocumentado y mantenible
Todos los usuarios Comportamiento de página consistente y predecible

Requisitos WCAG

1.3.1 Información y Relaciones (Nivel A)

La información, estructura y relaciones transmitidas a través de la presentación pueden determinarse programáticamente o están disponibles en texto.

Esto significa:

  • Los encabezados visuales deben usar elementos de encabezado (<h1>-<h6>)
  • Las listas visuales deben usar elementos de lista (<ul>, <ol>, <dl>)
  • Las tablas de datos deben usar marcado de tabla apropiado
  • Las relaciones de formulario deben ser explícitas

4.1.2 Nombre, Rol, Valor (Nivel A)

Para todos los componentes de interfaz de usuario, el nombre y rol pueden determinarse programáticamente.

Esto significa:

  • Los elementos HTML nativos tienen roles incorporados
  • Los componentes personalizados necesitan ARIA cuando es necesario
  • Los elementos interactivos están correctamente identificados

Elementos Semánticos Clave

Estructura del Documento

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Título de Página</title>
</head>
<body>
  <header>
    <!-- Encabezado del sitio, logo, navegación principal -->
  </header>

  <nav aria-label="Navegación principal">
    <!-- Enlaces de navegación primaria -->
  </nav>

  <main>
    <!-- Contenido principal de la página (solo uno por página) -->
  </main>

  <aside>
    <!-- Contenido complementario (barra lateral) -->
  </aside>

  <footer>
    <!-- Pie de página, copyright, enlaces secundarios -->
  </footer>
</body>
</html>

Secciones de Contenido

Elemento Propósito Usar Cuando
<article> Contenido autocontenido Posts de blog, artículos de noticias, comentarios
<section> Agrupación temática Capítulos, contenido con pestañas
<aside> Relacionado pero separado Barras laterales, citas destacadas
<nav> Enlaces de navegación Nav principal, migas de pan, TOC
<header> Contenido introductorio Encabezado de página, encabezado de artículo
<footer> Contenido de pie Copyright, enlaces relacionados

Jerarquía de Encabezados

<!-- Jerarquía de encabezados correcta -->
<h1>Título de Página</h1>
  <h2>Sección Principal</h2>
    <h3>Subsección</h3>
    <h3>Otra Subsección</h3>
  <h2>Otra Sección Principal</h2>
    <h3>Subsección</h3>

<!-- MAL: Niveles de encabezado omitidos -->
<h1>Título de Página</h1>
<h3>Subsección</h3> <!-- ¡Se omitió h2! -->
<h5>Sección profunda</h5> <!-- ¡Se omitió h4! -->

Problemas Comunes de HTML Semántico

1. Sopa de Divs

<!-- MAL: Todo es un div -->
<div class="header">
  <div class="logo">Nombre del Sitio</div>
  <div class="nav">
    <div class="nav-item">Inicio</div>
    <div class="nav-item">Nosotros</div>
  </div>
</div>

<!-- BIEN: Elementos semánticos apropiados -->
<header>
  <a href="/" class="logo">Nombre del Sitio</a>
  <nav>
    <a href="/">Inicio</a>
    <a href="/nosotros">Nosotros</a>
  </nav>
</header>

2. Encabezados Falsos

<!-- MAL: Texto estilizado en lugar de encabezados -->
<div class="title">Título de Página</div>
<p><strong>Encabezado de Sección</strong></p>

<!-- BIEN: Elementos de encabezado reales -->
<h1>Título de Página</h1>
<h2>Encabezado de Sección</h2>

3. Listas No Semánticas

<!-- MAL: Lista falsa -->
<div class="list">
  <div>• Elemento uno</div>
  <div>• Elemento dos</div>
</div>

<!-- BIEN: Lista apropiada -->
<ul>
  <li>Elemento uno</li>
  <li>Elemento dos</li>
</ul>

4. Botones Que No Son Botones

<!-- MAL: Div actuando como botón -->
<div class="button" onclick="submit()">Enviar</div>

<!-- BIEN: Botón real -->
<button type="submit">Enviar</button>

<!-- MAL: Enlace actuando como botón -->
<a href="#" onclick="submit(); return false;">Enviar</a>

<!-- BIEN: Botón para acciones, enlaces para navegación -->
<button type="button" onclick="submit()">Enviar</button>

Semántica a Nivel de Texto

Énfasis e Importancia

<!-- Énfasis (estrés) -->
<p><em>Realmente</em> quiero ir.</p>

<!-- Importancia fuerte -->
<p><strong>Advertencia:</strong> Esta acción no se puede deshacer.</p>

<!-- Ambos (evitar usar para estilos) -->
<p><strong><em>¡Alerta crítica!</em></strong></p>

Otros Elementos de Texto

Elemento Significado Ejemplo
<abbr> Abreviatura <abbr title="Pautas de Accesibilidad para el Contenido Web">WCAG</abbr>
<cite> Cita/referencia <cite>Pautas de Accesibilidad para el Contenido Web</cite>
<code> Código informático <code>console.log()</code>
<time> Fecha/hora <time datetime="2024-12-16">16 de diciembre de 2024</time>
<mark> Texto resaltado <mark>término de búsqueda</mark>

Probando Estructura Semántica

Prueba Manual Rápida

  1. Deshabilitar CSS y ver la página
  2. ¿El contenido sigue siendo lógico y navegable?
  3. ¿Son visibles los encabezados, listas y secciones?
  4. ¿Puedes entender la estructura de la página?

Qué Verificar

  • [ ] La página tiene jerarquía de encabezados lógica (h1 → h2 → h3)
  • [ ] Solo un <h1> por página (generalmente)
  • [ ] La navegación usa el elemento <nav>
  • [ ] El contenido principal está en el elemento <main>
  • [ ] Las listas usan <ul>, <ol>, o <dl> apropiadamente
  • [ ] Los botones usan <button>, los enlaces usan <a>
  • [ ] Las tablas tienen <thead>, <tbody>, y encabezados apropiados

Herramientas para Pruebas

  • WAVE - Muestra esquema del documento y estructura
  • HeadingsMap - Extensión del navegador para jerarquía de encabezados
  • axe DevTools - Reporta problemas de estructura semántica
  • Lector de pantalla - Navegar por encabezados y landmarks

Resumen de Mejores Prácticas

Hacer No Hacer
Usar elementos de encabezado para encabezados Usar divs o spans estilizados para encabezados
Usar nav para navegación Usar divs con class=“nav”
Usar button para acciones Usar divs o spans con manejadores de clic
Usar HTML semántico primero Empezar con divs y agregar ARIA
Mantener jerarquía de encabezados Omitir niveles de encabezado
Usar listas para elementos agrupados Usar saltos de línea para contenido tipo lista

Artículos Relacionados

Referencias

  1. W3C - WCAG 2.2 SC 1.3.1 Info and Relationships
  2. W3C - WCAG 2.2 SC 4.1.2 Name, Role, Value
  3. MDN - HTML elements reference
  4. WebAIM - Semantic Structure

Artículos relacionados

Versión relacionada

Guía detallada

Semantic Html Implementation Guide

El HTML semántico consiste en elegir elementos HTML que comunican el significado del contenido, no solo su apariencia visual

Hub de categoría

Hub

Wcag Compliance Hub

La accesibilidad web asegura que los sitios web y aplicaciones puedan ser utilizados por todos, incluyendo personas con discapacidades