Curso HTML 19.1 Diseño de la estructura semántica de un sitio completo

19.1 Diseño de la estructura semántica de un sitio completo

El diseño semántico de un sitio web consiste en organizar el contenido en bloques lógicos mediante etiquetas HTML5 que aportan significado a cada zona. Más allá de la apariencia visual, cada elemento debe reflejar su función en el documento y mejorar la accesibilidad y el SEO.

1. Pasos para un diseño semántico

Analizar el contenido: identificar secciones (cabecera, navegación, contenido principal, barra lateral, pie de página).
Crear un wireframe semántico: dibujar esquemáticamente dónde irán <header>, <nav>, <main>, etc.
Asignar etiquetas semánticas: mapear cada bloque de contenido con la etiqueta HTML adecuada.
Incluir atributos de accesibilidad: roles, aria-label, landmarks.
Revisar y validar: comprobar la estructura con herramientas de accesibilidad y SEO.

2. Tabla de elementos semánticos

Etiqueta	Uso principal	Comentarios
<header>	Zona superior con logo y nav	Puede repetirse en `<article>`
<nav>	Menú de navegación	Usar `aria-label` si hay varios
<main>	Contenido principal único	No anidar más de uno
<section>	Bloque temático	Usar títulos en cada sección
<article>	Contenido independiente (blog, noticia)	Puede tener su propio `<header>` y `<footer>`
<aside>	Elementos relacionados (sidebar)	Ads, widgets, enlaces
<footer>	Pie de página	Información de copyright, enlaces legales

3. Ejemplo de plantilla semántica

  <!-- Plantilla básica de un sitio semántico -->
  <header role='banner'>
    <div class='logo'>
      <img src='logo.png' alt='Logotipo'>
    </div>
    <nav role='navigation' aria-label='Menú principal'>
      <ul>
        <li><a href='index.html'>Inicio</a></li>
        <li><a href='about.html'>Acerca de</a></li>
        <li><a href='services.html'>Servicios</a></li>
        <li><a href='contact.html'>Contacto</a></li>
      </ul>
    </nav>
  </header>

  <main role='main'>
    <!-- Sección destacada -->
    <section aria-labelledby='promo-title'>
      <h2 id='promo-title'>>Promociones actuales</h2>
      <p>>Aprovecha nuestras ofertas de verano.</p>
    </section>

    <!-- Artículos de blog -->
    <section aria-labelledby='blog-title'>
      <h2 id='blog-title'>>Últimas entradas</h2>

      <article>
        <header>
          <h3>Cómo diseñar HTML semántico</h3>
          <time datetime='2024-06-15'>15 junio, 2024</time>
        </header>
        <p>>Explicamos las mejores prácticas para etiquetar tu contenido.</p>
        <footer>
          <a href='post1.html'>Leer más</a>
        </footer>
      </article>

      <article>
        <header>
          <h3>>Accesibilidad web paso a paso</h3>
          <time datetime='2024-06-10'>10 junio, 2024</time>
        </header>
        <p>>Guía para implementar WAI-ARIA y mejorar la UX.</p>
        <footer>
          <a href='post2.html'>Leer más</a>
        </footer>
      </article>
    </section>
  </main>

  <aside role='complementary'>
    <h2>>Enlaces útiles</h2>
    <ul>
      <li><a href='#faq'>>Preguntas frecuentes</a></li>
      <li><a href='#support'>>Soporte técnico</a></li>
    </ul>
  </aside>

  <footer role='contentinfo'>
    <p>&copy; 2024 Mi Sitio Web. Todos los derechos reservados.</p>
    <nav aria-label='Enlaces legales'>
      <ul>
        <li><a href='privacy.html'>>Política de privacidad</a></li>
        <li><a href='terms.html'>>Términos de uso</a></li>
      </ul>
    </nav>
  </footer>

4. Buenas prácticas avanzadas

Utilizar atributos role cuando la semántica nativa no sea suficiente.
Agregar aria-label o aria-labelledby para describir landmarks a usuarios de lector de pantalla.
Reservar <div> y <span> sólo para estilos o scripts, sin significado semántico.
Emplear <figure> y <figcaption> para imágenes con texto descriptivo.
Asegurar un único <main> por página para que los lectores de pantalla detecten correctamente el contenido principal.

Con esta estructura semántica clara, tu sitio será más mantenible, accesible y posicionable en buscadores, además de ofrecer una mejor experiencia de usuario.