HTML 5Hace 10 años que se actualizó por última vez el HTML con la especificación 4.01. Desde entonces, la web ha cambiado radicalmente como también lo ha hecho el modo de diseñar y desarrollar páginas. Se han estandarizado una serie de elementos como los encabezados o el menú, se utiliza Ajax para recargar el contenido dinámicamente y todo el mundo usa CSS para definir los atributos visuales de la página.
El nuevo HTML 5 intenta adaptarse al nuevo escenario y presenta elementos para desarrollar páginas dándole un valor especial a la semántica, es decir, que se pueda reconocer desde el propio código el tipo de contenido que se está mostrando. Conviene recordar, que en sus orígenes el HTML no era más que un lenguaje de etiquetas sencillo orientado a poner en líneas trabajos académicos. Por eso, por ejemplo, tenemos seis niveles de títulos (<h1>, <h2>… <h6>) que casi nadie usa en su totalidad.
El estado actual del HTML 5 es el de un borrador que está madurando. La primera versión salió a la luz en enero de 2008 pero ha sido revisada varias veces. Sin embargo, navegadores como Firefox 3.5 o Internet Explorer 8 ya pueden interpretarlo y tienen soporte para las etiquetas y tecnologías que vienen de la mano.
Las novedades
El borrador del HTML 5 es un documento complejo y extenso. Hice la prueba de convertilo a PDF obtuve un documento de 1737 hojas tamaño A4. Sin embargo, hay mucha información estrictamente técnica que no afecta al diseño web como dice Eric Meyer . Por ejemplo, el cómo hacer un análsis sintáctico (“parsear”) del componente tiempo o cómo moverse por el historial del navegador.
En lo que es estrictamente diseño lo más importante son las etiquetas del HTML 5. Pero antes avanzar conviene recordar que -como es habitual en el W3C- se asegura la compatibilidad hacia atrás con lo cual podemos seguir escribiendo en el viejo HTML 4 sin miedo porque los navegadores seguirán mostrando correctamente las páginas. Sin embargo, profesionalmente nos vamos a quedar atrás y en algún momento debemos encarar la transición. Mejor hacerlo ahora.
Etiquetas que salen
Con la llegada del CSS muchas etiquetas del HTML que afectaban la presentación de los elementos de pantalla cayeron en desuso. Ahora definitivamente se eliminan. Todas pueden ser perfectamente reempalzadas por atributos en las hojas de estilo.
El listado de etiquetas que caen en desuso -porque ya existe una forma de hacer lo mismo con CSS- es el siguiente:
FONT
CENTER
STRIKE
BASEFONT
BIG
S
STRIKE
TT
U
El HTML 5 elimina completamente el uso de frames (marcos) por razones de usabilidad y accesibilidad. No ocurre lo mismo con el IFRAME que seguirá siendo válido. Por lo tanto, las etiquetas vinculadas con los frames que salen son:
FRAME
FAMESET
NOFRAMES
Para terminar, encontramos etiquetas que ya no se usan porque creaban confusión o hacían lo mismo que otras ya existes. Estas son:
ACRONYM
APPLET
ISINDEX
DIREtiquetas que entranComo mencioné anteriormente, una prioridad del HTML 5 es darle valor semántico al código para que se pueda reconocer fácilmente la función de los elementos en una página. Por eso, aparecen muchos indicadores de secciones y contenedores para tipos de contenido específicos.
Hay 22 nuevas etiquetas y son las siguientes:
SECTION
ARTICLE
ASIDE
HGROUP
HEADER
FOOTER
NAV
DIALOG
FIGURE
VIDEO
EMBED
MARK
PROGRESS
METER
TIME
RUBY (RT y RP)
CANVAS
COMMAND
DETAILS
DATALIST
KEYGEN
OUTPUTTambién tenemos etiquetas que soportan nuevos atributos. Por ejemplo, anteriormente en INPUT solo podías escoger entre botones, casillas de verificación, campos de texto o clave y pocas opciones más. Ahora tenemos atributos específicos como SEARCH si se trata de un campo de búsqueda, EMAIL si el usuario tiene que introducir un correo electrónico o DATE si es una fecha. También aparece el atributo AUTOFOCUS para poder poner el foco de un formulario en un lugar concreto sin tener que recurrir al JavaScript.
Fuente