La mayoría de los sitios web hoy en día presentan un esqueleto similar: una cabecera, un menú de navegación (o varios), un área principal de contenido, un pie de página, etc. 

Aunque no exista ninguna convención escrita sobre como deben identificarse cada una de estas zonas, los desarrolladores a menudo emplean id's similares para estas zonas.

 

Hasta ahora, todas estas distintas áreas solían ser representadas mediante el elemento genérico <div>, a pesar cubrir fines distintos.

Ahora: HTML 5

HTML 5 nos proporciona nuevos elementos para distinguir cada una de estas áreas: <section>,<article>, <header>, <footer>, <nav> y <aside>.

Esto responde a satisfacer uno de los mayores propósitos de la nueva versión del lenguaje de marcado: separar definitivamente el significado de la presentación del contenido. 

Las nuevas directivas proporcionan un nuevo significado a las áreas de un sitio: un gran paso en la evolución de la web semántica.

 

Section

El elemento <section> representa un documento genérico o una agrupación temática de los contenidos, normalmente con un título.

Ejemplos: capítulos, las distintas páginas con pestañas en un cuadro de diálogo con fichas, las secciones enumeradas de una tesis. La página de inicio de un sitio web podría estar dividida en secciones para separar introducción, noticias, información de contacto.

• este elemento NO es un contenedor genérico, si se va a emplear exclusivamente con propósitos de estilo, es preferible que sea sustituido por un <div>.
• el uso de este elemento permite que el autor pueda utilizar en éste, elementos de encabezado h1, h2, h3, etc. sin importar el orden del último encabezado del nivel superior.

El elemento <article> representa un contenido independiente en un documento, es la forma de separar el contenido principal frente al resto de elementos accesorios de la página. Así, dentro de la portada podríamos tener varios artículos delimitados semánticamente, por lo que una herramienta (bots, arañas, buscadores) puede extraerlos fácilmente.

Ejemplos: las entradas de un blog, las noticias de una revista digital, los mensaje de un foro, un comentario enviado por un usuario.

• En artículos anidados, los elementos del artículo interior representan los artículos relacionadas con los contenidos del artículo exterior. Por ejemplo, los comentarios acerca de un post pueden ser articulos anidados.
• Es buena práctica utilizar el elemento <address> (repescado de versiones anteriores de HTML) para indicar la información de autor del artículo. En el caso de artículos anidados, éstos no heredan la información de autor del artículo padre.
• El atributo pubdate del elemento <time> se puede utilizar para proporcionar información de fecha de publicación del artículo.