ARTÍCULO 33: HTML5. Nuevas etiquetas semánticas. (I)


En este artículo vamos a ver las etiquetas semánticas de HTML5, como HEADER, ARTICLE, SECTION, ASIDE, FOOTER, NAV, FIGURE, TIME, ...

Lo primero que conviene remarcar es que HTML5 no es un lenguaje nuevo en contraposición a HTML, sino una nueva versión del mismo lenguaje. También hay que recordar que HTML5 incorpora cambios en profundidad que los navegadores antiguos no son capaces de mostrar, por lo tanto que hay que tener actualizado el navegador.

Las etiquetas semánticas ayudan a definir la estructura del documento y permiten que las páginas web sean mejor indexadas por los buscadores.

Una etiqueta se califica como semántica si tiene que ver el significado, es decir, si nos informa sobre lo que trata su contenido. Por ejemplo, la etiqueta SECTION nos dice que contiene una sección o capítulo dentro de la página. Frente a las etiquetas semánticas tenemos otros tipos de etiquetas como las que afectan al formato, como UL, a multimedia, como VIDEO, etc.

El esquema de una página con etiquetas semánticas podría ser el siguiente.

Antes de la existencia de las etiquetas semánticas, el contenido se estructuraba con etiquetas DIV que no aportaban ninguna información sobre el tema que trataban, salvo que se añadiese aprovechando el valor dado a la propiedad ID, o a la propiedad CLASS para hacer referencia a su contenido.

Las etiquetas a las que vamos a prestar más atención en este artículo son las que definen la estructura general del sitio ( HEADER, ARTICLE, SECTION, ASIDE, FOOTER, NAV ) aunque también existen otra nuevas etiquetas semánticas que señalan elementos concretos de la página como la etiqueta FIGURE, para imágenes y gráficos, la etiqueta FIGCAPTION, que es un pie de imagen, la etiqueta TIME para definir fechas y horas, también MAIN, MARK, SUMARY Y DETAILS.

Por ejemplo, el código siguiente produce el resultado que se ve a continuación utilizando las etiquetas FIGURE y FIGCAPTION.

<figure>
<img src="graficos/fallas.jpg" alt="The Pulpit Rock" width="499" height="340">
<figcaption>Fig.1 - Falla de la plaza del Ayuntamiento de Valencia.</figcaption>
</figure

"Las fallas son las fiestas de la ciudad de Valencia (España). Una falla es un monumento de madera, pintura y poliestireno que puede llegar a los 30 m. de atura, y que se quema el dia 19 de Marzo."

The Pulpit Rock
Fig.1 - Falla de la plaza del Ayuntamiento de Valencia.