La nueva Estructura Semántica del HTML5

Con el nacimiento de la última versión de HTML, el llamado HTML5, se introducen una serie de etiquetas nuevas con cierto sentido semántico. Con sentido semántico me refiero a cómo la etiqueta describen el significado de su contenido. Si estás algo familiarizado con las páginas web, te habrás dado cuenta de que en la mayoria de los casos podemos distinguir en casi todas ellas ciertas partes comunes. Una cabecera (no me refiero ahora al head del principio del código Html) que suele estar en la parte alta de las webs y donde se coloca el logotipo, título, descripción y a veces algo de publicidad. También suelen tener un pie de página, con enlaces externos, normas, enlaces legales, mapa de la web y, de nuevo, publicidad. Otras partes comunes suele ser un menú o barra de navegación, etc, etc.

Logotipo de HTML5

Las mentes pensantes del HTML5 han decidido por tanto crear etiquetas para esas y otras nuevas secciones de las páginas web. Etiquetas con cierto significado semántico, es decir, que describan lo que contienen en su interior. Es decirPor ejemplo, se sabe lo que es una cabecera, lo que es un pie, una zona de navegación, etc, y el Html5 propone identificarlas con etiquetas concretas. De este modo, los navegadores sabrán qué partes de una página web son eso, cabeceras, pies de página, partes centrales de contenido, etc, etc y de ese modo podrán dar más importancia a unas u otras.

Hasta ahora soliamos usar las capas o DIVs para todo esto, verdad? Nos bastaba un div con un identificador tipo div id="cabecera" etc. A partir de ahora, si es una cabecera tendrá su etiqueta. Solo usaremos un DIV cuando no exista otra etiqueta más idonea para usar o, cuando pretendamos aplicar un Script o unos estilos CSS a un bloque de contenido al que no es posible aplicar una de esas nuevas etiquetas, oki? Lo veremos con ejemplos, no te preocupes si no me explico bien ;=)

Aunque ahora en muchos casos no usemos divs, sino éstas nuevas etiquetas, no será problema aplicarles estilos css, pues también a esas etiquetas podremos colocarles un id="nombredelestilo" o class="nombredelestilo".

A continuación os voy a detallar cada una de esas nuevas etiquetas y os daré indicaciones sobre cuándo y porqué usar unas u otras. Es algo totalmente novedoso, pero te recomiendo que empieces a usarlas desde ya. Son el futuro y la base para poder aplicar todas las nuevas tecnologías que van a ir cayendo conforme el HTML5 se vaya haciendo más y más fuerte.