Los elementos semánticos son aquellos que tienen un significado, es decir, que describen claramente el propósito de su contenido. Estos elementos son de gran utilidad a la hora de estructurar un documento HTML o página web, permitiendo crear divisiones de parte de una web con valor añadido.
La inclusión de los elementos semánticos llegó con la versión HTML5. En las versiones anteriores se usa sobretodo el elemento <div> —que no describe nada acerca de su contenido― para crear todo tipo de divisiones o regiones. Actualmente se recomienda usar los elementos semánticos cuando sea posible.
Lista de elementos descritos en este artículo:
| Elemento | Descripción |
|---|---|
<section> | Para crear secciones de una web. |
<nav> | Para especificar un menú de navegación. |
<header> | Para definir la cabecera. |
<footer> | Para definir el pie de página. |
<main> | Para definir el contenido principal. |
<article> | Para indicar secciones de contenido. |
<aside> | Para definir una barra lateral. |
<figure> | Para representar contenido gráfico. |
<figcaption> | Para describir el contenido de <figure>. |
<hgroup> | Para agrupar titulares consecutivos. |
Definir secciones: elemento <section>
El elemento <section> permite definir secciones genéricas de un documento HTML o página web. Una sección es una agrupación temática de contenido, normalmente con una cabecera. Se utiliza para indicar qué contenido corresponde a una parte concreta de la estructura principal del documento.
Este elemento tiene dos etiquetas: <section> (de apertura) y </section> (de cierre). El contenido que debe ir entre estas dos etiquetas puede ser cualquier tipo de contenido dinámico. Además, este elemento no debe estar dentro del elemento <address>, es decir, que no puede ser descendiente.
Definir menús: elemento <nav>
El elemento <nav> permite definir una región de un documento HTML con el objetivo de proveer un menú de navegación. El menú contendrá enlaces que faciliten la navegación en la web en general. Por ejemplo, el menú superior, el menú lateral y el menú inferior de este sitio web utilizan este elemento.
Se trata de un elemento con dos etiquetas para abrir (<nav>) y cerrar (</nav>) el contenido. El contenido más habitual de este elemento es una lista no ordenada (<ul>) con los enlaces deseados. Pero conviene señalar que no es necesario que todos los enlaces estén dentro de este elemento.
Definir la cabecera: elemento <header>
El elemento <header> permite definir la cabecera del documento HTML o página web. En él se colocarán los elementos visibles en la parte superior, como sería el caso del menú de navegación, un logotipo, un formulario de búsqueda, datos de contacto (teléfono o correo electrónico), etc.
También se trata de un elemento con dos etiquetas: <header> para marcar el inicio de la cabecera, y </header> para marcar su cierre. Este elemento no debe contener ninguna otra cabecera ni ningún pie de página (<footer>). Si se declara dentro de <article> representará la cabecera del artículo en cuestión.
Definir el pie de página: elemento <footer>
El elemento <footer> es el que permite definir el pie de página de un documento o sitio web. Este elemento es utilizado normalmente para añadir información general sobre el sitio web, enlaces de temas legales —política de privacidad, política de cookies, términos de uso, derechos de autor—, o datos de contacto.
También tiene dos etiquetas: <footer> (de apertura) y </footer> (de cierre). Este elemento puede contener todo tipo de contenido dinámico, excepto otro elemento <footer> o un elemento <header>. Si se declara dentro de <article> o <section> representará un pie de página de esta región en concreto.
Definir el cuerpo principal: elemento <main>
El elemento <main> es utilizado para definir el contenido principal del documento HTML. En él se incluirán los temas centrales de la página, es decir, todo lo que no sean anuncios, secciones, menús… Sólo puede haber un elemento <main> en el documento. Su contenido será único y no se encuentra en otras páginas.
Este elemento tiene dos etiquetas para indicar el inicio (<main>) y final (</main>) del contenido principal de la página. No debe ser descendiente de los elementos siguientes: <article>, <aside>, <header>, <footer> y <nav>. Puede contener todo tipo de contenido dinámico.
Definir el artículo: elemento <article>
El elemento <article> representa el contenido de un artículo dentro de un documento HTML o página web. Puede ser el artículo de un blog, un artículo educativo como el presente, un comentario o un mensaje de un foro. Normalmente se trata de contenido que se puede distribuir en la sindicación de contenidos RSS.
Este elemento también tiene dos etiquetas: <article> (de apertura) y </article> (de cierre). Puede contener todo tipo de contenido dinámico y no puede ser descendiente de <address>. Cuando un <article> se encuentra dentro de otro representa contenido relacionado con el artículo ascendiente.
Definir una barra lateral: elemento <aside>
El elemento <aside> tiene la finalidad de definir una barra lateral. Las barras laterales son secciones de un documento que contienen información relacionada con el contenido principal del documento. Por ejemplo, en este sitio usamos el elemento <aside> para enlazar los artículos de un mismo curso.
Para crear una barra lateral debe usarse sus dos etiquetas de apertura y cierre, <aside> y </aside>, respectivamente. Puede contener contenido dinámico y no puede ser descendiente de <address>. Es importante que su contenido guarde relación con el contenido principal del documento o página web.
Representar contenido gráfico: elemento <figure>
El elemento <figure> representa contenido independiente que puede contener imágenes, diagramas, ilustraciones, tablas o fragmentos de código. Su contenido está relacionado con el contenido principal de la página, pero podría independizarse a otra página sin que afecte al flujo del contenido principal.
Este elemento tiene dos etiquetas: para indicar el comienzo de la figura (<figure>) y su cierre (</figure>). Puede contener todo tipo de contenido dinámico —imágenes (<img>), párrafos (<p>), código (<code>), citas (<cite>)— y una descripción mediante el elemento <figcaption>.
Describir contenido gráfico: elemento <figcaption>
Con el elemento <figcaption> se añade una descripción, subtítulo o leyenda asociado al contenido del elemento <figure>. Se trata de un elemento opcional, por lo tanto, no todas las figuras deben tener una descripción. Sólo puede haber una descripción dentro del elemento <figure>.
Este elemento también tiene dos etiquetas obligatorias para indicar la apertura y el cierre de la descripción: <figcaption> y </figcaption>, respectivamente. Puede contener todo tipo de contenido dinámico, y es importante que esté situado dentro del elemento <figure> al que está asociado.
Agrupar encabezados consecutivos: elemento <hgroup>
El elemento <hgroup> se utiliza para agrupar encabezados o titulares que se encuentren anidados de forma consecutiva, es decir, sin otro contenido que los separe. Por ejemplo, se puede agrupar un encabezado <h1> con un encabezado <h2>. En resumen, este elemento permite asociar títulos.
Las etiquetas de inicio y fin del elemento son obligatorias: <hgroup> y </hgroup>. El contenido de este elemento deben ser elementos de encabezado, que van desde el <h1> hasta el <h6>. Los encabezados deberán tener un orden numérico consecutivo, tal y como se detalla en el artículo que los describe.
<hgroup>
<h1>Desarrollo web</h1>
<h2>HTML</h2>
</hgroup>
