¿Cómo dividir semánticamente el contenido en una página?

La separación semántica del contenido se logra mediante el uso de las etiquetas HTML5 correspondientes.

Etiquetas semánticas principales:

• <header>: Introducción o grupo de elementos de navegación o introducción. A menudo contiene el título del sitio, navegación, logotipo.
• <nav>: Bloque de enlaces de navegación.
• <main>: Contenido principal del documento. Debe ser único en la página (no duplicarse en el pie de página, encabezado, barra lateral).
• <article>: Fragmento de contenido autosuficiente e independiente (artículo, publicación en blog, comentario).
• <section>: Sección separada del documento (capítulo, párrafo, bloque de contenido en la página principal). Debe tener un encabezado (<h1>-<h6>).
• <aside>: Parte del contenido relacionada indirectamente con el contenido principal (barra lateral, inserto con cita, publicidad).
• <footer>: Pie de página de la sección o documento. Generalmente contiene información sobre el autor, derechos de autor, enlaces a documentos relacionados.
• <figure>: Contenido independiente (imagen, diagrama, tabla) que puede ser movido fuera del flujo principal del documento sin perder su significado. Se usa a menudo con <figcaption>.
• <figcaption>: Pie de foto para el elemento <figure>.
• <mark>: Resalta (marca) el texto que tiene un significado o interés especial en el contexto del texto circundante.
• <time>: Representa un momento o intervalo de tiempo específico.

El uso de etiquetas semánticas mejora la accesibilidad, SEO y el mantenimiento del código. Los motores de búsqueda y tecnologías asistivas (lectores de pantalla) comprenden mejor la estructura de la página.