HTML 5 HTML5, la ltima versin del Lenguaje de Marcado de Hipertexto (HTML) 5, es la revisin ms radical del lenguaje hasta la fecha.

Con esta versin se introducen nuevas caractersticas en una variedad de reas. Algunas de las adiciones ms notables son: Las etiquetas multimedia para audio y video con soporte a distinto cdec. La etiqueta canvas para dibujar contenido en el navegador (2D y 3D). Formularios ms inteligentes que nos permitirn hacer cosas como validacin de llenado mediante el uso de atributos requeridos, a travs de los nuevos tipos email, number, url, datetime, etc. APIs que permiten Arrastrar y Soltar objetos como imgenes, trabajar Off-Line, utilizar Geoposicionamiento, Almacenamiento persistente con base de datos local, Websockets y ms. Con un nuevo conjunto de etiquetas estructurales, HTML5 actualiza la forma en que los documentos HTML estn estructurados. Estas nuevas etiquetas estructurales se enfocan en dividir un documento HTML en partes lgicas, cuyo nombre de etiqueta es descriptivo del tipo de contenido que est destinado a tener. En este artculo, conoceremos un poco ms de la historia de HTML5; pues si bien el futuro esta en el navegador (lo dice la imagen), es esencial conocer su pasado para entender el presente e intuir su futuro...

La historia de HTML5
Tim Berners-Lee cre el HTML original en 1989 para hacer frente a algunas deficiencias en los mtodos existentes de acceso a la informacin en internet. Desde su concepcin, buscar un sendero alrededor de internet fue una tarea difcil. El contenido de internet se trataba como documentos individuales, sin ningn mtodo de acceso sencillo para navegar entre ellos. Uno bsicamente tena que conocer las direcciones de los documentos que se estaban buscando y entrar en ellos a mano. Para solucionar este problema, Berners-Lee cre dos tecnologas: El HTTP (HypertextTransfer Protocol) y el HTML. (Recomendado: Lo que no sabes del primer servidor de la historia) HTTP es un protocolo de transferencia utilizado por los servidores web para servir contenido. El inicio de una URL en nuestro navegador (asumiendo que el navegador muestra las URLs) empezar con http://. Esta parte de la URL le indica al navegador el tipo de protocolo que usar cuando haga la peticin al servidor. Cuando el servidor recibe la peticin de un documento, este documento ya estar escrito (o ser convertido) a HTML. El documento HTML es lo que se enva al navegador, como respuesta a su peticin.

HTML es un lenguaje de marcado que le indica al navegador como debe presentar el contenido. Los enlaces a otros documentos pueden estar presentes en su contenido, proveyendo un mtodo sencillo (user-friendly) para navegar entre documentos en Internet. La combinacin del HTTP y HTML proveen un sistema rpido y sencillo para navegar entre distintos documentos, con slo dar clic sobre enlaces de texto. Despus de la creacin de estas dos tecnologas, Berners-Lee fund el Consorcio World Wide Web (W3C). El W3C fue la fuerza que gui las primeras cuatro versiones de HTML. La intencin original de Internet era servir documentos simples de texto. Los primeros exploradores estaban basados en texto (sin ventanas ni nada, slo eran texto en la pantalla). Incluso la adicin de imgenes fue una gran cosa cuando se introdujeron por primera vez. Ahora, la gente hace de todo, desde el envo de mensajes de correo electrnico hasta ver la televisin por internet. La internet se ha convertido en mucho ms que un mecanismo para el transporte de documentos de texto simple. Con nuevas caractersticas y usos llegaron nuevos retos y problemas, que el lenguaje HTML no fue diseado para manejar. El W3C trat de abordar los problemas de la Internet actual con el estndar Lenguaje de Marcado de Hipertexto Extensible (XHTML) 2.0. Sin embargo, esta norma no fue bien recibida y, en su mayor parte, ha sido abandonada. En el 2004, mientras que el W3C se centr en el estndar XHTML 2.0, un grupo llamado Web Hypertext Application Technology Working Group (WHATWG) empez a trabajar en el estndar HTML 5, que fue mejor recibido que el estndar XHTML 2.0. En el 2007, el W3C abandon el estndar XHTML 2.0 y ahora est trabajando con el WHATWG en el desarrollo de HTML5 (pero tambin con su variante XHTML5). Hay que decir, como lo seala la propia especificacin de HTML5, que la especificacin publicada por el WHATWG no es idntica a la especificacin publicada por el W3C. Las principales diferencias entre ambas versiones radican en que la versin WHATWG incluye caractersticas no incluidas en la versin de la W3C: Algunas de ellas se han omitido; pero pueden ser consideradas para futuras revisiones de HTML, ms all de HTML5; y otras caractersticas fueron omitidas porque en el W3C se han publicado como especificaciones separadas.

Navegadores soportados
En estos momentos, HTML5 no ha sido oficialmente liberado. La mayor parte de los contenidos de la web an se estn escribiendo para la especificacin HTML 4. Sin embargo, varios navegadores incluyen soporte para la especificacin de HTML 5. Debido a que cada navegador puede soportar slo algunas de las caractersticas de HTML5, las cosas pueden ser un poco pesadas. Antes de escribir un sitio web basado en HTML5, hay

que probar cada uno de los navegadores (o por lo menos los ms usados) para asegurarnos de que cuenta con las caractersticas o funcionalidades que vamos a utilizar en nuestro sitio. HTML5 viene con una buena cantidad de nuevas etiquetas de cdigo as que si eres desarrollador o simplemente quieres empezar a conocerlas apunta, cada elemento de la lista est enlazado a la pgina de la descripcin y modo de uso: <article>++ <aside>+++ <audio> <bb> <canvas> <command> <datagrid> <datalist> <details> <dialog> <embed> <eventsource> <figcaption> <figure> <footer>+++ <header> <hgroup>+++ <keygen> <mark>++++ <menu> <meter> <nav>+++ <output> <progress> <rp> <rt> <ruby> <section>+++ <source> <summary> <time>

<video> Muy pronto vas a empezar a verlas por todas partes, WordPress y sus temas incluidos, as que toma buena nota, hay importantes novedades, sobre todo no pierdas de vista las tags <article>, <nav>, <aside> y <section>.

Las etiquetas semnticas de HTML5

Html5 ha definido etiquetas especiales para algunas partes de las pginas web en las que antes solamos aplicar capas o Divs (se supone que nos hemos olvidado ya hace ao del uso de las tablas para maquetar una web..... no?). A partir de ahora tenemos que esforzarnos por utilizar una de las nuevas etiquetas en su lugar. Si no vemos coherente aplicarle una de las nuevas etiquetas a un bloque de texto, entonces y solo entonces, usaremos un Div. Veamos cules son esas nuevas etiquetas del Html5 as por encima y cmo se podran distribuir dentro del diseo de una pgina web para entenderlas mejor. Posteriormente las explicamos paso a paso. La siguiente figura muestra una estructura tpica de diseo de pginas web:

<header></header>

Las etiquetas <header> y su cierre </header> quizs sean mucho ms sencillas de entender que las dos anteriores. Se encargan de indicar a los navegadores que lo que contienen es la cabecera de la pgina y que dentro seguramente llevarn lo tpico, algn logotipo, el ttulo de la pgina, quizs una descripcin de la misma y poco ms. La norma define a la cabecera como un grupo de ayudas a la navegacin. En definitiva, el HTML5 nos indica que todo lo que antes teniamos en la cabecera ha de ir ahora entre esas dos etiquetas, no ms. No es una etiqueta obligatoria, aunque debemos usarla si realmente nuestras pginas tienen algn bloque de cdigo que se pueda entender como "cabecera". Adems de los elementos citados, un header podra contener un men de ayuda a la navegacin, una tabla de contenidos, un formulario de bsqueda, etc. Su contenido no es tan extricto Al tratarse de etiquetas semanticas, nos da igual la posicin que ocupen dentro de nuestra pgina. un header ser un header est donde est. Quizs hayas diseado una web en la que el ttulo y la descripcin de la web junto con algunos enlaces o ayudas a la navegacin los tengas situados en una barra lateral. Ese bloque continuar siendo un encabezado o header, pues corresponde con el significado semntico de header y la posicin que ocupa ya os digo que no nos importa en ese aspecto. Por otro lado, el header no se limita a identificar la cabecera de una pgina web, sino que puede usarse tambin para recoger la cabecera de una seccin o varias dentro del contenido. Si por ejemplo en una web con cabecera, hay dentro un conjunto de informaciones a los que crees que le puede venir bien un ttulo, con breve descripcin y ayudas a la navegacin (un mini header, no?) podras aadir otro par de etiquetas <header> y </header> para ese mini header.
....... <header> <h1>TITULO DE LA WEB</h1> <h2>Breve descripcin de la pgina web.</h2> <ul> <li><a href="inicio.html">Inicio</a></li> <li><a href="unaseccion.html">Una Seccin</a></li> <li><a href="otraseccion.html">Otra Seccin</a></li> </ul> </header> .......

<hgroup></hgroup> El actual HTML5 ha creado una etiqueta ms para agrupar titulares. En muchas ocasiones es habitual encontrarnos con el ttulo de la pgina web con una breve descripcin o definicin o lema de la pgina bajo l. Es muy tpico por ejemplo en los blog tipo WordPress. Sabes a lo que me refiero?

Pues HTML5 ha previsto ese caso y ha decidido crear la etiqueta <hgroup> con su etiqueta de cierre </hgroup> para encerrar casos como ese, en los que se podra definir el ttulo de la web con un <h1> y una descripcin bajo el mismo con una etiqueta <h2>. Cualquier agrupacin de titulares definidos con <h...> seguidos deberamos encerrarlos entre <hgroup> y</hgroup>. No, yo tampoco le veo mucho fuste a esto, pero... quin manda? je je je. Los ttulos parecen tener ahora un sentido ms estricto. Da la impresin de ser ms observados ahora. Tienen de hecho algunas particularidades al aparecer junto con estas nuevas etiquetas. Al final de estas definiciones os hablo de esto. Ahora mismo no viene a cuento, oki? <section> <hgroup> <h1>Curso de Html5</h1> <h2>Aprende con nosotros las ltimas novedades del Html5.</h2> </hgroup> <p>Bla bla bla bla bla bla bla bla bla bla bla bla bla bla...</p> ... <footer> <p><small>Contenido publicado por Pepito</small></p> </footer> </section>
<nav></nav> Otro elemento bastante tpico y comn en muchas pginas web es la zona de navegacin, formada por enlaces a las zonas principales de la web, o por un men de navegacin, desplegable de enlaces, etc. Por lo visto Html5 interpreta que es una zona que deberamos identificar y ha creado para ello la nueva etiqueta <nav>, con su respectiva etiqueta de cierre, claro, </nav>. No todos los enlaces de una pgina web han de pertenecer obligatoriamente a un nav. Los enlaces de polticas, de datos de contacto, mapas del sitio, copyrights, enlaces a secciones secundarias etc, que aparecen normalmente en un pi de pgina no es necesario que los rodeemos con la etiqueta <nav>, pues la etiqueta <footer> ya recoge esos aspectos. sta etiqueta es ms bien para enlaces que favorezcan la navegacin por la web, que nos dirijan a zonas importantes. El por qu HTML5 aade esta etiqueta es sencillo. Cada vez es ms habitual que nuestras pginas aparezcan no solo en los navegadores que usamos en el ordenador, sino tambin en dispositivos mviles, telfonos, iPads, etc, etc. Al usar esta etiqueta el agente de usuario (el navegador o como quiera llamarse segn el dispositivo usado) podra dar la opcin al usuario de esconder el men de navegacin para no molestar, para tener ms espacio disponible para ver el contenido importante. Tambin podra dar la opcin de hacerlo aparecer cuando el usuario quiera cambiar de seccin. Esto solo sera posible si se sabe dnde empieza y dnde termina ese men de navegacin y eso es precisamente lo que conseguimos con la etiqueta nav. Hoy por hoy no conozco agentes de usuario (por ejemplo

navegadores) que permitan esto, pero es necesario tener nuestra web preparada para cuando llegue ese momento. Ocurre lo mismo con el resto de etiquetas que estamos viendo. Quizs no les veamos utilidad hoy, pero estad seguros de que la tendrn, y mucha, en un futuro no muy lejano. En la norma donde se dictan toda estas reglas del HTML5 no he leido que no pueda existir ms de un bloque del tipo nav dentro de una misma pgina. No obstante he leido en algunos sitios que se recomienda que solo exista uno. Si como yo en ComoCrearTuWeb tienes una barra de navegacin horizontal (la de las lengetas) y adems un men lateral (el de la izquierda) quizs deberas escoger cul de los dos habra de ir dentro del nav y deshechar el otro. O hacer caso omiso de esos consejos no oficiales. O, si fuera posible, englobar ambas zonas de navegacin dentro del mismo nav. Al final la decisin es tuya y seguro que no te equivocas al elegir.
<nav> <ul> <li><a href="cursohtml.html">Curso de Html5</a></li> <li><a href="cursocss.html">Curso de CSS</a></li> <li><a href="cursojavascript.html">Curso de Javascript</a></li> </ul> </nav>

<article></article> Si la etiqueta <section> se usaba para bloques de contenido capaces de poder pertenecer a un indice, agrupando bloques de contenido de cierto tema, con la etiqueta <article> podemos separar cada uno de esos elementos independientes que pudieran componer ese section concreto. Un article podra considerarse por tanto como cada uno de los elementos en que podemos dividir un section. Al igual que el resto de estas nuevas etiquetas, posee etiqueta de cierre, <article> Creo que podramos saber si un bloque de cdigo debera pertenecer a un Article si al preguntarnos si ese bloque tiene sentido al colocarlo solo, separado del resto de contenido actual, tiene o carece de sentido. Si al separarlo o independizarlo se pierde su sentido, no es un Article. Si en cambio al separarlo del resto de contenido de la pgina web el bloque pierde su sentido (por ejemplo envindolo a Facebook o Twitter), no es candidato para pertenecer a un Article, oki?. En una pgina web pueden existir varios articles, dentro de un section o incluso independientes del mismo. Pueden adems contener en su interior ttulos con h1 y prrafos, adems de otros articles en su interior. Quizs sea fcil confundirlos con los section. Veamos si con el uso aprendemos a distinguirlos un poco, no es sencillo por ahora, verdad? Un ejemplo real de article podra ser un mensaje de un foro, el artculo de una revista o peridico, un comentario de un usuario a una entrada de blog o incluso una entrada en un blog. La estructura podra ser la siguiente:
<article> <h1>La etiqueta Article</h1>

<p>La etiqueta <b>article</b> suele usarse para fragmentos independientes de contenido...</p> ... </article>

Deciamos que un article podra ser tan grande como para poder contener incluso header, footer, etc. Mirad un ejemplo:
<article> <header> <h1>La etiqueta Article</h1> </header> <p>La etiqueta <b>Article</b> suele usarse para fragmento independientes de contenido...</p> ... <footer> <p><small>Contenido publicado por Juanito</small></p> </footer> </article>

Por ms que leamos las normas del Html5, no termina de quedar muy claro cundo usar article y cuando section.. En el ltimo apartado de esta seccin trato de explicar las diferencias entre section y article que yo capto, aunque como digo, lo leais donde lo leais, veris como las interpretaciones no son siempre las mismas.
<section></section>

La etiqueta <section> y su correspondiente etiqueta de cierre </section> se utilizan para encerrar el cdigo correspondiente a una seccin genrica dentro de un documento o aplicacin. Normalmente, un bloque de texto al que perfectamente le podramos colocar un ttulo o encabezado. Adems, todo el contenido que engloba ha de guardar cierta relacin entre s. Para verlo ms claro, un ejemplo de bloque que podramos encerrar entre etiquetas section podra ser las ltimas novedades de la web o del foro. No seria idonea esta etiqueta por tanto para encerrar un bloque de publicidad, por ejemplo, o bloques de cosas diferentes unas de otras. Dice la norma que si es algo que bien pudiera ser sindicable, tiene todas las papeletas de ser candidato para pertenecer a un section. Recuerda que no se debe usar para englobar un bloque cualquiera de cdigo simplemente porque necesitas encerrarlo dentro de algo para aplicarle as estilos CSS o algn Script. Si el nico motivo para encerrar un bloque de cdigo es el de poder aplicarle lo anterior, no tiene sentido aplicarle una de estas nuevas etiquetas. En su lugar se puede y debe usar un DIV de toda la vida. Veremos ejemplo ms adelante si te ests liando. Solo sigue leyendo y lo irs pillando al terminar de ver todas las etiquetas.

Otra regla que podemos usar para saber si un bloque de cdigo o un elemento de una pgina web debe encerrarse entre esta etiqueta es el preguntarse.... si la web fuera un libro.... estara ese elemento en el indice inicial del mismo? Si la respuesta es SI, es buen candidato para section. Dentro de una pgina web por tanto, pueden existir varios section, cmo no (en un libro suelen existir varias secciones en el ndice, no?). Es ms, dentro de un section pueden haber otros section secundarios y as sucesivamente (o acaso en un libro no hay secciones, subsecciones, etc, en el ndice?). Si una seccin es algo que podra tener un ttulo, es lgico pensar adems que lo primero que encontraremos dentro es un ttulo <h1> y despus una etiqueta <p> con el contenido de la seccin. Otra ayudita para decidir si una parte de una pgina web es o no un section, es tener en cuenta que los section suelen ser temticos. Suelen englobar contenido que trata de un mismo tema. Si por ejemplo en una pgina de una web hay un apartado hablando de diversos productos y otra parte en la que se habla tan solo de las formas de pago, esa segunda parte podra englobarse dentro de un section. Se le podria asignar el encabezado "Formas de Pago", su contenido trata de un tema concreto, es algo que podra estar presente en un ndice de la web... decididamente es un section. Lo ves? Dentro de un section grandote, pueden existir otros section hijo. Imagina una web de un peridico que divide las noticias de su portada en noticias de Europa, de Asia, de Estados Unidos, etc. Podramos pensar que son secciones temticas, a las que se les puede colocar un encabezado tipo "Noticias Europeas", etc, cierto? Por lo que se podran tomar como section. Pero an dentro de cada una de esas section podramos englobar todas las noticias de deportes dentro de Europa y colocarlas en un section hijo de Europa, titulado "Noticias Deportivas en Europa". Luego podemos encontrarnos con varios section dentro de un section. Conoces los blogs? En un blog, todo el conjunto formado por una entrada del autor, podra encerrarse dentro de un section (normalmente tienen un titulo y luego algunos prrafos). Luego, todo el conjunto con los comentarios escritos por los visitantes, podra formar otro section distinto, titulado "comentarios" por ejemplo. Lo vamos viendo ms claro? Sigamos con otras de estas nuevas etiquetas del Html5.
<aside></aside> Esta es la ltima etiqueta que nos presenta HTML5 para bloques con cierto contenido semntico dentro de una pgina web. Con las etiquetas <aside> y </aside>, se nos invita a rodear todo aquel contenido que no es directamente contenido principal del que estamos hablando o del que estamos tratando en esa pgina en concreto. La norma dice que se use para todo aquel contenido tangencial al contenido principal de la pgina... ah es n! ja ja ja.

Lo usaremos por tanto para todos aquellos elementos secundarios, como podrian ser los bloques publicitarios, enlaces externos, citas, un calendario de eventos, etc, siempre claro que no encontremos otra etiqueta ms acorde de entre las ya comentadas. <aside> <h1>Publicidad<h1> (( cdigo de la publicidad )) </aside> Y con esta, terminamos de comentar estas nuevas etiquetas de HTML5 para representar zonas con cierto caracter o significado semntico. Existen otras nuevas etiquetas, pero ya son para resaltar textos, etc, no para agrupar bloques de elementos, etc. Recuerda aplicarlas cuando tengas claro que los elementos contenidos son realmente lo que el nombre de la etiqueta representa. Ante la duda, no las uses sin tener claro el porqu. Si no sabes si cierto bloque de cdigo precisa o no de una de estas etiquetas, simplemente no le pongas ninguna. Si la necesitaras para poder aplicarle estilos o para ejecutarle cierto script, usa mejor las capas o Divs de toda la vida, que para eso son, oki?
<figure></figure> <footer></footer> Si la etiqueta <header> era sencilla de entender, esta otra etiqueta <footer> lo es an ms. Se trata de una etiqueta para encerrar todo aquel cdigo tipico de las partes inferiores de las pginas web. Contendrn por tanto enlaces a otras webs relacionadas, al mapa de la web, a una pgina de comentarios sobre el copyright, una poltica del portal, quizs algo de publicidad, etc. Lo tpico, no? Footer significa pie y aunque est contruida para contener lo dicho, no ha de tener que estar en la parte ms baja de una pgina web para poder ser un footer. Tened en cuenta que todas etiquetas intentan informar a los navegadores sobre lo que pueden contener esos bloques, no ms. No olvidemos que el aspecto, apariencia e incluso la posicin dentro de la web son cosas que les importan un webo a los navegadores. Esas cosas ya las leeran en la hoja de estilo. El Html5 pretende con estas etiquetas saber cul es su contenido, informacin semntica, no ms. Por tanto, puedes colocar luego esa "capa" donde te de la real gana dentro de la web. Un footer o pie de pgina, puede contener tantos elementos como sea necesario. No ha de limitarse a contener lo dicho antes. Existen pginas con verdaderos super pies de pgina, con una ritra enorme de enlaces, con informacin acerca del registro en el portal correspondiente, con la ttpica "letra pequea" en la que se detallan condiciones de temas expuestos en el contenido principal, etc, etc, etc. Un footer puede ser realmente extenso, no temas. Puede por tanto contener incluso sections, articles, y algunas de las etiquetas que veremos a continuacin. Cada pgina es un mundo y imagino que cada uno ser capaz de diferencir cules de etiquetas puede aplicar.

Las diferencias entre article y section

Las diferencias entre article y section, cundo usar una etiqueta article y cundo utilizar la etiqueta section, no termina de quedar demasiado clara tras leer la norma que rige el Html5. Es normal confundir una con otra y no estar seguro de cul utilizar en cada momento al escribir cdigo Html5, verdad?. Como regla general podramos establecer lo siguiente: Si el fragmento de cdigo posee significado por si mismo, si en caso de escribirlo en un papel separado del resto de la web el fragmento continua teniendo su sentido, podemos usar un <article>. Si no tiene tanto sentido, pero tiene relacin con lo comentado en el resto de esa pgina, podemos usar un <section>. Si el algo que no tiene mucho que ver son el tema de esa pgina en concreto ya dijimos que se tratara de un <aside>. Si no cumple con ninguna de las condiciones anteriores, pero necesitamos encerrarlo entre dos etiquetas para poder aplicarle estilos o scripts, entonces lo que debemos usar es un Div.

<article> El significado principal es sencillo: aqu se encuentra el contenido importante de la pgina. Si hablsemos en trminos de SEO, esto sera lo que hay que posicionar. SEO (Search engine optimization o Optimizacin para Motores de Bsqueda). Conjunto de tcnicas -y el proceso de llevarlas a cabo- para incrementar la cantidad de visitantes hacia un sitio web. El objetivo es que un sitio o pgina web aparezca lo ms alta posible en los resultados de bsqueda de los buscadores de internet. Existen un sinfn de tcnicas para mejorar el posicionamiento en los buscadores con respecto a determinadas frases. Muchas de estas prcticas no son consideradas como negativas por los buscadores, pero s existen algunas que violan sus respectivas polticas y pueden llevar a una penalizacin del sitio web que se intenta optimizar.
<aside>

Este bloque viene a ser los contenidos relacionados con el article principal habitualmente haran referencia a esa columna lateral en la que hay tags o cualquier tipo de informacin de relleno, como enlaces relacionados y similares. <footer>

Esto es algo que creo que va a venir a todos bien, un tag que simplemente agrupe el contenido del pie de pgina. <header>

Y, claro est, si hay pie de pgina, tambin hay una cabecera en la que poner el logo, el bnner de arriba y esas cosillas
<hgroup>

Aunque no le acabo de encontrar la utilidad, este tag lo que hace es agrupar los contenidos de las etiquetas h1 a h6.

<mark>

Seguro que en alguna ocasin habis creado un sistema que, dependiendo del refere si llegaba desde un buscador, se marcasen las palabras de bsqueda. Pues este es el tag que ha venido a quedarse. En el mundo real vendra a ser como el que coge un marker amarillo y destaca unas palabras de un texto.

<nav> Este elemento s que me parece importante. Y es que en este tag incluiremos los enlaces que afecten a la navegacin del sitio (en principio navegacin

interna, aunque se puede incluir la externa). Un lugar donde podemos encontrar esto sera el men de navegacin, el pie de pgina o la paginacin
<section> Otro de los elementos importantes, y a la vez muy genrico. Esto vendra a ser aquel macro-div que se utiliza para agrupar contenidos. Por ejemplo, en una web que tenga 3 columnas, cada una de ellas podra ser tranquilamente un section.