Semántica Moderna: header, main, footer, section y article

“Un ninja que usa <div> para todo es como un samurai que usa un palo en vez de katana.” - Código del SEO

🎯 Objetivo Ninja

Escribirás HTML semántico profesional. Google te amará, los lectores de pantalla te bendecirán.

🏯 Teoría: El Por Qué

Antes (Época Oscura):

<div id="header">
  <div id="nav"></div>
</div>
<div id="content">
  <div class="post"></div>
</div>
<div id="footer"></div>

Ahora (Iluminación):

<header>
  <nav></nav>
</header>
<main>
  <article></article>
</main>
<footer></footer>

Beneficios:

  • SEO: Google entiende tu estructura
  • Accesibilidad: Lectores de pantalla saltan entre secciones
  • Mantenibilidad: Código auto-documentado

⚔️ Implementación

<header>: Cabecera

<!-- Header global (solo uno) -->
<header>
  <img src="logo.webp" alt="Logo">
  <nav>
    <a href="/">Inicio</a>
    <a href="/about">Sobre nosotros</a>
  </nav>
</header>

<!-- Header de artículo (pueden haber varios) -->
<article>
  <header>
    <h2>Título del artículo</h2>
    <p>Por Juan Ninja - 20 enero 2024</p>
  </header>
</article>
<nav>
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/rutas">Rutas</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

<main>: Contenido Principal

<!-- Solo UNO por página -->
<main>
  <h1>Título Principal</h1>
  <p>Contenido único de esta página.</p>
</main>

<article>: Contenido Independiente

<!-- Puede vivir solo (blog post, noticia, comentario) -->
<article>
  <header>
    <h2>Cómo ser un ninja frontend</h2>
    <time datetime="2024-01-20">20 enero 2024</time>
  </header>
  
  <p>Contenido del artículo...</p>
  
  <footer>
    <p>Autor: 8devmx</p>
  </footer>
</article>

<section>: Agrupación Temática

<section>
  <h2>Habilidades</h2>
  <article>
    <h3>HTML</h3>
    <p>Dominio avanzado...</p>
  </article>
  <article>
    <h3>CSS</h3>
    <p>Experto en flexbox...</p>
  </article>
</section>

<aside>: Contenido Relacionado

<aside>
  <h3>Artículos Relacionados</h3>
  <ul>
    <li><a href="#">CSS Grid</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</aside>
<!-- Footer global -->
<footer>
  <p>&copy; 2024 8devmx. Todos los derechos reservados.</p>
  <nav>
    <a href="/privacidad">Privacidad</a>
    <a href="/terminos">Términos</a>
  </nav>
</footer>

Estructura Completa

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>8devmx - Ruta del Shinobi</title>
</head>
<body>
  <header>
    <img src="logo.webp" alt="8devmx Logo">
    <nav>
      <a href="/">Inicio</a>
      <a href="/rutas">Rutas</a>
      <a href="/blog">Blog</a>
    </nav>
  </header>
  
  <main>
    <section>
      <h1>Últimos Artículos</h1>
      
      <article>
        <header>
          <h2>HTML Semántico</h2>
          <time datetime="2024-01-20">20 ene 2024</time>
        </header>
        <p>Aprende HTML moderno...</p>
        <footer>
          <a href="/html-semantico">Leer más</a>
        </footer>
      </article>
      
      <article>
        <header>
          <h2>CSS Grid</h2>
          <time datetime="2024-01-19">19 ene 2024</time>
        </header>
        <p>Domina layouts...</p>
        <footer>
          <a href="/css-grid">Leer más</a>
        </footer>
      </article>
    </section>
    
    <aside>
      <h3>Categorías</h3>
      <ul>
        <li><a href="/frontend">Frontend</a></li>
        <li><a href="/backend">Backend</a></li>
      </ul>
    </aside>
  </main>
  
  <footer>
    <p>&copy; 2024 8devmx</p>
    <nav>
      <a href="/contacto">Contacto</a>
      <a href="/privacidad">Privacidad</a>
    </nav>
  </footer>
</body>
</html>

🎯 Reto Ninja

MISIÓN SEMÁNTICA

🏗️ Arquitectura del Templo

1

Identifica las partes de una página web tradicional: cabecera, navegación, contenido principal, artículos independientes, contenido lateral y pie de página.

2

Convierte el bloque de código no-semántico del reto (usando <div>) a su versión moderna con HTML5.

3

Asegúrate de usar <header>, <nav>, <main>, <article>, <aside> y <footer> en su lugar correspondiente.

4

Verifica que solo exista un <main> en todo tu documento.

5

Valida tu código final en el validador oficial de la W3C para asegurar que no hay errores de estructura.

Consejo del Sensei: ¡Piensa en el significado, no en el diseño! La semántica describe QUÉ es el contenido, no cómo se ve.

🔓 Pergamino Oculto (Bonus)

<figure> y <figcaption>

<figure>
  <img src="diagram.webp" alt="Diagrama de flujo">
  <figcaption>Figura 1: Proceso de autenticación</figcaption>
</figure>

<details> y <summary>

<details>
  <summary>¿Qué es HTML semántico?</summary>
  <p>Es usar tags con significado específico...</p>
</details>

<time> con datetime

<time datetime="2024-01-20T10:30">
  20 de enero de 2024, 10:30 AM
</time>

<address>

<address>
  Escrito por <a href="mailto:ninja@8devmx.com">Ninja Developer</a><br>
  Ciudad de México, México
</address>

✅ Checklist de Dominio

MAESTRÍA ALCANZADA

Pergamino del Arquitecto

Próximo Pergamino: CSS - El Pincel del Ninja (selectores, propiedades, valores).

¡HTML dominado! Ahora viene el diseño. 🎨