HTML Semántico

¿Qué es HTML Semántico?

El HTML semántico utiliza elementos que describen claramente su significado y propósito tanto a los navegadores como a los desarrolladores. En lugar de usar <div> y <span> genéricos para todo, los elementos semánticos indican a los navegadores, lectores de pantalla y motores de búsqueda exactamente qué tipo de contenido contienen.

Piénsalo como etiquetar cajas al mudarte: "Suministros de Cocina" es más útil que "Caja #3". El HTML semántico hace lo mismo para la estructura de tu página web.

Comparación No Semántico vs Semántico

<div id="header">
  <div id="logo">Logo</div>
  <div id="nav">
    <div>Inicio</div>
    <div>Acerca de</div>
  </div>
</div>

<div id="content">
  <div class="post">
    <div class="title">Título</div>
    <div class="text">...</div>
  </div>
</div>

<div id="sidebar">...</div>
<div id="footer">...</div>

<header>
  <h1>Logo</h1>
  <nav>
    <a href="/">Inicio</a>
    <a href="/about">Acerca de</a>
  </nav>
</header>

<main>
  <article>
    <h2>Título</h2>
    <p>...</p>
  </article>
</main>

<aside>...</aside>
<footer>...</footer>

Diseño de Página Semántico

Así es como los elementos semánticos crean una página bien estructurada:

<header>
  <h1>Nombre del Sitio</h1>
  <nav>
    <ul>
      <li><a href="/">Inicio</a></li>
      <li><a href="/about">Acerca de</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Título del Artículo</h2>
    <section>
      <h3>Encabezado de Sección</h3>
      <p>Contenido...</p>
    </section>
  </article>

  <aside>
    <h3>Enlaces Relacionados</h3>
    <!-- Contenido de barra lateral -->
  </aside>
</main>

<footer>
  <p>© 2024 Nombre de la Empresa</p>
</footer>

Elementos Semánticos Clave Explicados

<header>
  <h1>Mi Sitio Web</h1>
  <nav>...</nav>
</header>

<nav aria-label="Navegación principal">
  <ul>
    <li><a href="/">Inicio</a></li>
    <li><a href="/about">Acerca de</a></li>
  </ul>
</nav>

<main>
  <h1>Título de la Página</h1>
  <!-- Contenido principal aquí -->
</main>

<article>
  <h2>Título de la Publicación del Blog</h2>
  <time datetime="2024-01-15">15 de Enero, 2024</time>
  <p>Contenido del artículo...</p>
</article>

<section>
  <h2>Nuestros Servicios</h2>
  <p>Contenido sobre servicios...</p>
</section>

<aside>
  <h3>Artículos Relacionados</h3>
  <ul>...</ul>
</aside>

<footer>
  <p>© 2024 Empresa</p>
  <nav>...</nav>
</footer>

Elementos Semánticos Especiales

<figure> y <figcaption>

Contenido independiente como imágenes, diagramas, fragmentos de código con subtítulos opcionales.

<figure>
  <img src="grafico.png" alt="Gráfico de ventas" />
  <figcaption>Rendimiento de Ventas Q4 2024</figcaption>
</figure>

<!-- ¡También funciona para código! -->
<figure>
  <pre><code>const x = 10;</code></pre>
  <figcaption>Declaración de variable en JavaScript</figcaption>
</figure>

<details> y <summary>

Contenido interactivo tipo acordeón/colapsable—¡sin necesidad de JavaScript!

Haz clic para expandir

¡Este contenido está oculto hasta que hagas clic en el resumen!

Otra sección expandible

Puedes tener múltiples elementos details.

<details>
  <summary>Haz clic para expandir</summary>
  <p>Contenido oculto revelado al hacer clic.</p>
</details>

<!-- Abierto por defecto -->
<details open>
  <summary>Comienza expandido</summary>
  <p>Contenido visible inicialmente.</p>
</details>

<time>

Fechas y horas legibles por máquinas para mejor SEO y accesibilidad.

Publicado: 15 de Enero, 2024

Reunión a las: 2:30 PM

<!-- Solo fecha -->
<time datetime="2024-12-25">Día de Navidad</time>

<!-- Solo hora -->
<time datetime="14:30">2:30 PM</time>

<!-- Fecha y hora completa -->
<time datetime="2024-01-01T00:00:00Z">
  Año Nuevo 2024
</time>

<mark>

Texto resaltado o marcado (como un marcador fluorescente).

Resultados de búsqueda para "HTML": HTML es la base de la web.

<p>Lo más importante: <mark>Esta parte</mark></p>