HTML Semántico

HTML semántico significa usar la etiqueta que mejor describe el significado del contenido, no solo cualquiera que "funcione" visualmente. En lugar de usar div para todo, HTML5 introdujo etiquetas con semántica clara: header (encabezado), nav (navegación), main (contenido principal), section (sección), article (artículo independiente), aside (contenido lateral), footer (pie de página).

El HTML semántico tiene tres beneficios clave: SEO (Google entiende mejor tu página y la posiciona mejor), accesibilidad (los lectores de pantalla navegan por secciones semánticas), y mantenibilidad (el código es más fácil de leer y modificar). Un div sin semántica no dice nada; un main dice exactamente qué contiene.

<!-- Estructura semántica moderna -->
<header>
  <nav>
    <a href="/">Inicio</a>
    <a href="/blog">Blog</a>
    <a href="/contacto">Contacto</a>
  </nav>
</header>

<main>
  <article>
    <h1>Título del artículo</h1>
    <time datetime="2024-01-15">15 de enero, 2024</time>
    <p>Contenido del artículo...</p>
    
    <section>
      <h2>Primera sección</h2>
      <p>Texto de la sección...</p>
    </section>
    
    <aside>
      <h3>Información relacionada</h3>
      <p>Contenido secundario...</p>
    </aside>
  </article>
</main>

<footer>
  <p>&copy; 2024 Mi Empresa. Todos los derechos reservados.</p>
</footer>