Secciones
Elemento <div>
El elemento <div> se usa para marcar divisiones y agrupar otros elementos en secciones, tanto para organizar el contenido como para posicionarlo mediante hojas de estilo CSS.
<div>
<div>Sección 1</div>
<div>Sección 2</div>
</div>
Etiquetas semánticas
En HTML5 aparecieron varias etiquetas semánticas para estructurar el contenido de la página y, por tanto, solo se debería usar <div> cuando no haya una etiqueta más apropiada.
Un ejemplo utilizando etiquetas semánticas:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5</title>
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<section>
<article></article>
</section>
<aside></aside>
</main>
<footer></footer>
</body>
</html>
La siguiente imagen muestra una disposición posible para estos elementos. Para obtenerla, hay que usar CSS.
Elemento <header>
El elemento <header> contiene la cabecera con contenido introductorio para la sección de la página en que aparece.
Representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre de autor y otros componentes.
Es habitual que contenga los elementos de encabezado (<h1> ... <h6>).
Elemento <aside>
El elemento <aside> se utiliza para contenido parcialmente relacionado con el contenido principal.
Estas secciones son a menudo representadas como barras laterales o como inserciones y contienen una explicación al margen como una definición de glosario, elementos relacionados indirectamente, como publicidad, la biografía del autor, o en aplicaciones web, la información de perfil o enlaces a blogs relacionados.
No tiene por qué mostrarse en un lateral.
Elemento <footer>
El elemento <footer> representa un pie de página para el contenido de sección más cercano o el elemento raíz de sección.
Un pie de página típicamente contiene información acerca del autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.
No tiene por qué mostrarse al final.
Elemento <section>
El elemento de HTML <section> representa una sección genérica de un documento. Sirve para determinar qué contenido corresponde a qué parte de un esquema.
Pensemos en el esquema como en el índice de contenido de un libro: un tema común y subsecciones relacionadas. No se debe usar el elemento <section> como un mero contenedor genérico. Para esto, ya existe <div>, especialmente si el objetivo solamente es aplicar un estilo CSS a la sección.
Elemento <article>
El Elemento article de HTML <article> representa una composición autocontenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la indicación.
Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro elemento independiente del contenido.
Elemento <nav>
El elemento <nav> representa una sección de una página cuyo propósito es proporcionar enlaces de navegación, ya sea dentro del documento actual o a otros documentos.
Ejemplos comunes de secciones de navegación son: menús, tablas de contenido e índices.