HTML5: Elementos estructurales

Home » Blog » HTML5: Elementos estructurales

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:

Etiquetas estructurales html5

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:

  • article
  • aside
  • main
  • nav
  • section

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:

  • article
  • aside
  • main
  • nav
  • section

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.

Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas

Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.

erlantz rique
erlantz rique
19/02/2024

Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.

Jose Marlasca
Jose Marlasca
06/02/2024

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/2024

Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.

Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024

Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%

Asier Hermoso
Asier Hermoso
03/01/2024

Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita 😉
Un crack!!

itxaso zubia
itxaso zubia
15/12/2023

El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.

Fernando Cózar
Fernando Cózar
02/11/2023