Atributos Globales en HTML5

Atributos Globales en HTML5 también incluye nuevos atributos globales que pueden ser asignados a cualquier elemento. Son los siguientes:

ACCESSKEY

El atributo accesskey permite a los desarrolladores especificar un atajo de teclado que permite activar un elemento a asignarle el foco. Este atributo ya existía en HTML 4, aunque ha sido utilizado en muy pocas ocasiones. Como Atributos Globales en HTML5 está pensado para aplicaciones, y algunos usuarios siguen prefiriendo los atajos de teclado, este atributo no ha sido eliminado, y ahora está disponible para cualquier elemento.
Para evitar conflictos con otros atajos de teclado, o con los propios del navegador crear una pagina web, ahora esta etiqueta permite asignar alternativas en este atributo. Un ejemplo incluido en la especificación:
<input type=»search» name=»q» accesskey=»s 0″>

Esto quiere decir que este elemento es accesible a través de dos atajos de teclado, a través de la tecla s o a través de la tecla 0 (en ese orden).

CONTENTEDITABLE

Inventado por Microsoft, e implementado por el resto de los navegadores, la etiqueta contenteditable es ahora parte de la especificación oficial.
La introducción de esta etiqueta significa principalmente dos cosas:

Primero, los usuarios pueden editar los contenidos de un elemento que incluya esta etiqueta. Este elemento debe ser seleccionable y el navegador debe proporcionar una marca que indique la posición actual del cursor.
segundo, es posible cambiar el formato del texto del contenido, añadiendo negritas, cambiar la fuente, añadir listas, etc sitio web.

Este atributo es de tipo booleano, por lo que su valor puede ser true o false. Al acceder desde JavaScript a este atributo, hay que tener en cuenta su notación lowerCamelCase, siendo el nombre de la propiedad del DOM contentEditable. Además, existe otra propiedad llamada isContentEditable, que indica si el elemento es editable o no como hacer una pagina web.

Finalmente, el contenido que ha sido seleccionado por el usuario, puede ser objeto de modificaciones, como hemos comentado antes. A través del comando element.execCommand() es posible indicar el tipo de modificación (poner en negrita, copiar, cambiar la fuente…), siempre que el documento se haya indicado como editable diseño de pagina web.
document.designMode = ‘on’;
Si se desea almacenar los cambios realizados en el contenido, es necesario enviarlo al servidor. No existe ningún API o método en JavaScript que nos posibilite esta acción, por lo que debemos utilizar algún tipo de tecnología tipo AJAX.

DATA-* (CUSTOM DATA ATTRIBUTES) HTML

5 permite crear atributos personalizados para los elementos. Estos atributos son utilizados para pasar información a JavaScript. Como veremos en el capítulo correspondiente, hasta ahora se utilizaba el atributo class para de alguna manera almacenar información asociada con elementos, pero esto cambia radicalmente con estos atributos diseno de pagina web.

<li data-spacing=»10cm» data-sowing-time=»March to June»>Carrots</li>

<li data-spacing=»30cm» data-sowing-time=»February to March»>Celery</li>

<li data-spacing=»3cm» data-sowing-time=»March to September»>Radishes</li>

</ul>

DRAGGABLE

Este atributo indica que el elemento indicado puede ser arrastable. Lo veremos en el capítulo correspondiente Atributos Globales en HTML5