📌

Elementos semáticos
Dentro del cuerpo del documento HTML podemos crear distintas secciones con un
significado semántico basado en su funcionalidad.
Esto permite que las tecnologías de ayuda y los lectores de pantalla puedan reconocer
dichas secciones, lo que mejora la optimización y el SEO del sitio web.

Elemento Descripción

Encabezado de la página, contiene una introducción, enlaces de

<header>
navegación, títulos, íconos e información de autoría.
<nav> Conjunto principal de enlaces de navegación dentro del sitio.

Información complementaria y relacionada con el contenido

<aside> principal. Por ejemplo, glosarios, lista de tweets, notas y enlaces
relacionados.
Contenido principal de la página, suele estar dividido en
<main>
secciones y artículos.

Sección temática dentro del documento con un encabezado. Por

<section> ejemplo, capítulos de un post, sección de anuncios o de últimos
artículos publicados, etc.

Contenido independiente y autónomo dentro del documento. Por

<article>
ejemplo, la entrada de un blog o un mensaje de un foro.
<footer> Pie de página del documento.

💡 La principal diferencia entre <section> y <article> es que el primero depende

del contexto, en cambio el artículo es independiente y autónomo.

Elementos semáticos 1