1.1 Etiqueta <header>
Las etiquetas semánticas de HTML5 ayudan a los desarrolladores a crear documentos más estructurados y fáciles de leer, mejorando la accesibilidad y el SEO (optimización para motores de búsqueda). Estas etiquetas proporcionan una descripción más clara de la estructura de la página web y su contenido. A continuación, examinaremos detalladamente las etiquetas semánticas principales.
La etiqueta <header> se usa para representar el encabezado de contenido o una sección. Este elemento generalmente contiene información introductoria, enlaces de navegación, logotipos, encabezados y otros elementos relacionados con la parte superior del contenido.
Ejemplo de uso:
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
Características principales:
- Ubicación: la etiqueta
<header>puede usarse tanto para todo el documento como para secciones individuales, como<article>o<section>. - Contenido: generalmente contiene encabezados, logotipos, elementos de navegación y otros elementos introductorios.
1.2 Etiqueta <footer>
La etiqueta <footer> se usa para representar la parte inferior del contenido o una sección. Este elemento generalmente contiene información del autor, enlaces a documentos relacionados, políticas de privacidad, información de contacto y otros elementos relacionados con la parte inferior del contenido.
Ejemplo de uso:
<footer>
<p>© 2024 My Website</p>
<nav>
<ul>
<li><a href="#privacy">Privacy Policy</a></li>
<li><a href="#terms">Terms of Service</a></li>
</ul>
</nav>
</footer>
Características principales:
- Ubicación: la etiqueta
<footer>puede usarse tanto para todo el documento como para secciones individuales, como<article>o<section>. - Contenido: generalmente contiene información del autor, información legal, enlaces de navegación y otros elementos de cierre.
1.3 Etiqueta <article>
La etiqueta <article> se usa para representar un bloque de contenido independiente que se puede distribuir y reutilizar. Puede ser una entrada de blog, un artículo de noticias, un comentario, una publicación de usuario, etc.
Ejemplo de uso:
<article>
<header>
<h2>Blog Post Title</h2>
<p>Published on July 6, 2024</p>
</header>
<p>This is the content of the blog post. It can include text, images, and other media.</p>
<footer>
<p>Author: John Doe</p>
</footer>
</article>
Características principales:
- Independencia: la etiqueta
<article>se usa para contenido que puede ser utilizado y distribuido de manera independiente. - Estructura: generalmente contiene un encabezado (
<header>), contenido principal y una parte de cierre (<footer>).
Aplicación:
- Artículos
- Entradas de blog
- Noticias
- Comentarios
Ventajas:
- Indica fragmentos de contenido independientes
- Ayuda a los motores de búsqueda y otros servicios a identificar y reutilizar contenido
1.4 Etiqueta <section>
La etiqueta <section> se usa para definir grupos de contenido temáticamente relacionados. Estos pueden ser capítulos, secciones u otras partes grandes del contenido. A diferencia de <div>, que se usa para estilización y agrupación sin significado semántico, <section> tiene un significado semántico claro.
Ejemplo de uso:
<section>
<header>
<h2>About Us</h2>
</header>
<p>This section provides information about our company and its history.</p>
</section>
Características principales:
- Agrupación temática: la etiqueta
<section>se usa para dividir el contenido en grupos temáticos. - Estructura: generalmente contiene un encabezado (
<header>) y contenido principal.
Aplicación:
- Secciones dentro de un artículo
- Grupos de contenido temáticamente relacionados
- Partes de la página que pueden ser destacadas lógicamente
Ventajas:
- Mejora la estructura y legibilidad del documento
- Ayuda a los motores de búsqueda a comprender e indexar mejor el contenido
GO TO FULL VERSION