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:
Aquí os pongo el listado de elementos 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:
|
1 2 3 |
<header> <!-- Código HTML --> </header> |
Puedes obtener más información y ejemplos en el siguiente post:
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:
|
1 2 3 |
<nav> <!-- Código HTML --> </nav> |
Puedes obtener más información y ejemplos en el siguiente post:
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:
|
1 2 3 |
<section> <!-- Código HTML --> </section> |
Puedes obtener más información y ejemplos en el siguiente post:
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:
|
1 2 3 |
<aside> <!-- Código HTML --> </aside> |
Puedes obtener más información y ejemplos en el siguiente post:
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:
|
1 2 3 |
<article> <!-- Código HTML --> </article> |
Puedes obtener más información y ejemplos en el siguiente post:
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:
|
1 2 3 |
<main> <!-- Código HTML --> </main> |
Puedes obtener más información y ejemplos en el siguiente post:
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:
|
1 2 3 |
<footer> <!-- Código HTML --> </footer> |
Puedes obtener más información y ejemplos en el siguiente post: