Summary  
This chapter explains how to use HTML5 semantic elements—header, nav, section, article, and footer—to structure and group content within a webpage.

General domain of usage  
Web development

A continuación se muestran los elementos semánticos más comunes y para qué se utilizan.

## Etiqueta `header`
Representa la parte superior de una página web o sección. Generalmente contiene un logotipo, título o enlaces de navegación.

No confundir `header` con `head`. Cumplen funciones diferentes.

Nota

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGEgaHJlZj0iIyI+V2Vic2l0ZSBMb2dvPC9hPgoKICAgICAgPHVsPgogICAgICAgIDxsaT48YSBocmVmPSIjIj5Ib21lPC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlNlcnZpY2VzPC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPkNvbnRhY3Q8L2E+PC9saT4KICAgICAgPC91bD4KICAgIDwvaGVhZGVyPgogIDwvYm9keT4KPC9odG1sPg==

## Etiqueta `nav`
Define un bloque de enlaces de navegación. Frecuentemente ubicado dentro del encabezado.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGEgaHJlZj0iIyI+V2Vic2l0ZSBMb2dvPC9hPgoKICAgICAgPG5hdj4KICAgICAgICA8dWw+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iIyI+SG9tZTwvYT48L2xpPgogICAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlNlcnZpY2VzPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iIyI+Q29udGFjdDwvYT48L2xpPgogICAgICAgIDwvdWw+CiAgICAgIDwvbmF2PgogICAgPC9oZWFkZXI+CiAgPC9ib2R5Pgo8L2h0bWw+

## Etiqueta `section`
Agrupa contenido relacionado en secciones lógicas. Cada sección normalmente debe comenzar con un encabezado.


PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSBoZWFkZXIgY29udGVudCAtLT4KICAgIDwvaGVhZGVyPgoKICAgIDxzZWN0aW9uPgogICAgICA8aDE+Q29tcGFueSB0aXRsZSBvciBicmFuZCBwaHJhc2U8L2gxPgogICAgICA8cD5XZWxjb21lIHRvIG91ciBjb21wYW55LiBXZSBzcGVjaWFsaXplIGluLi4uPC9wPgogICAgPC9zZWN0aW9uPgoKICAgIDxzZWN0aW9uPgogICAgICA8aDI+U2VydmljZXM8L2gyPgogICAgICA8dWw+CiAgICAgICAgPGxpPlNlcnZpY2UgMTwvbGk+CiAgICAgICAgPGxpPlNlcnZpY2UgMjwvbGk+CiAgICAgICAgPGxpPlNlcnZpY2UgMzwvbGk+CiAgICAgIDwvdWw+CiAgICA8L3NlY3Rpb24+CiAgPC9ib2R5Pgo8L2h0bWw+

## Etiqueta article
Representa una pieza de contenido independiente, como una entrada de blog o un artículo de noticias. Útil para que los motores de búsqueda identifiquen el contenido principal.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSBoZWFkZXIgY29udGVudCAtLT4KICAgIDwvaGVhZGVyPgoKICAgIDxzZWN0aW9uPgogICAgICA8IS0tIHNlY3Rpb24gY29udGVudCAtLT4KICAgIDwvc2VjdGlvbj4KCiAgICA8YXJ0aWNsZT4KICAgICAgPGgyPkJsb2cgUG9zdCBUaXRsZTwvaDI+CiAgICAgIDxwPkJsb2cgcG9zdCBjb250ZW50IGdvZXMgaGVyZS4uLjwvcD4KICAgIDwvYXJ0aWNsZT4KICA8L2JvZHk+CjwvaHRtbD4=

## Etiqueta `footer`
Define la parte inferior de una página web o sección. Normalmente contiene texto de derechos de autor, información de contacto o enlaces relacionados.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSBoZWFkZXIgY29udGVudCAtLT4KICAgIDwvaGVhZGVyPgoKICAgIDxzZWN0aW9uPgogICAgICA8IS0tIHNlY3Rpb24gY29udGVudCAtLT4KICAgIDwvc2VjdGlvbj4KCiAgICA8YXJ0aWNsZT4KICAgICAgPCEtLSBhcnRpY2xlIGNvbnRlbnQgLS0+CiAgICA8L2FydGljbGU+CgogICAgPGZvb3Rlcj4KICAgICAgPHA+JmNvcHk7IE15IFdlYnNpdGUuIEFsbCBSaWdodHMgUmVzZXJ2ZWQuPC9wPgogICAgICA8dWw+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlByaXZhY3kgUG9saWN5PC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlRlcm1zIG9mIFNlcnZpY2U8L2E+PC9saT4KICAgICAgICA8bGk+PGEgaHJlZj0iIyI+Q29udGFjdCBVczwvYT48L2xpPgogICAgICA8L3VsPgogICAgPC9mb290ZXI+CiAgPC9ib2R5Pgo8L2h0bWw+

¿Cuál es el propósito principal de la etiqueta `<header>`?

¿Qué etiqueta HTML se utiliza normalmente para definir una sección de enlaces de navegación, como menús o barras de navegación?

¿Cuál es la función principal de la etiqueta `<section>`?

¿Cuándo se debe utilizar la etiqueta `<footer>`?

Domina los conceptos esenciales de HTML para crear contenido web bien estructurado y accesible. Aprende a estructurar documentos utilizando etiquetas, elementos y atributos. Trabaja con confianza con texto, listas, imágenes, audio y video para enriquecer las páginas web. Crea tablas para organizar datos y formularios para la entrada e interacción del usuario. Descubre el HTML semántico para mejorar la accesibilidad y construye estructuras completas y funcionales de sitios web desde cero.

Master the essentials of HTML to build well-structured and accessible web content. Learn how to structure documents using tags, elements, and attributes. Work confidently with text, lists, images, audio, and video to enrich web pages. Create tables for organized data and forms for user input and interaction. Discover semantic HTML to enhance accessibility and build complete, functional website structures from the ground up.

Exploración de Elementos Semánticos en HTML

Etiqueta `header`

Etiqueta `nav`

Etiqueta `section`

Etiqueta article

Etiqueta `footer`

1. ¿Cuál es el propósito principal de la etiqueta `<header>`?

2. ¿Qué etiqueta HTML se utiliza normalmente para definir una sección de enlaces de navegación, como menús o barras de navegación?

3. ¿Cuál es la función principal de la etiqueta `<section>`?

4. ¿Cuándo se debe utilizar la etiqueta `<footer>`?

Exploración de Elementos Semánticos en HTML

Etiqueta header

Etiqueta nav

Etiqueta section

Etiqueta article

Etiqueta footer

1. ¿Cuál es el propósito principal de la etiqueta <header>?