Los elementos estructurales de HTML5 están cobrando una relevancia cada vez mayor, y no solo para el diseño web, sino que para poder ganar posiciones en los buscadores son cada vez más importantes. Estos motores cada vez son más inteligentes, pero necesitan entender la relevancia del contenido y les podemos ayudar etiquetando las cosas correctamente. Las etiquetas nuevas son:
DIV
Es un elemento clásico y se debe usar para agrupar contenido en bloques o capas y poder aplicarle un estilo o una ubicación a todo el conjunto, por ejemplo si queremos que este alineado a la derecha. Esta etiqueta, por si sola, no genera ningún diseño ni estructura, así que hay que combinarla con reglas de CSS. Antes de usar esta etiqueta hay que evaluar si es más oportuno usar las etiquetas que veremos a continuación.
SPAN
Se usa para agrupar contenido dentro de un párrafo por ejemplo si queremos dar diseño especial a un trozo de texto dentro de un párrafo.
HEADER
Es una etiqueta nueva (de html5) y permite definir cabeceras dentro de una página. En realidad pueden existir varias cabeceras, 1 la principal de la página donde se ubicara la navegación, logotipo, h1, etc. Pero por ejemplo, en los artículos (etiqueta article) es posible que tengan su propia cabecera con sus h2, por ejemplo.
Eso sí, solo podemos tener un header en el elemento body o 1 por cada elemento:
articleasidemainnavsection
FOOTER
Es muy similar a la anterior solo que para el pie de página. Dentro del body se usa para definir la parte final de cada página, con copyright, y con diferentes páginas… como el header dentro de un article puede existir un footer como por ejemplo con un enlace o información del copyright del artículo en cuestión.
Eso sí, solo podemos tener un footer en el elemento body o 1 por cada elemento:
articleasidemainnavsection
SECTION
ES otro elemento nuevo de HTML5 y se ha creado sobre todo para evitar el uso excesivo de divs. Se debe usar para dividir un documento en diferentes secciones como por ejemplo una sección de noticias y otra de productos que a su vez está separado en header, div y footer.
Si tenemos varios elementos de este tipo (algo muy frecuente) es recomendable usar aria-labelledby para identificarlas, por ejemplo:
<main> <h1>Título principal<h1> <section aria-labelledby="seccion1"> <h2 id="seccion1">Título sección 1</h2> <p>Contenido</p> </section> <section aria-labelledby="seccion2">> <h2 id="seccion2">Título sección 2</h2> <p>Contenido</p> </section> </main>
NAV
Se usa para marcar una zona de enlaces como puede ser el menú principal, o los del sidebar (laterales) o del footer. Podemos tener un nav dentro de header, footer, section, y article.
Si tenemos varios elementos de este tipo es recomendable usar aria-labelledby para identificarlas, por ejemplo:
<nav aria-labelledby="nav1">
<h2 id="nav1">Menú navegación 1<h2>
<ul>
<li><a href="x.html">Enlace 1</a></li>
<li><a href="x.html">Enlace 2</a></li>
<li><a href="x.html">Enlace 3</a></li>
<li><a href="x.html">Enlace 4</a></li>
</ul>
</nav>
<nav aria-labelledby="nav2">
<h2 id="nav2">Menú navegación 2<h2>
<ul>
<li><a href="x.html">Enlace 5</a></li>
<li><a href="x.html">Enlace 6</a></li>
<li><a href="x.html">Enlace 7</a></li>
<li><a href="x.html">Enlace 8</a></li>
</ul>
</nav>
Si los menús se repiten, por ejemplo en el lateral (sidebar) y en el footer, la etiqueta aria-labelledby debe tener el mismo nombre, porque son el mismo menú.
ARTICLE
Los articles son bloques de información, como si fuesen entradas de un blog, pero no tienen que ser noticias, pueden ser servicios, productos, enlaces con otras páginas, etc. La idea es que dentro de 1 sectión haya diferentes articles, agrupados por que así tiene más lógica.
HGROUP
Si se da el caso que tenemos varios encabezados seguidos, debemos agruparlos con esta etiqueta.
FIGURE
Si tenemos imágenes con título, descripción, copyright, etc. Debemos agrupar todo el contenido relacionado con esa imagen con esta etiqueta.
ASIDE
En ocasiones cuando en una página estamos hablando sobre un tema, surge la necesidad de aclarar algo que no está directamente relacionado con el resto, para eso debe usarse esta etiqueta. Habitualmente se usa para establecer los sidebars – laterales, que son contenido más general.
Si tenemos varios elementos de este tipo es recomendable usar aria-labelledby para identificarlas, por ejemplo:
<aside aria-labelledby="sidebar1"> <h2 id="sidebar1">Título sidebar</h2> <p>Contenido sidebar</p> </aside> <aside aria-labelledby="sidebar2"> <h2 id="sidebar2">ítulo sidebar</h2> <p>Contenido sidebar</p> </aside>
MAIN
Se usa para establecer el bloque principal de la página, es el contenido en el que se debe explicar de qué trata la página que estamos viendo, y dentro pueden existir etiquetas como: header, section, footer, article, etc.
Si tenemos varios elementos de este tipo es recomendable usar aria-labelledby para identificarlas, por ejemplo:
<main aria-labelledby="title1"> <h1 id="sidebar1">Título 2</h1> <p>Contenido principal</p> </aside> <aside aria-labelledby="title2"> <h1 id="sidebar2">Título 1</h1> <p>Contenido principal</p> </aside>
FORM
Se usa para marcar un formulario.