La llegada de HTML5 ha causado un cambio drástico en el concepto de creación de Sitios Web, pues con la integración de nuevos elementos, HTML5 se está convirtiendo en el estándar para el diseño de la “Web 2.0”.
HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, sino un nuevo concepto para la construcción de sitios web y aplicaciones en una era que combina dispositivos mobiles, computación en la nube y trabajos en red.
HTML5 propone estándares para cada aspecto de la web, a partir de ahora HTML5 provee los elementos estructurales, CSS se encuentra concentrado en volver esa estructura utilizable y atractiva a la vista y Javascript tiene todo el poder necesario para proveer dinamismo y construir aplicaciones web completamente funcionales.
Nota: En este momento no todos los navegadores (específicamente el ‘bendito’ IE) soportan el HTML5 y la mayoría de sus funciones se encuentran en estado desarrollo.
Estructura completa
El elemento DIV se ha convertido en la etiqueta más usada en los sitios web, pues permite estructura la página. HTML5 integra varios elementos que sirven para estructurar mejor una página, esto permite que sea más coherente y fácil de entender y diseñar. Estos elementos son:
Section. Representa un “sección” general dentro de la página, como si de un capítulo de un libro habláramos; puede tener subsecciones.
Article. Representa un contenido independiente en la página, el ejemplo más práctico serian: las entradas de un blog o un portal de noticias; donde cada entrada del blog o noticia seria un elemento “article”.
Aside. Representa un contenido poco relacionado con el resto de la página, como por ejemplo una barra lateral. Con esto podemos dividir el contenido “importante” del contenido de “complementario”.
Hader. Representa la cabecera de una sección. Puede usarse con “section” o “article”.
Footer. Representa el pie de una sección.
Nav. Sección dedicada para los menús de navegación de la página.
Para entender un poco mejor esto, analicemos la siguiente estructura:
Si utilizáramos HTML convencional (HTML4), lo haríamos de la siguiente manera.
Ahora lo hagamos con HTML5, quedando de la siguiente manera.
Como podemos ver, la estructura de HTML5 es mas limpia y mas estructurada, lo cual nos permite organizar todo de mejor manera, dejar el diseño visual a CSS.
En la segunda parte de este articulo, veremos los atributos mas interesantes de HTML5.
