Las etiquetas semánticas de HTML5

HTML5 incorpora un nuevo tipo de etiquetas que sirven para estructurar semánticamente un documento.

picasso

archivado en: HTML/CSS / 4 noviembre, 2012 / taller:

Comienzo con esta entrada una serie dedicada a las novedades que incorpora HTML5, que no son pocas. Una de las más interesantes son las etiquetas semánticas, que sirven para definir mejor qué es cada parte de un documento. Hay varias, pero las más importantes son:

  • <header>
  • <article>
  • <aside>
  • <nav>
  • <footer>
  • <section>

Vamos a ver para qué sirve cada una.

<header>

Lo más normal es emplearla para definir la cabecera de un sitio, lo que en periodismo se conoce como la mancheta, y puede estar formado por imágenes y texto. En este caso es donde hay que incluir el único <h1> que debe llevar una web.

  • <header>
  • <img src="soy_una_imagen.jpg">
  • <h1>Nombre del sitio</h1>
  • <p>Explicación adicional</p>
  • </header>

Además, se puede utilizar en otras partes del documento que necesiten un subencabezado. Por ejemplo, en un blog, podría haber un header en la parte superior, definiendo el título del sitio y su autor, y luego otro en cada artículo.

<article>

Esta etiqueta agrupa todos los elementos que forman una unidad de información, como la entrada de un blog, el artículo de un periódico, la ficha de un producto en un catálogo y puede incluir a su vez header, footer y otras etiquetas semánticas.

  • <article>
  • <header>
  • <h3>Las etiquetas semánticas de HTML5</h3>
  • <p>Soy un sumario formidable</p>
  • </header>
  • <p>Lore ipsum... </p>
  • <footer>
  • <p>Categoría: web 3.0.</p>
  • <p>Tags: html5, CSS </p>
  • </footer>
  • </article>
  • <article>
  • <p> Soy el comentario de Teodosio </p>
  • </article>
  • <article>
  • <p> Soy el comentario de Asdrúbal </p>
  • </article>

  • <header>
  • <h1>Soy una frutería</h1>
  • </header>
  • <article>
  • <header>
  • <h5>Manzanas</h5>
  • </header>
  • <p> Soy una descripción de esas manzanas</p>
  • </article>
  • <article>
  • <header>
  • <h5>Piñas</h5>
  • </header>
  • <p> Soy una descripción de esas piñas</p>
  • </article>

<aside>

Define un fragmento de información secundarias de un <article>, como las notas de un texto o la bibliografía en el caso de un artículo o el precio en el de un producto.

  • <article>
  • // El texto de un artículo
  • <aside>
  • <h5>Bibliografía</h5>
  • Andrómeda Galáctica. La soledad del demiurgo. Cosmoligical Editions.
  • </aside>
  • </article>

Además, se puede usar para agrupar las utilidades complementarias de un sitio, como las que aparecen reunidas en el sidebar aka la barra lateral.

  • <aside>
  • // widget 1
  • // widget 2
  • </aside>
<nav>

Agrupa elementos de navegación principal de un sitio web y es importante destacar lo de principal. No se usa en cada enlace, sino solo para las áreas de navegación más importante, como son:

  • Las barras de navegación
  • El formulario de búsqueda
  • Las breadcrumbs
  • Los botones de anterior / siguiente de una navegación horizontal
  • Etcétera.

Es decir, no hay que ponerla, por ejemplo, en el banner de la cabecera que lleva a la portada, pero sí en la barra de navegación que hay justo después.

  • <nav>
  • <ul>
  • <li><a href="index.html">portada</a></li>
  • <li><a href="/categoria1/">categoría 1</a></li>
  • <li><a href="/categoria2/">categoria 2</a></li>
  • </ul>
  • </nav>

<footer>

La forma más habitual de emplear esta etiqueta es al final del documento,  para agrupar la información que va al pie de la página, como la licencia o los enlaces secundarios (contactar, mapa del sitio)...

  • <footer>
  • <p> Este sitio está con una licencia CC-by-sa</p>
  • <a href="contactar.html">Contactar</a>
  • </footer>

Sin embargo, también se puede añadir más etiquetas footer al final de los article o las section para agrupar otros datos complementarios, como los tags o las categorías de cada entrada en los blogs.

<section>

He dejado para el final esta etiqueta, porque la verdad es que creo que es innecesaria y genera confusión. De hecho, recomiendo que, en caso de no tener muy claro si usarla o no, mejor limitarse a emplear <article>.

En teoría, sirve para definir secciones de un documento. Por ejemplo, en el texto de un artículo con distintos apartados, cada uno podría ir agrupado en una <section>, pero también podría usarse para agrupar <articles>. Veamos un ejemplo de cada caso.

Este sería el uso de <section> dentro de <article>, por ejemplo en un texto periodistíco.

  • <article>
  • <p>Texto primero</p>
  • <section>
  • <h5>Soy un ladillo<h5>
  • <p>Soy un texto complementario</p>
  • </section>
  • </article>

Y ahora fuera de <article> en el caso de un catálogo.

  • <section>
  • <h3>Libros de historia</h3>
  • <article>
  • Soy un libro de historia 1
  • </article>
  • <article>
  • Soy un libro de historia 2
  • </article>
  • </section>
  • <section>
  • <h3>Libros de ciencia</h3>
  • <article>
  • Soy un libro de ciencia 1
  • </article>
  • <article>
  • Soy un libro de ciencia 2
  • </article>
  • </section>

En fin, un lío, y no tengo nada claro que sirva para mucho, sobre todo si vamos a incluir también microdatos.

Hay más que hablar sobre las etiquetas semánticas, sobre todo nos falta por ver cómo hacer que funcionen en la tostadora en el Explorer, pero eso lo trato otro día, que por hoy ya está bien  😆

Abrazos++;

Notas

Principales etiquetas semánticas de HTML5

Tags estructurales aprobados
<article> Define un artículo
<aside> Un contenido complementario
<figure> El contenido que "ilustra" el desarrollo de un texto, como una imagen, una lista, un esquema, un ejemplo de código...
 <figcaption> El pie o leyenda de <figure>
 <footer> El pie de un documento o sección
<header> La cabecera de un documento o sección
<nav> Elementos de navegación
<section> Sección de un documento
<wbr> Posible línea de ruptura (ej. para imprimir)
Tags semánticos de texto
<bdi> Fragmento de texto que se formatea en dirección contraria al resto (ej. cita en árabe)
<mark> Texto destacado (resaltado)
 <ruby> Caracteres ideogramáticos ruby
<rt> Define la pronunciación de caracteres ruby
<rp> Alternativa si el navegador no interpreta caracteres ruby
Tags semánticos en fase de estudio (de dudosa aprobación)
<details> Detalles adicionales
<summary> Cabecera de <details>
<command> Comandos (ej. botones de un formulario)
<hgroup> Conjunto de elementos de cabecera (<h1>, <h2>...)

|| Tags: ,

valoración de los lectores sobre Las etiquetas semánticas de HTML5

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4 sobre 5 (18 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

5 respuestas a “Las etiquetas semánticas de HTML5