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.
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:
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>.
En HTML 4 la "jerarquía" de los apartados de una página web venía determinada por las etiquetas de título (<h1>, ..., <h6>). La recomendación HTML 5 redefinió el concepto de esquema (en inglés, outline) de una página web, de manera que las secciones de un documento ya no se deberían definir mediante las etiquetas de título, sino mediante las cuatro etiquetas <article>, <section>, <nav> y <aside>. Pero aunque actualmente (mayo de 2022) el concepto de esquema sigue formando parte de la norma HTML, como en realidad ningún navegador lo ha implementado nunca, se recomienda no utilizar el concepto de esquema. Es decir, sí que se recomienda utilizar las etiquetas de secciones introducidas en HTML 5 comentadas en esta lección porque permiten organizar mejor el contenido de las páginas, pero se recomienda mantener la jerarquía de títulos clásica del HTML 4.
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>:
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.
Un elemento <section> puede contener elementos <section>. Las secciones interiores se entienden como subsecciones de la sección exterior.
Un elemento <section> puede contener elementos <article> y viceversa.
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.
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.
Un elemento <article> puede contener otros elementos <article> que están relacionados con el contenido del <article> que los contiene.
Un elemento <article> puede contener elementos <section> y viceversa.
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>.
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 trata de contenido secundario con respecto al elemento que lo contiene.
La imagen siguiente muestra una página con varios elementos <aside>: