Elementos HTML semánticos

El HTML semántico utiliza elementos que tienen significado, mejorando la estructura y claridad de la página tanto para los usuarios como para las máquinas.

Por qué importa la semántica

Los elementos semánticos como <header>, <article>, <footer>, etc., ayudan no solo a los desarrolladores y navegadores, sino también a los motores de búsqueda y tecnologías de asistencia.

El elemento <header>

El elemento <header> representa una sección introductoria de una página o sección, que generalmente contiene un título, logotipo o navegación.

<header>
  <h1>My Website</h1>
  <p>Tagline goes here</p>
</header>

El elemento <nav>

El <nav> se usa para almacenar enlaces de navegación. Indica explícitamente a los navegadores y lectores que esta sección sirve para navegar dentro del sitio web.

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

El elemento <main>

El <main> representa el contenido principal de la página. Solo debe utilizarse una vez por página y no debe contener elementos repetidos como navegación o pie de página.

El elemento <section>

El elemento <section> define un área de contenido agrupada lógicamente. Cada sección debería incluir idealmente un encabezado (por ejemplo, <h2>).

<section>
  <h2>News</h2>
  <p>Latest updates and information.</p>
</section>

El elemento <article>

El <article> representa un contenido independiente, como una entrada de blog o artículo de noticias. También puede anidarse, por ejemplo, en comentarios.

<article>
  <h2>How to Learn HTML</h2>
  <p>This article explains the basics of HTML...</p>
</article>

El elemento <aside>

El <aside> es para contenido relacionado con el contenido principal, pero que no forma parte de él — como enlaces, anuncios o citas.

El elemento <footer>

El <footer> marca la sección de cierre de una página o segmento, y a menudo contiene información de copyright, enlaces o datos de contacto.

Sugerencias de uso

¡Utiliza etiquetas semánticas para todos los propósitos estructurales, no solo <div>s! Mejora la legibilidad, el mantenimiento y el SEO.