Logo HTML5
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.