Secciones

Las secciones son las partes temáticas en las que se puede dividir el contenido de una página web.

En HTML 4 / XHTML 1 la única etiqueta para definir agrupaciones de contenido era prácticamente la etiqueta <div>. Por ello, cualquier página de tamaño medio acababa teniendo muchos elementos <div>, en algunos casos para organizar el contenido de la página, pero también para aplicar estilos de carácter decorativo. El código fuente resultaba así difícil de entender y mantener.

La imagen siguiente muestra una página típica HTML 4 / XHTML 1, en la que para organizar las diferentes partes de la página se tenían que crear varias divisiones <div> y distinguirlas mediante clases para darles estilos diferenciados.

body div class="cabecera" div class = "menu" div class="contenido" div class="apartado" div class="apartado" div class="apartado" div class="pie"

En HTML 5 se ha querido mejorar esa situación introduciendo varias etiquetas para definir diferentes tipos de secciones: <article>, <section>, <nav>, <aside>, <header> y <footer> (y también la etiqueta <main>, aunque esta no se considere una etiqueta de sección sino de bloque).

La página del ejemplo anterior se convertiría así en:

body header nav main section section section footer

Al utilizar etiquetas específicas para tipos de contenido específico, se mejora la legibilidad y facilidad de reutilización tanto del código HTML como de las hojas de estilo.

La etiqueta <div> se mantiene en la recomendación HTML 5, pero reservada ya al resto de agrupaciones no consideradas por las etiquetas anteriores, es decir, con fines principalmente decorativos.

Nota: Para simplificar las ilustraciones, en los ejemplos del resto de esta página no se ha dibujado la etiqueta <body>.

Secciones y esquema (outline) del documento

Entre las etiquetas que se comentan en esta página, cuatro de ellas (<article>, <section>, <nav> y <aside>) tienen un significado especial ya que representan secciones en el esquema (outline) de la página web, como se explica más detalladamente en la lección sobre esquemas.

En estas cuatro etiquetas se pueden incluir elementos <header>, <footer> o títulos <h1>, ..., <h6>, que se entenderán que son encabezados, pies o página o títulos del elemento en el que se incluyen, en vez de a la página en su conjunto.

Cuerpo del documento: <body>

La etiqueta <body> abarca toda la página web. Por ello, en una página web sólo puede haber un elemento <body>.

Encabezamiento: <header>

La etiqueta <header> está pensada para agrupar el contenido inicial de una página web. Puede contener únicamente los elementos que aparecen en las páginas de un sitio (el logotipo y un menú general, por ejemplo) o incluir también elementos particulares de la página (el título principal <h1> de la página, enlaces de navegación dentro de la página, texto de introducción, por ejemplo).

El elemento <header> puede estar incluido en <body> y entonces se entiende que es el encabezado de la página en su conjunto, pero también se puede incluir en <article>, <section>, <nav> y <aside> y entonces se entiende que es el encabezado del elemento que lo contiene.

La imagen siguiente muestra una página con varios elementos <header>:

header nav header main article header article header aside header footer

Navegación: <nav>

La etiqueta <nav> está pensada para agrupar los enlaces a otras páginas o los enlaces a los apartados de la propia página.

Una página puede contener varios elementos <nav>, aunque no es necesario que todos los grupos de enlaces estén en elementos <nav> (por ejemplo, los enlaces de contacto que se suelen incluir en el elemento <footer> no requieren el uso de <nav>).

La imagen siguiente muestra una página con tres elementos <nav>:

header nav nav main aside nav footer

Sección: <section>

La etiqueta <section> está pensada para agrupar los apartados del contenido principal del documento. Normalmente, las secciones <section> empiezan con un título (<h1>, <h2>, etc.) que hace referencia al tema tratado en la sección.

main section h1 h2 section h1 h2

Un elemento <section> puede contener elementos <section>. Las secciones interiores se entienden como subsecciones de la sección exterior.

main section section section section section section

Un elemento <section> puede contener elementos <article> y viceversa.

main section article article article section section

Las etiquetas <section> y <article> son similares. La diferencia entre ellas es que <article> es para partes que forman una unidad en sí mismas y <section> es para partes de una unidad mayor.

Artículo: <article>

La etiqueta <article> está pensada para agrupar el contenido de la página que forma una unidad en sí misma desde el punto de vista temático. Es decir, que un artículo debería poder publicarse y leerse como documento independiente, aunque una página puede estar formada por varios artículos de temática relacionada o no.

main article h1 h2 article h1 h2

Un elemento <article> puede contener otros elementos <article> que están relacionados con el contenido del <article> que los contiene.

main article article article article article article

Un elemento <article> puede contener elementos <section> y viceversa.

main article section section section article article

Las etiquetas <article> y <section> son similares. La diferencia entre ellas es que <article> es para partes que forman una unidad en sí mismas y <section> es para partes de una unidad mayor.

Si la página trata de un único tema y se va a utilizar un único elemento <article>, es preferible utilizar la etiqueta <main>.

Títulos: <h1> <h2> <h3> <h4> <h5> <h6>

Las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6> están pensadas para marcar los títulos y subtítulos de los apartados de un documento.

La hoja de estilo por omisión de los navegadores suele mostrar los títulos en tamaño cada vez más pequeño (incluso más pequeño que el tamaño de los párrafos <p>), en negrita y con márgenes mayores que los los párrafos <p>.

<h1>Título 1</h1>

<h2>Título 2</h2>

<h3>Título 3</h3>

<h4>Título 4</h4>

<h5>Título 5</h5>

<h6>Título 6</h6>

Título 1

Título 2

Título 3

Título 4

Título 5
Título 6

En principio, los títulos <h1>, ..., <h6> se deben utilizar de forma jerárquica, es decir, no saltándose niveles y utilizando títulos del mismo nivel para contenido de la misma categoría (apartados principales, subapartados, etc.).

Como se explica con más detalle en la lección sobre el esquema (outline) de una página web, los títulos <h1>, ..., <h6> definen de forma implícita secciones anidadas en el esquema (outline) de la página web, como muestra el ejemplo siguiente, en el que las secciones implícitas están marcadas con un trazo discontínuo.

h1 h2 h3 h2 h3

Pero como las etiquetas de secciones <article>, <section>, <nav> y <aside> también crean secciones en el esquema de la página web, las etiquetas de título se deben interpretar teniendo en cuenta la sección en que están incluidas. Así, el documento siguiente sería equivalente al anterior.

h1 section h1 section h4 section h6 section h1

¡Atención!Actualmente (noviembre de 2016) ningún navegador ha incluido algoritmos para analizar el esquema (outline) de una página web, aunque el validador del W3C sí que lo hace. Por ello, la recomendación HTML 5.1 (publicada en noviembre de 2016) aconseja a los autores de páginas web seguir indicando la estructura de la página mediante las etiquetas de título <h1>, ..., <h6> (véase el aviso en la propia recomendación).

Lateral: <aside>

La etiqueta <aside> está pensada para agrupar contenido secundario y tangencial al contenido al que acompaña (por ejemplo, un bloque de anuncios, un grupo de enlaces externos relacionados, una cita del texto). Normalmente se suele mostrar en los lados del documento.

El elemento <aside> puede estar incluido en <body> y entonces se entiende que se trata de contenido secundario con respecto a la página en su conjunto, pero también se puede incluir en <article> o <section> y entonces se entiende que se rata de contenido secundario con respecto al elemento que lo contiene.

La imagen siguiente muestra una página con varios elementos <aside>:

header nav main article aside article aside aside footer

Dirección <address>

La etiqueta <address> está pensada para contener información de contacto del autor de la información. Normalmente se incluye en el pie de página <footer> general de <body> o en el pie de página <footer> de un <article>.

header nav main article footer address article footer address aside footer address

La hoja de estilo por omisión de los navegadores suele mostrar el bloque de dirección <address> en cursiva.

<address>Autor: Bartolomé Sintes Marco<br />
Última modificación: 21 de noviembre de 2015</address>
Autor: Bartolomé Sintes Marco
Última modificación: 21 de noviembre de 2015