Atributos globales

Los atributos son un mecanismo de HTML mediante el cual los autores pueden establecer parámetros o configuraciones para los elementos. Estos atributos pueden definir, por ejemplo, la dirección del texto o el lenguaje usado dentro del elemento, una relación entre este y otro elemento, o información consultiva para su correcta interpretación, entre muchas otras.

En HTML5 existe un número de atributos definidos para todos los elementos en el estándar, denominados atributos globales. A pesar de ello, no todos los elementos serán afectados por todos los atributos grobales. Por ejemplo, el atributo spellcheck no afectará el comportamiento o la semántica de un párrafo, del mismo modo que el atributo lang no tendrá efecto en un elemento sin contenido o atributos de texto.

Lista de atributos globales

accesskey

Una tecla, o una lista de teclas separadas por espacios, para ser asociadas al elemento. Los navegadores ejecutarán la acción asociada al elemento (por ejemplo, siguiendo un vínculo para el elemento a) o le darán el foco cuando las teclas especificadas en este atributo sean presionadas en combinación con ALT, CTRL, ALT+SHIFT o CTRL+ALT, dependiendo del navegador.

Ejemplo

<p>You can use keys to follow this link: <a accesskey="h" href="http://www.htmlquick.com/">Homepage of HTMLQuick.com</a></p>

You can use keys to follow this link: Homepage of HTMLQuick.com

class

El nombre de una clase, o una lista de nombres de clases separados por espacios. Este atributo es utilizado en conjunto con hojas de estilo e indica al navegador qué clases se supone asignarán atributos presentacionales al elemento.

Ejemplo

<p class="referencias">Este artículo está basado en el libro "El viento en lo árboles" de Jhon L. Brooks</p>

contenteditable

Un valor que indica al navegador si debería permitir al visitante editar los contenidos del elemento. Si el atributo toma el valor "true" o la cadena vacía (""), o si simplemente está presente, los contenidos del elemento serán editables. Si toma el valor "false" (valor por defecto) o si está ausente, los contenidos no serán editables.

Ejemplo

<p contenteditable>Si tu navegador soporta este atributo, podrás editar este párrafo.</p>

Si tu navegador soporta este atributo, podrás editar este párrafo.

contextmenu

El valor de id de un menú emergente contextual (menu con el valor "popup" en su atributo type). Este menu será mostrado por los navegadores como un menú contextual para el elemento, habitualmente cuando el usuario haga click derecho sobre éste.

El soporte nativo para interfaces de menú es incompleto. Los autores pueden tener que depender de scripts para proveer esta funcionalidad en cualquier navegador, hasta que el soporte aumente.

Ejemplo

<p contextmenu="menumegusta">Cuando te das cuenta que estás del lado de la mayoría, es tiempo de hacer una pausa y refleccionar.</p>
<menu type="popup" id="menumegusta">
  <menuitem label="Fabuloso!" type="radio" radiogroup="megustagruporadio" checked></menuitem>
  <menuitem label="Mmm... nah!" type="radio" radiogroup="megustagruporadio"></menuitem>
</menu>

Cuando te das cuenta que estás del lado de la mayoría, es tiempo de hacer una pausa y refleccionar.

dir

La dirección en la que el texto en el contenido del elemento está escrito. Este atributo es útil al insertar una porción de contenido con una direccionalidad diferente a la del documento, como cuando se incluyen textos en arábico, hebreo, o siríaco en un documento escrito en alguna lengua occidental. Puede tomar tres valores indiferentes a mayúsculas y minúsculas:

  • rtl: Derecha a izquierda.
  • ltr: Izquierda a derecha.
  • auto: El navegador decide qué direccionalidad tiene el texto.

El mecanismo provisto por los navegadores para detectar la direccionalidad del texto es muy primitivo. Se alienta a los autores a proveer un valor para este atributo (aparte de "auto") cuando sea necesario.

Ejemplo

<p>El cartel decía: <q lang="he" dir="rtl">[texto en hebreo]</q>.</p>

draggable

Un valor booleano que especifica si el elemento puede ser arrastrado. Si el atributo toma el valor "true", el navegador le permitirá al usuario que arrastre este elemento. Si toma el valor "false" las capacidades de arrastre no serán provistas.

Cuando este atributo está presente, el atributo title debe estar presente también y proveer un nombre para el elemento, vital en interacciones no-visuales.

Desafortunadamente, el soporte provisto por los navegadores para operaciones de "arrastrar y soltar" es extremadamente bajo. Los autores pueden tener que recurrir a scripts hasta que el soporte aumente.

Ejemplo

<p draggable="true">Si tu navegador lo permite, puedes arrastrar este párrafo.</p>

Si tu navegador lo permite, puedes arrastrar este párrafo.

hidden

Un valor que indica que el elemento no es aún, o ya no es más, relevante. El atributo puede indicar esto tomando los valores "hidden" o la cadena vacía (""), o con su sola presencia. Los navegadores esconderán todo el elemento del documento (no sólo visual sino completamente) como si éste no existiera.

Ejemplo

<p>Este es el primer párrafo.</p>
<p hidden>Este es el segundo párrafo.</p>
<p>Este es el tercer párrafo.</p>

Este es el primer párrafo.

Este es el tercer párrafo.

id

Un identificador para el elemento. Este identificador debe ser único en el documento y puede ser utilizado para referirse al elemento desde vínculos, scripts, definidiones de estilo u otros atributos.

Los identificadores deben tener al menos un carácter de largo y no presentar caracteres de espacio (espacios, tabulaciones, saltos de línea, quiebres de página o retornos de carro).

Ejemplo

<p id="parrafo1">Es párrafo tiene un ID para que puedas, por ejemplo, manipularlo desde un script.</p>

is

Un nombre para un elemento personalizado que extiende a otro elemento del estándar.

Este atributo requiere que una clase extendida sea definida programáticamente para tener sentido. Los autores de contenido pueden no encontrarle un uso productivo.

Ejemplo

<button is="super-boton">Este es un botón personalizado que extiende a un elemento button regular.</button>

itemid

Un URI que coincida con un identificador global para la propiedad que el elemento está representando. Este identificador global debe ser definido por el vocabulario declarado en el atributo itemtype.

Este atributo debería estar presente únicamente si los atributos itemscope e itemtype también están presentes.

Este atributo es parte de la sintaxis de microdatos, un mecanismo de HTML5 para proveer versiones de los datos contenidos en el documento, que sean accesibles para scripts.

Ejemplo

<ul itemscope itemtype="http://vocab.example.net/book" itemid="urn:isbn:1-619-49173-7">
 <li>Título: <span itemprop="title">El signo de los cuatro</span></li>
 <li>Autor: <span itemprop="author">Sir Arthur Conan Doyle</span></li>
 <li>Fecha de publicación: <time itemprop="pubdate" datetime="2013-10-03">3 de Octubre de 2013</time></li>
</ul>

itemprop

Una lista de uno o más identificadores separados por espacios, que proveen cada uno el nombre de una propiedad para la cual este elemento brinda un valor.

Los identificadores en este atributo deben ser una propiedad permitida por la especificación definida en el atributo itemtype del ítem. Si el atributo itemtype no está presente, puede ser cualquier valor que no contenga un carácter punto ("."), ni un carácter dos puntos (":").

Este atributo es parte de la sintaxis de microdatos, un mecanismo de HTML5 para proveer versiones de los datos contenidos en el documento, que sean accesibles para scripts.

Ejemplo

<p itemscope><span itemprop="user">John Doe</span>: <span itemprop="comment">Eso está muy bueno!</span></p>

itemref

Una lista de uno o más identificadores separados por espacios, que coincidan con los atributos id de los elementos que proveen información para este ítem.

Este atributo es parte de la sintaxis de microdatos, un mecanismo de HTML5 para proveer versiones de los datos contenidos en el documento, que sean accesibles para scripts.

Ejemplo

<table>
  <tr>
    <th>Nombre</th>
    <td itemscope itemprop="name" itemref="apellido1">Johann Sebastian</td>
    <td itemscope itemprop="name" itemref="apellido2">Wolfgang Amadeus</td>
  </tr>
  <tr>
    <th>Apellido</th>
    <td id="apellido1" itemprop="surname">Bach</td>
    <td id="apellido2" itemprop="surname">Mozart</td>
  </tr>
</table>

itemscope

Un valor booleano que indica si el elemento es un ítem en el modelo de sintaxis de microdatos. Si este atributo toma el valor "itemscope" o la cadena vacía (""), o si simplemente está presente, el elemento es un ítem.

Este atributo es parte de la sintaxis de microdatos, un mecanismo de HTML5 para proveer versiones de los datos contenidos en el documento, que sean accesibles para scripts.

Ejemplo

<p itemscope>La <span itemprop="event-name">fiesta de cumpleaños de John</span> comenzará <time itemprop="event-time" datetime="2015-05-21 20:00">esta noche a las 8:00 en punto</time></p>

itemtype

Una lista de URIs, cada uno apuntando un recurso que define un vocabulario (el conjunto de nombre utilizados en el atributo itemprop). Si esta lista tiene más de un elemento, todos los elementos deben definir el mismo vocabulario.

La mayoría de los vocabularios globales pueden encontrarse en el sitio Schema.org. Debido a su popularidad, se alienta a los autores a usarlo como recurso de vocabularios seimpre que sea posible.

Este atributo es parte de la sintaxis de microdatos, un mecanismo de HTML5 para proveer versiones de los datos contenidos en el documento, que sean accesibles para scripts.

Ejemplo

<p itemscope itemtype="http://schema.org/Event">La ópera <span itemprop="name">La traviata</span> será puesta en escena <time itemprop="startDate" datetime="2015-08-10 22:00">el próximo lunes a las 10pm</time> y tendrá <time itemprop="duration" datetime="PT 2H">dos horas</time> de duración.</p>

lang

El lenguaje utilizado en el contenido del elemento y en todos los atributos que contengan texto. El lenguaje debe ser especificado con una etiqueta de lenguaje válida.

Es muy importante definir el atributo lang siempre que el texto sea presentado en un lenguaje diferente al del documento. Esto puede ser especialmente beneficioso para intérpretes como los navegadores de voz, que necesitan cambiar la pronunciación de las palabras de acuerdo al lenguaje en el que están escritas.

Ejemplo

<p>'Chaval' es la traducción más apropiada para '<span lang="en">Guy</span>'.</p>

'Chaval' es la traducción más apropiada para 'Guy'.

slot

El nombre del slot del componente en el cual este elemento debería emplazarse. El valor de este atributo debería coincidir con el atributo name del slot objetivo.

El atributo slot es parte de la especificación de shadow DOM y está pensado para ser manejado por programas. Los autores de contenido pueden encontrarle escasa utilidad en este atributo.

Ejemplo

<span slot="album">Mirando las estrellas</span>

spellcheck

Un valor que indica si el elemento debería estar sujeto a revisiones ortográficas o gramaticales. Si se establece a "true" o a la cadena vacía (""), los navegadores normalmente subrayarán en rojo las palabras con errores y proveerán alternativas en menús contextuales. Cuando se establece a "false", el navegador evitará revisar el contenido del elemento en busca de errores.

El atributo spellcheck está pensado para actuar en campos de texto y elementos con el atributo contenteditable habilitado. En la mayoría de los navegadores, sus efectos sólo serán mostrados cuando el elemento obtenga el enfoque.

El soporte para el atributo spellcheck es incompleto. Los autores pueden tener que recurrir a scripts con el fin de proveer revisiones ortográficas en cualquier navegador hasta que el soporte aumente.

Ejemplo

<input type="text" value="Texto a ser rebisado" spellcheck="true">

style

Un conjunto de declaraciones de CSS que serán aplicadas al elemento por parte de los navegadores, y definirán atributos presentacionales para éste. En contraste con el atributo class, este es considerado un modo "in situ" de aplicar propiedades de estilo.

Ejemplo

<p style="color: #ff6600; font-size: 1.5em">Este es un párrafo con un estilo definido.</p>

Este es un párrafo con un estilo definido.

tabindex

Un número entero que indica la posición del elemento en la navegación por tabulación (la navegación a través de todos los elementos que pueden recibir el enfoque presionando la tecla TAB). Si el valor es negativo, el elemento se encontrará excluido de la navegación por tabulación.

Los elementos que por defecto pueden recibir el enfoque son: a y link (con un valor en href), button, input (cuando su tipo no es "hidden"), select, textarea, menuitem, un elemento que define un contexto de navegación (como iframe), un elemento con el atributo contenteditable presente o th con una interfaz de ordenamiento.

Si este atributo es omitido, el navegador determinará automáticamente la posición de todos los elementos capaces de recibir el enfoque de acuerdo a su posición en el código.

Además de decidir la posición del elemento en la navegación por tabulación, el atributo tabindex también indica que el elemento puede recibir el enfoque, independientemente de su condición predeterminada.

Ejemplo

<a href="document2.html" tabindex="2" style="float: right;">Second document</a>
<a href="document1.html" tabindex="1">First document.</a>

title

Una línea de texto que representa información consultiva para el elemento, la cual podría actuar como descripción, expansión, nota al pie, título, etiqueta, instrucción, etc. Los navegadores usualmente mostrarán esta información como una descripción emergente (pequeña caja de texto) en respuesta a algún evento como, por ejemplo, cuando el usuario posa el mouse sobre el elemento.

Algunos elementos, como link, abbr, e input, definen semánticas adicionales para el atributo title más allá de la semántica descripta más arriba.

Ejemplo

<p>Pon el mouse sobre el siguiente vínculo para ver la descripción emergente: <a title="Vínculo a la página de inicio de HTMLQuick.com" href="http://www.htmlquick.com/es/">Tutoriales HTML</a>.</p>

Pon el mouse sobre el siguiente vínculo para ver la descripción emergente: Tutoriales HTML.

translate

Un valor que indica si el navegador debería traducir el contenido del elemento y el de sus hijos (incluídos los atributos con valores de texto) cuando el documento es adaptado a la lengua local. Si se establece a "yes" o a la cadena vacía (""), los navegadores normalmente traducirán todos los textos en este elemento. Si se establece a "false", los navegadores omitirán al elemento en el proceso de traducción.

El soporte provisto por los navegadores para el atributo translate es incompleto. Los autores no deberían confiar en esta funcionalidad hasta que el soporte aumente.

Ejemplo

<p translate="yes">Este fin de semana iremos al festival '<span translate="no">Fiesta loca</span>'.</p>

Este fin de semana iremos al festival 'Fiesta loca'.

dropzone

Una lista de identificadores separados por espacios, que coinciden, indiferentemente de mayúsculas y minúscula, uno de los siguientes valores:

  • copy: Indica que una copia del contenido soltado en el elemento debe ser agregada.
  • move: Hace que el contenido soltado se mueva al elemento.
  • link: Indica que un vínculo al contenido soltado debe ser agregado al elemento.
  • string:[type]: Indica que está permitido soltar una cadena del tipo "[type]" en el elemento.
  • file:[type]: Indica que estña permitido soltar un archivo de tipo "[type]" en el elemento.

El atributo dropzone No debería tener más de uno de los tres primeros valores ("copy", "move", y "link"). Si ninguno de ellos está presente, el valor "copy" estará implícito.

Este atributo ha sido removido del estándar debido a la falta de soporte provisto por los navegadores. Los autores deberían recurrir a scripts del lado cliente para reemplazar su funcionalidad.

Ejemplo

<p dropzone="copy string:text/html file:image/png">Este párrafo en una zona de entrega. Si tu navegador lo soporta deberías poder arrojar aquí cadenas HTML, y archivos PNG.</p>

Atributos de datos personalizados

Cualquier atributo en cualquier elemento que comience con la cadena "data-" es un atributo de datos personalizados. Estos atributos definen datos personalizados por el autor para el elemento en el cual son declarados y están diseñados para ser utilizados, en general, por programas.

En el siguiente ejemplo, se utilizan atirbutos de datos personalizados para ayudar a un programa a identificar un ítem a la venta y sus características, mientras no se dejan rastros de esta información específica en la vista de usuario.

Ejemplo

<td data-codigo="3213764135438543" data-categoria="chucherias" data-precio="25000000">
  <b>Ítem:</b> Huevo Fabergé Original de la Coronación Imperial<br>
  <b>Precio:</b> $25.000.000
</td>

Ítem: Huevo Fabergé Original de la Coronación Imperial
Precio: $25.000.000