Las novedades de HTML5 (II)

Si en la primera parte de este repaso a HTML5 os comentamos todos los nuevos elementos, ahora vamos a centrarnos en los nuevos atributos más interesantes. Al igual que como comentaba en la primera parte, hay que tener en cuenta que no es un estándar acabado, así que estas especificaciones pueden cambiar y cambiarán. También hay que tener en cuenta que estos no son todos los cambios, solo he seleccionado los relevantes para el día a día de un desarrollador web. Por último, habría que distinguir entre los atributos que solo afectan a un subconjunto de los elementos y los globales, que afectan a cualquier elemento.

HTML5. Nuevos atributos

Los elementos ya existentes añaden nuevos atributos que permiten hacer cosas muy interesantes. Los más importantes o novedosos son:

• Atributo ping para el elemento a. Este atributo contiene una lista de URLs, las cuáles serán llamadas cuando un usuario haga click en ese enlace. Por ejemplo, un uso práctico sería para estadísticas.
• Atributo autofocus para los elementos de un formulario. Indica qué elemento de un formulario debe ganar el foco al cargar una página. Por ejemplo, en la página principal de Google la cajita de texto gana el foco automáticamente para ayudarnos a escribir sin usar el ratón.
• Atributo form para los elementos de un formulario. Indica a qué formulario pertenece este elemento, y permite poner un elemento de un formulario en cualquier parte de una página. Tal y como está ahora, todos los elementos deben ir dentro de <form>.
• Atributo required para los elementos de un formulario. Indica que es obligatorio rellenar un valor para enviar ese formulario, algo que hoy en día se comprueba con Javascript o en el servidor.
• Atributos autocomplete, min, max, multiple, pattern y step para los elementos input. Estos atributos indican que el valor del input debe cumplir ciertos requisitos, por ejemplo seguir cierto patrón.
• Atributo novalidate para el elemento form. Esto deshabilitará la validación de sus elementos, algo útil si se usa dinámicamente (es decir, con Javascript, activando y desactivándolo).
• Atributos formaction, formenctype, formmethod, formnovalidate, y formtarget para los elementos de un formulario. Estos atributos modifican los atributos del formulario si el elemento es usado (por ejemplo un botón es pulsado o un input es rellenado). Esto permite que dependiendo qué botón usemos podemos tratar el formulario en diferentes páginas usando solo un formulario, algo complicado en HTML4.
• Atributo scoped en el elemento style. Esto permite aplicar estilos solo a cierto subárbol del documento. Por ejemplo, imagina que tenemos un elemento con id igual a «cabecera»; si añadimos el atributo scoped a un style, los estilos contenidos en él solamente se aplicarán a ese elemento y a sus hijos.
• Atributo async en el elemento script. Con este atributo especificamos que el código interno se puede ejecutar en cualquier momento de la página, mejorando la velocidad de carga.
• Atributo manifest en el elemento html. Esto permite indicar nuevos elementos, sobre todo será útil en aplicaciones web.
• Atributo reversed en el elemento ol. De esta forma la lista será numerada en orden descendiente (3, 2, 1…).

HTML 5. Nuevos atributos globales

Además de los anteriores tenemos otros atributos que pueden ser aplicados a todos los elementos de un documento. Esto lo hacen especialmente conveniente si vamos a usar Javascript para modificarlos dinámicamente, ya que no tenemos que comprobar el tipo de elemento para usar los atributos comunes.

• Atributos id, class, style, title, lang y tabindex, ya existentes pero ahora permitidos en todos los elementos. Pues eso, los atributos más usados se vuelven universales.
• Atributo contenteditable, para indicar que el elemento es editable por el usuario. Muy interesante, ya que ahora podremos editar cualquier cosa de manera trivial para el desarrollador, no solamente los elementos de un formulario.
• Atributo contextmenu, para indicar un menú contextual sobre un elemento. Como veis, está todo muy pensado para las aplicaciones web.
• Atributos data-*, donde el asterisco puede ser cualquier nombre. Esto permite atributos personalizados, que luego podremos obtener con Javascript.
• Atributo draggable, para indicar que un elemento se puede arrastrar.
• Atributo hidden, para ocultar un elemento que ya no interesa.
• Atributo spellcheck, para indicar si el contenido de un elemento debe ser pasado por el corrector ortográfico.

Por supuesto estos no son todos los cambios, en próximas entregas explicaremos otros aspectos de este nuevo estándar.

Enlace | Las novedades de HTML5 (I)
Enlace | Las novedades de HTML5 (III)
Enlace | Las novedades de HTML5 (y IV)
Enlace | Borrador actual de HTML5
Ver más | HTML5