Las nuevas etiquetas semánticas de estructura HTML5

Recopilación y listado de las nuevas etiquetas semánticas de estructura HTML5. Estas nuevas etiquetas ayudan o sirven para agrupar cada tipo de contenido HTML de nuestra web.

Antes de listarlas veamos en la siguiente imagen su jerarquía:

Etiquetas semánticas de estructura HTML5

Ahora listamos las etiquetas para posteriormente hacer un breve resumen de cada una de ellas:

• header
• nav
• section
• aside
• article
• main
• footer

Aquí os pongo el listado de elementos obsoletos en HTML5:

• Lista de elementos y atributos obsoletos en HTML5

Etiqueta header HTML5

Contiene la agrupación de código HTML correspondiente a la cabecera de la web o referencia descriptiva de artículos.

Su sintaxis es:

<header>
<!-- Código HTML -->
</header>

Puedes obtener más información y ejemplos en el siguiente post:

• Etiqueta header HTML5: Indicar el código HTML de la cabecera

Etiqueta nav HTML5

Nos sirve para definir el conjunto de código HTML de un menú de navegación, solamente contiene enlaces a las diferentes secciones de la web.

Su sintaxis es:

<nav>
<!-- Código HTML -->
</nav>

Puedes obtener más información y ejemplos en el siguiente post:

• Etiqueta nav HTML5: Definir un menú de navegación

Etiqueta section HTML5

Sirve para definir en una sección la agrupación temática del contenido de una página web.

Su sintaxis es:

<section>
<!-- Código HTML -->
</section>

Puedes obtener más información y ejemplos en el siguiente post:

• Etiqueta section HTML5: Definir una sección o agrupación temática

Etiqueta aside HTML5

Define una sección de la web donde el contenido no tiene que estar necesariamente relacionado con el contenido principal de la web. Generalmente suelen ser barras laterales o sidebars de una web (Plugins sociales, publicidades…).

Su sintaxis es:

<aside>
<!-- Código HTML -->
</aside>

Puedes obtener más información y ejemplos en el siguiente post:

• Etiqueta aside HTML5: Una sección con contenido no relacionado

Etiqueta article HTML5

Esta etiqueta nos ayuda a definir un contenido específico dentro de una web y que por si solo tiene sentido. Un código independiente y con sentido puede ser:

• Mensajes de un foro.
• Comentarios.
• Artículos de periódicos, revistas y blogs.
• Widget y similares.

Su sintaxis es:

<article>
<!-- Código HTML -->
</article>

Puedes obtener más información y ejemplos en el siguiente post:

• Etiqueta article HTML5: Definiendo el contenido específico de una web

Etiqueta main HTML5

Sirve para definir el contenido principal o más destacado de una url. Solo puede haber una etiqueta main.

Dentro de esta nueva etiqueta HTML5 tenemos que tener elementos tales como: cabecera de la web, menú de navegación, información legal de la web, pie de página, barras laterales…

Su sintaxis es:

<main>
<!-- Código HTML -->
</main>

Puedes obtener más información y ejemplos en el siguiente post:

• Etiqueta main HTML5: Definir el contenido principal de una web

Etiqueta footer HTML5

Contiene la agrupación de código HTML correspondiente al pie de página que suelen tener habitualmente todas las webs. Muy parecida a la etiqueta header.

Su sintaxis es:

<footer>
<!-- Código HTML -->
</footer>

Puedes obtener más información y ejemplos en el siguiente post:

• Etiqueta footer HTML5: Fijar el pie de página de una web