martes, 24 de julio de 2012

Introduccion a HTML5

La llegada de HTML5, aunque aun sea un borrador, abre las puertas a un nuevo mundo web, o a lo que se podría definir como la web del futuro. Este nuevo concepto en cuanto a la www que nos trae HTML5, se podría resumir en una web más semántica, libre y para todos. En cuanto al pensamiento muchas veces equivocado, que aun no se debería migrar o empezar a crear nuevos diseños y proyectos pensando en HTML5 y CSS3, para mí personalmente es un pensamiento equivocado, ya que en estos momentos disponemos de varias opciones para poder ver nuestra web en cualquier navegador (incluido IE6), bajo el mandato y estructura de HTML5. Como introducción y para ir entrando en materia, estos artículos comenzarán explicando de una manera básica y con ejemplos reales la nueva estructura y nuevas etiquetas que tendremos que utilizar semánticamente en nuestra web, sin abusar tanto como en el pasado de la etiqueta, div id, div class o span para separar las distintas zonas de las que se compone cualquier proyecto o página.

Una vez echa una pequeña presentación de HTML5 comenzarémos en el blog de Fantsal Web a iros explicando el nuevo modelo de trabajo con HTML5 y otros lenguajes como: Javascript, JQuery, JQueryUI, PHP.... que nos ayudaran a entenderlo mejor, iremos haciendo ejemplos y practicas, para que podais ir entendiendo facilmente todos los avances que ya se estan utilizando en torno a la web.

Hoy comenzaremos explicando las etiquetas DOCTYPE y html y su diferencia con versiones anteriores a HTML5

Etiquetas DOCTYPE y html en HTML5

<!DOCTYPE html>


La etiqueta <!DOCTYPE> en HTML5, es la etiqueta que de alguna manera ha sorprendido gratamente por su sencillez y claridad.

Tanto en HTML4.01 como en XHTML1.0, su sintaxis era compleja y se asimilaba muy poco a lenguaje humano.

Su sintaxis antes de HTML5 era la siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Aunque había otras posibilidades de escribir el DOCTYPE, dependiendo del documento a utilizar.

Como podemos ver, en la sintaxis anterior, era bastante complicada y difícil de recordar. Lo que venía a decir todo lo incluido en esta etiqueta, era que se trataba de un documento HTML4.01 y cómo iba a ser escrito ese documento HTML.

En el caso del ejemplo anterior, el texto HTML se regiría por la norma Transitional.

En la especificación actual de HTML5, nos indican que la sintaxis a utilizar será la siguiente:

<!DOCTYPE html>

Con este cambio y el no indicar a que versión HTML se refiere, se busca su compatibilidad lo más amplia posible. Es decir, aunque creemos documentos en HTML4.01 o XHTML1.0, podemos utilizar esta etiqueta sin ningún tipo de problema. Y lo mismo nos vale para HTML5 o futuras especificaciones de HTML.

<html>


La etiqueta o tag <html>, también ha sufrido cambios sustanciales en cuanto a su comparación a la que habitualmente veníamos utilizando.

En HTML4.0.1 como en XHTML1.0, su sintaxis aunque no muy compleja si que tenia varios atributos como el xmlns, el cual, especificaba el espacio de nombres a utilizar y también el lang, que es el atributo para declarar el idioma a utilizar en la pagina web y por último el atributo xml : lang.

La sintaxis utilizada en HTML4.0.1 sería la siguiente:

<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

Ahora con HTML5, la especificación, nos indica que podemos prescindir del atributo xmlns, ya que HTML5 considerara, que todos los elementos están en el espacio xmlns=http://www.w3.org/1999/xhtml , también nos permite prescindir del atributo xml : lang, por lo que nuestra nueva etiqueta para HTML5, quedaría de la siguiente manera, mucho más intuitiva y fácil de recordar que la anterior:

<html lang="es-ES">

No hay comentarios:

Publicar un comentario