ETIQUETAS HTLM5


HTML5 es la nueva versión del lenguaje que describe páginas web. Todavía no está estandarizado, están en ello, pero todos los navegadores, en sus últimas versiones soportan la mayor parte de sus características. Vamos a hacer una serie de artículos describiendo sus novedades y protocolos nuevos relacionados.

Hoy vamos a ver lo más básico y es el ejemplo más habitual de HTML5, sus nuevas etiquetas. En HTML4, una vez que se abandonó el desastroso sistema de marcos, todo se maqueta usando divs. Esto hace que tengamos una cantidad ingente y anidada de divs en cada página. Un div general, con otro para centrar el contenido, uno para cabecera, que dentro tiene otro para el menú, uno lateral para la barra de navegación, uno para el contenido principal, uno más por cada sección y subsección, el pié es otro,... No es difícil tener más de 30 divs en una página. Esto hace que sea difícil señalar que partes de nuestra página significan una cosa y cuales otra, al menos de cara a los robots de los buscadores. Y también es un jaleo a la hora de retocar el código. ¿Cómo llamé al div que es la cabecera de cada mensaje, “cabeceraMensaje”, “MensajeHeader”, “cabMensaje”,...? Y buscar por etiquetas se hace difícil si tienes decenas de divs.

HTML5 nos aporta nuevas etiquetas para que el código gane en sentido semántico. De forma práctica se comportan igual que un div, es un trozo de página donde vamos a poner algo, pero el código de la web queda más organizado, siendo más sencillo modificarlo, y siendo mucho más significativo para que los buscadores indexen mejor el contenido del sitio.

Aunque no son todas, las principales son:

<header>: Esta etiqueta define un encabezado. Se puede usar varias veces. Por ejemplo un header que defina el encabezado de la página, pero también otro para poner el título de cada mensaje en un tablón de anuncios.
<footer>: Equivalente al encabezado, pero para el pie.
<article>: Define un artículo. Se puede referir a una parte de nuestra web, donde esté por ejemplo el texto de una entrada de un blog, o el contenido de una noticia.
<section>: Es una etiqueta similar a article, para definir una sección de la web. Se pueden definir secciones dentro de artículos y artículos dentro de secciones. Por ejemplo que cada entrada de un blog sea una sección y el cuerpo de cada blog sea un artículo, o la descripción de un producto que es un artículo, y que está dividida en varias secciones como presentación, datos técnicos, galería,...
<nav>: Para los elementos de navegación. Así indicamos que dentro vamos a colocar un menú, lista de enlaces a artículos o similares.
<sidebar>: Para definir secciones laterales. Es muy común en las páginas tener contenido en columnas a izquierda o derecha, esta es la etiqueta para definiarlas.
<aside>: También define un contenido lateral, pero está relacionado con un elemento concreto de otra parte de la página. Por ejemplo para mostrar lateralmente los comentarios de usuarios ante una entrada, amigos de un usuario del que estás viendo su perfil,... Siempre es una extensión de información de un elemento mostrado en la parte principal de la web.

Y la gran pregunta es ¿Y cuando empezamos a usar las nuevas etiquetas? Y la respuesta es: ¡Ya!.

Usar HTML5 es tan sencillo (sobre todo comparando con lo largo que era el de HTML4) como definir el tipo de documento como:

<!DOCTYPE html>

Lo bueno es que si el navegador no reconoce este tipo de documento, cambia al modo por defecto (seguramente HTML4), pero muestra bien y sin errores el contenido de la página.

Estas etiquetas están definidas hace varios años y la mayoría de navegadores las entienden desde hace tiempo. El único que nos puede dar problemas es el Internet Explorer, al menos las versiones anteriores a la 9. Pero la solución es muy sencilla, detectamos el navegador del cliente y si fuera un IE antiguo, definimos las nuevas etiquetas. Lo muestra bien, como si fueran divs, pero en nuestro código sigue existiendo esa organización semántica del contenido. El trozo de código para que funcione en Explorer es:

<!--[if lt IE 9]>
<script type=”text/javascript”>
            document.createElement(“header”);
            document.createElement(“footer”);
            document.createElement(“article”);
            document.createElement(“section”);
            document.createElement(“aside”);
            document.createElement(“sidebar”);
            document.createElement(“nav”);
</script>
<![endif]-->

El HTML5, aunque no esté todavía estandarizado, ya es el presente. Los navegadores lo soportan, muchas de las páginas web más importantes lo utilizan y deberíamos incorporarlo a nuestros diseños ya.