HTML 5: atributos globales

Antes de empezar a hablar de las etiquetas en el HTML 5, hay que tener presente una serie de elementos globales que sirven para la gran mayoría de etiquetas y que hay que tener en cuenta a la hora de comenzar a desarrollar, sobre todo por la gran posibilidades de acción que nos permiten.

Estos elementos que os comentaré ahora son atributos de los tags, de forma que se pueden añadir dentro del tag como un parámetro más. Y, una vez explicado esto, vamos a comenzar con cada uno de ellos:

accesskey

Este atributo accesskey básicamente lo que permite es una mejora en la accesibilidad del sitio, pudiendo llegar a esa zona de la página pulsando una letra o número del teclado.

Un ejemplo podría ser el de un enlace o el de un cajetín de un formulario:

<a accesskey="A" href="http://example.com/">Ejemplo</a>

<label>buscador: <input type="search" name="q" accesskey="b"></label>

Para el primer caso, el usuario debería usar la combinación de teclas Control + Alt + A para acceder a esta tecla. De todas formas, cada navegador puede tener su propia combinación de teclas.

class

El atributo class básicamente se usa para lo que siempre se ha utilizado, y es para controlar las hojas de estilo. Dentro de un class se pueden poner varios contenidos haciendo referencia a los correspondientes en la hoja de estilos.

<a class="enlace" href="http://example.com/">Ejemplo</a>

En este caso, si tuviéramos una definición del estilo «enlace» en el CSS, se aplicaría en este caso.

contenteditable

Este es uno de los nuevos atributos que aparece, y es que contenteditable va a permitir que un acceso externo permita o no editar o cambiar el contenido de una etiqueta. Es un elemento heredado de los padres, por lo que si un padre no se puede editar, los hijos tampoco.

Al ser un elemento booleano, sólo es necesario ponerlo con un «true» o «false» para que funcione.

<div contenteditable="false">Este contenido no debería ser editable desde el exterior...</div>

contextmenu

Este es otro de los nuevos elementos que encontramos. contextmenu básicamente viene a dar un nombre a uno de los también nuevos tags, menu.

Para resumir, viene a ser como si le pusieramos un «id» (un identificador, como os explico más adelante), pero para el caso especial de este tag. e de reconocer que es algo bastante nuevo y aún no le encuentro aplicación práctica (que seguro que la tiene).

dir

El atributo dir básicamente indica la dirección del texto, o, mejor dicho, de escritura, para aquellos idiomas en los que se escribe de derecha a izquierda y no de izquierda a derecha como lo hacemos nosotros.

Tiene tan sólo dos opciones que corresponden a lo que acabo de comentar: ltr (left to right) o rtl (right to left).

<div dir="ltr">Este contenido está escrito de izquierda a derecha...</div>

draggable

Otra de las nuevas incorporaciones es el draggable, que cada vez que lo veo me da a pensar en las ventanitas y bloques que se pueden mover dentro de una web. Supongo que en un futuro ese será el uso principal que se hará, aunque en la actualidad va a permitir incorporar o eliminar elementos de una página simplemente arrastrándolos.

Un ejemplo «de lo que hasta ahora podía tratarse como tal» sería una imagen que, al arrastrarla fuera de la ventana y colocarla en un editor de imágenes, se podía abrir. Otro ejemplo el de un enlace que se arrastraba sobre una pertaña del navegador y ejecutaba esa dirección.

Los parámetros que permite son true, false o auto, que es el que está por defecto, dejando a cada usuario / navegador decidir los elementos.

hidden

Seguro que el elemento hidden va a dar mucho que hablar, sobre todo en lo que a SEO se refiere. Hasta ahora cuando querías que un bloque de contenido no se viera tenías que utilizar los CSS para ocultarlo. Ahora eso ya no será necesario, ya que que si un elemento incorpora este atributo simplemente no se mostrará por pantalla.

De todas formas, este elemento no debe usarse para ocultar bloques o pestañas, sino que se ha de utilizar para elementos que no son todavía o no van a ser relevantes.

Por ahora no hay ningún navegador que lo soporte, por lo que habrá que esperar a ver qué ocurre con el contenido que va dentro de estos elementos.

<div hidden>Este contenido está oculto por no ser relevante para el usuario...</div>

id

Sin duda uno de los pilares básicos hoy en día en cualquier sitio, el id simplemente identifica un elemento de forma única (por lo que sólo puede haber uno que se llame así por página. A parte de utilizarse en las hojas de estilo, lo más habitual es su uso con AJAX y la función getElementById().

<div id="explicacion">Este contenido puede variar si se accede mediante AJAX o similar...</div>

itemid, itemprop, itemref, itemscope y itemtype

Estos elementos también son nuevos y creo que van a dar bastante juego. Algunos ya sabéis que me encantan los microformatos, y estos van a permitir ampliar todos esos pequeños detalles que van a ampliar el juego.

El itemscope permite crear un nuevo conjunto de elementos los cuales han de ser de un tipo, que se informa con el itemtype. Este tipo ha de venir dado con una dirección URL (que indica el microdato nuevo)

El itemid es el que identifica al elemento, el itemref hace referencia a otros elementos que han de poder ser utilizados y, para acabar, itemprop viene a ser el que da los valores.

Y, en este caso, sólo hay una forma de entender todo lo que he puesto, y es con un ejemplo:

<figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses">
  <img itemprop="work" src="images/house.jpeg" alt="A white house, boarded up, sits in a forest.">
  <figcaption itemprop="title">The house I found.</figcaption>
</figure>
<p id="licenses">All images licensed under the <a itemprop="license" href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>.</p>

NOTA: en este ejemplo se utilizan algunos nuevos elementos como figure o figcaption del que ya hablaré más adelante.

lang

Otro de los clásicos sin duda es el lang, que marca el idioma del contenido de ese fragmento de texto. Hay que tenet en cuenta que, aunque un documento se le aplique un idioma, por normal general, puede haber fragmentos de texto de contenidos que se encuentran en otros idiomas, por lo que hay que indicarlos.

<div lang="es">este bloque se encuentra escrito en español...</div>
<div lang="en">...and this is in english...</div>

spellcheck

Otra de las novedades que aún no sé para qué, pero bueno, gracias a spellcheck se podrá indicar qué contenidos o no queremos que puedan sufrir una corrección ortográfica o gramatical. Seguramente acabará usándose en los formularios en los que haya que incluir palabras sin sentido, o en textos en un idioma distinto del general de la página…

Tiene tres posibles valores, que son true, false y default.

style

De los style no voy a contar gran cosa, ya que eso es todo un mundo, pero básicamente a cualquier elemento se le puede aplicar directamente, en línea, algunos atributos que hacen referencia a las hojas de estilo.

tabindex

Este es quizá uno de los desconocidos a la hora de mejorar la usabilidad de un sitio, y es que gracias a tabindex cada vez que pulsemos en la tecla «tab» vaya a un sitio y otro de la página. De todas formas, no todos los elementos permiten tener este atributo, sólo aquellos en los que el usuario puede focalizarse. Lo más habitual es su uso en formularios, para que el usuario vaya saltando de un campo a otro en el orden que tú le digas, y no en el que el código fuente tenga.

title

El genial title básicamente hace lo que su nombre indica: titulear. Y es que muchos elementos, cuando se pone el ratón encima permiten mostrar más información de lo que eso significa. Un ejemplo muy habitual sería el las abreviaturas…

<p>Internet usa mucho el protocolo <abbr title="Hypertext Transport Protocol">HTTP</abbr> y el <abbr title="File Transport Protocol">FTP</abbr>.</p>

data-*

Aunque, sin duda, si hay que tener algo en cuenta que va a hacer crecer la lista de atributos es el data-*. Gracias a este tipo de atributos podremos crear nuestros propios microformatos de una forma más o menos estándar.

Básicamente la idea es la de poder añadir información «oculta» que no moleste a los lectores pero que los navegadores y los robots sean capaces de interpretar si se les añade la forma de hacerlo.

Un ejemplo podría se algo como esto:

<div class="spaceship" data-ship-id="92432" data-weapons="laser 2" data-shields="50%" data-x="30" data-y="10" data-z="90">
<button class="fire" onclick="spaceships[this.parentNode.dataset.shipId].fire()">Fire</button>
</div>

Y, hasta aquí lo que corresponde a los atributos globales… ahora queda comenzar a tratar los elementos / tags que se pueden usar en HTML 5… que no son pocos y algunos llevan muchísimas nuevas funcionalidades que vale la pena analizar.