En este capítulo, exploraremos a fondo los elementos semánticos más comunes en HTML. Estos elementos permiten estructurar el contenido de manera lógica y significativa, mejorando la accesibilidad, optimización para motores de búsqueda (SEO) y la mantenibilidad del código. Comprender y utilizar correctamente estos elementos es esencial para construir sitios web de calidad.

<header>: Encabezado de Página o Sección

La etiqueta <header> se utiliza para definir la sección de encabezado de una página o de una sección específica dentro de la página. El <header> puede contener el título, logotipo, menú de navegación, y otros elementos introductorios. Es posible tener múltiples encabezados <header> en una página, uno para el encabezado principal y otros para subsecciones.

El uso de <header> ayuda a los motores de búsqueda y tecnologías de asistencia a identificar rápidamente la introducción o propósito de la página o sección. Aquí un ejemplo práctico:

html

<nav>: Navegación

La etiqueta <nav> está diseñada para contener enlaces de navegación y mejorar la experiencia del usuario al desplazarse por la página o el sitio. Dentro de <nav>, generalmente colocamos una lista de enlaces que llevan a diferentes secciones de la página o a otras páginas del sitio.

Es una buena práctica ubicar los elementos de navegación dentro de un <nav>, ya que esto facilita a los motores de búsqueda y tecnologías de asistencia reconocer y presentar adecuadamente los menús de navegación.

html

<section>: Agrupación de Contenido Relacionado

La etiqueta <section> se emplea para agrupar contenido temáticamente relacionado dentro de una página. Es común utilizar <section> para dividir el contenido en partes significativas que puedan incluir su propio encabezado o título.

Una buena práctica es usar <section> cuando el contenido dentro de esta es relevante y puede ser identificado de forma única, como en el caso de secciones de servicios o productos.

html

<article>: Contenido Independiente

La etiqueta <article> está destinada a bloques de contenido que pueden ser distribuidos o reutilizados de manera independiente, como publicaciones de blogs, noticias, o publicaciones en redes sociales. Usar <article> facilita la identificación de contenido autónomo, mejorando su accesibilidad y visibilidad.

Cada artículo puede tener su propio encabezado <header> y pie de página <footer>, proporcionando una estructura clara y coherente para el contenido.

html

<footer>: Pie de Página

La etiqueta <footer> se utiliza para el pie de página, que puede incluir información de contacto, derechos de autor, enlaces a políticas de privacidad, o enlaces adicionales. Es común tener un <footer> principal para toda la página, y también se pueden usar pies de página para secciones individuales o artículos.

El <footer> es una de las primeras secciones donde los visitantes buscan información relevante y detalles de contacto.

html

Ejemplo Completo de Estructura con Elementos Básicos

A continuación, presentamos una estructura HTML completa utilizando todos los elementos semánticos básicos que hemos aprendido. Esta estructura es ideal para una página sencilla de presentación o una página de inicio básica.

html

Conclusión

En este capítulo, hemos profundizado en el uso de los elementos semánticos básicos, como <header>, <nav>, <section>, <article>, y <footer>. Cada uno de estos elementos cumple una función específica, ayudando a organizar el contenido de manera lógica y significativa. Esto no solo hace que la página sea más fácil de entender para los motores de búsqueda y tecnologías de asistencia, sino que también mejora la mantenibilidad del código.

En el siguiente capítulo, aprenderemos sobre los elementos semánticos específicos para el texto, y cómo estos pueden ayudarnos a comunicar el significado del contenido textual de manera precisa.