HTML Semántico y Estructura de la Página

Hasta ahora, has aprendido cómo construir elementos en una página web. Ahora vamos a mejorar cómo se estructura y comprende tu contenido.

¿Qué es HTML semántico?

HTML semántico significa utilizar elementos que describen claramente el propósito de tu contenido. En lugar de usar contenedores genéricos como <div>, utilizas etiquetas significativas como:

• <header>;
• <nav>;
• <section>;
• <article>;
• <footer>.

¿Por qué es importante?

• Ayuda a los navegadores y desarrolladores a entender la estructura de tu página;
• Mejora la accesibilidad (los lectores de pantalla dependen de esto);
• Ayuda a los motores de búsqueda a interpretar mejor tu contenido.

Elementos semánticos comunes

<header>

Representa la parte superior de una página o sección (logotipo, título, navegación).

<header>
  <h1>My Website</h1>
</header>

<nav>

Define enlaces de navegación.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

<section>

Agrupa contenido relacionado.

<section>
  <h2>Services</h2>
  <p>We offer web development...</p>
</section>

<article>

Representa contenido independiente (por ejemplo, entrada de blog).

<article>
  <h2>Blog Post</h2>
  <p>Content goes here...</p>
</article>

<footer>

Define la parte inferior de una página.

<footer>
  <p>&copy; My Website</p>
</footer>

Cómo se ve en conjunto