Semántica HTML

Definición Técnica

La semántica HTML se refiere al uso de elementos HTML que comunican el significado y la estructura del contenido, no solo su apariencia visual. Los elementos semánticos proporcionan información sobre el tipo de contenido que contienen, permitiendo que navegadores, motores de búsqueda y tecnologías de asistencia interpreten y presenten el contenido de manera apropiada.

Elementos Semánticos Principales

Estructura de Documento

<!-- ✅ Correcto: Estructura semántica -->
<header>
  <nav aria-label="Navegación principal">
    <ul>
      <li><a href="/">Inicio</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h1>Título del artículo</h1>
    <p>Contenido...</p>
  </article>
</main>

<aside>
  <h2>Información relacionada</h2>
</aside>

<footer>
  <p>Copyright 2024</p>
</footer>

Elementos de Contenido

• <header>: Encabezado de sección o página
• <nav>: Navegación principal
• <main>: Contenido principal único
• <article>: Contenido independiente (artículo, post)
• <section>: Sección temática del documento
• <aside>: Contenido relacionado pero secundario
• <footer>: Pie de página o sección

Texto Semántico

<!-- ✅ Correcto: Elementos semánticos de texto -->
<p>El <strong>acceso</strong> a la información es un <em>derecho</em> fundamental.</p>
<blockquote cite="https://ejemplo.com">
  <p>Cita importante sobre accesibilidad</p>
</blockquote>
<cite>Autor de la cita</cite>

Beneficios de la Semántica

Para Tecnologías de Asistencia

• Lectores de pantalla: Pueden navegar por estructura
• Navegación por landmarks: Saltar entre secciones principales
• Comprensión del contexto: Entender el propósito de cada sección

Para SEO

• Mejor indexación: Motores de búsqueda entienden la estructura
• Rich snippets: Posibilidad de resultados enriquecidos
• Relevancia: Mejor comprensión del contenido

Para Desarrollo

• Código más claro: Fácil de entender y mantener
• Estilos más simples: Menos clases CSS necesarias
• Compatibilidad: Funciona en todos los navegadores modernos

Errores Comunes

❌ Evitar

<!-- ❌ Incorrecto: Divs sin semántica -->
<div class="header">
  <div class="nav">
    <div class="link">Inicio</div>
  </div>
</div>
<div class="content">
  <div class="title">Título</div>
</div>

✅ Correcto

<!-- ✅ Correcto: Elementos semánticos -->
<header>
  <nav>
    <a href="/">Inicio</a>
  </nav>
</header>
<main>
  <h1>Título</h1>
</main>

Relación con ARIA

La semántica HTML es preferible a ARIA cuando es posible:

<!-- ✅ Preferible: HTML semántico -->
<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
  </ul>
</nav>

<!-- ⚠️ Solo si HTML semántico no es posible -->
<div role="navigation" aria-label="Navegación principal">
  <ul>
    <li><a href="/">Inicio</a></li>
  </ul>
</div>

Referencias

• MDN - HTML Semantics
• HTML5 Semantic Elements

Términos Relacionados

• HTML
• ARIA
• Landmarks
• Jerarquía de encabezados