Los atributos globales se utilizan para introducir parámetros adicionales a todos los elementos HTML. Por lo tanto, son atributos que permiten modificar características específicas, como de diseño o funcionalidad, de cualquier elemento HTML, ya sea un párrafo, un encabezado, un enlace o una imagen.
Los atributos globales tienen una sintaxis idéntica al resto de atributos. Tienen dos partes: el nombre y el valor separados por el símbolo «igual» (=). No obstante, algunos atributos son binarios, por lo que no requieren valor: su inclusión los activa y su omisión deja la configuración por defecto.
Lista de atributos globales
El grupo de los atributos globales fue introducido en HTML5. Esto significa que los elementos introducidos en HTML5 también soportan el uso de atributos globales. No obstante, hay algunas excepciones. Por ejemplo, el atributo lang no tendrá efecto en un elemento sin contenido, y el atributo spellcheck no tendrá afectación en el comportamiento de un párrafo.
Lista de atributos globales ordenados por nombre:
| Nombre del atributo | Definición |
|---|---|
accesskey | Define una tecla que ejecutará una acción asociada al elemento cuando el usuario la pulse. |
autocapitalize | Convierte a mayúsculas de forma automática un texto que ha sido entrado por el usuario. |
autofocus | Coloca el foco sobre el elemento justo cuando se termina de cargar el documento HTML. |
autocomplete | Provee información sobre cómo los navegadores web deben hacer sugerencias de autocompletado. |
class | Define el nombre de una clase o una lista de clases para aplicar estilos en cascada (CSS). |
contenteditable | Indica si el elemento en cuestión debería ser editable o no para el usuario. |
data-* | Introduce datos personalizados para el intercambio de información entre el HTML y la representación del DOM. |
dir | Especifica la dirección en la que el texto está escrito. Útil para ciertos idiomas. |
draggable | Indica si el elemento puede ser arrastrado. |
enterkeyhint | Muestra un icono de la tecla Enter en teclados virtuales. |
hidden | Indica que el elemento vinculado a este atributo no debe ser mostrado por el navegador web. |
id | Define el nombre de un identificador único que puede ser usado tanto en CSS como en JS. |
inputmode | Provee qué tipo de mecanismo de entrada debe usarse para entrar datos en elementos editables. |
is | Especifica un nombre para un elemento personalizado que extiende a otro elemento. |
itemid | Indica un identificador único y global para ser usado en un ítem con microdatos. |
itemprop | Añade propiedades a un ítem, pensado para ser usado con microdatos. |
itemref | Proporciona una lista de identificadores de ítems con propiedades adicionales, para microdatos. |
itemscope | Sirve para especificar que el HTML contenido en un bloque se refiere a un término de microdatos. |
itemtype | Especifica la URL que se empleará para definir las propiedades de los microdatos. |
lang | Define el lenguaje utilizado en el contenido del elemento en cuestión. |
nonce | Indica un número criptográfico único («nonce») para determinar si un recurso externo será cargado. |
slot | Permite especificar el nombre del <slot> en el cual se emplaza el elemento vinculado. |
spellcheck | Indica si el elemento debe estar sujeto a revisiones ortográficas o gramaticales. |
style | Permite introducir declaraciones CSS que se aplicarán directamente sobre el elemento. |
tabindex | Establece el orden de navegación mediante la tecla tabuladora (Tab). |
title | Permite establecer un título a un elemento para mejorar la accesibilidad. |
translate | Controla si el navegador debe traducir o no el contenido del elemento y el de sus hijos. |
Uso de los atributos globales
El atributo ‘accesskey’
Mediante el atributo access es posible definir una tecla o una lista de teclas que ejecutará una acción asociada al elemento. Por ejemplo, una tecla asociada a un elemento de enlace (<a>) tendrá la acción de visitar el enlace. Si se trata de una caja de texto (<input>), el navegador le pondrá el foco.
La tecla especificada se deberá pulsar de forma combinada con Alt, Ctrl, Alt+Shift o Ctrl+Alt, dependiendo del navegador web. En Chromium y Google Chrome se usa la tecla Alt.
En el ejemplo siguiente se especifica la tecla r. Por lo tanto, la combinación para ejecutar la acción será Alt+r. Ejemplo de código HTML:
<p>Pulsa la teclas <kbd>Alt</kbd>+<kbd>r</kbd>:
<a accesskey="r" href="https://recursivos.com/">Recursivos</a>
</p>
Resultado:
Pulsa la teclas Alt+r: Recursivos
El atributo ‘autocapitalize’
El atributo autocapitalize permite controlar el uso de mayúsculas y minúsculas en textos introducidos por el usuario. De esta manera se convierten de forma automática. Este atributo tiene cuatro valores específicos:
off | El navegador web no convierte automáticamente el texto a mayúsculas. |
on | El navegador web convierte a mayúsculas el primer carácter de cada frase. |
words | El navegador web convierte a mayúsculas el primer carácter de cada palabra. |
characters | El navegador web convierte a mayúsculas todos los caracteres introducidos. |
El atributo ‘autofocus’
Gracias al atributo autofocus es posible colocar el foco sobre el elemento deseado justo cuando se termina de cargar el documento HTML. Se trata de un atributo binario, por lo que no requiere valor, y su inclusión en el elemento ya establece este parámetro como verdadero.
El atributo ‘autocomplete’
El atributo autocomplete permite especificar cómo los navegadores web deben hacer sugerencias de autocompletado al usuario. Se utiliza en elementos de entrada de texto y funciona como un intento de adivinar lo que el usuario está escribiendo. Este atributo tiene varios valores predefinidos:
on | El navegador web puede completar la entrada de texto de forma automática. No se necesita proporcionar información sobre el tipo de datos que se espera en el control. |
off | El navegador web no puede seleccionar de forma automática un valor para el control. En general suele ser información sensible que no será reutilizada, como en un campo de registro. |
Este atributo puede tener muchos más valores predefinidos, como name, username, organization o country. Para conocerlos todos en detalle visita la lista completa de identificadores de autocompletado.
El atributo ‘class’
El atributo class es seguramente uno de los más utilizados en HTML. Con él es posible asignar selectores de estilos a los elementos y así se les puede aplicar estilos CSS. El valor de este elemento será una cadena de texto que puede contener guiones de separación -, pero no espacios.
El atributo ‘contenteditable’
Con ayuda del atributo contenteditable es posible indicar si el elemento en cuestión debe ser editable o no para el usuario. De esta manera, el navegador web permitirá que el visitante edite el contenido del elemento. Este valor es binario y con su inclusión ya hará el contenido editable.
El atributo ‘data-*’
El atributo data-* permite introducir datos personalizados para el intercambio de información entre el HTML y la representación del DOM. Es un atributo que puede ser usado tanto en CSS como en JavaScript, es decir, por programas. Este atributo siempre comienza con la cadena de texto data-.
El valor de este atributo dependerá de lo que decida el desarrollador. Por ejemplo, puede ser de utilidad para especificar un código de referencia de un registro de una base de datos: data-referencia="56424". El usuario nunca lo verá.
El atributo ‘dir’
Con el atributo dir se especifica la direccionalidad de un texto. Es por tanto un atributo muy útil para porciones de texto cuyo idioma es diferente al idioma principal del documento. Puede tener uno de estos tres valores específicos:
ltr | De izquierda a derecha (left to right). |
rtl | De derecha a izquierda (right to left). |
auto | El navegador web decide mediante un algoritmo interno. |
El atributo ‘draggable’
El atributo draggable indica si un elemento puede ser arrastrado. Al tratarse de un atributo binario no requiere ningún valor. Su inclusión convierte el elemento en cuestión en un elemento que se puede arrastrar. Hay que tener en cuenta que este atributo tiene soporte sólo en algunos navegadores web.
El atributo ‘enterkeyhint’
El atributo enterkeyhint permite mostrar un icono de la tecla Enter en teclados virtuales, de modo que refleje de mejor forma la acción que será ejecutada al presionar la tecla.
El atributo ‘hidden’
El atributo hidden permite esconder elementos HTML. Al tratarse de un atributo binario, con su inclusión será suficiente para que un elemento deje de aparecer en el documento HTML a pesar de estar en él, pues los navegadores web lo esconderán completamente, como si no existiera.
El atributo ‘id’
El atributo id permite definir el nombre de un identificador único en el documento HTML que puede ser usado tanto en estilos CSS como en implementaciones de interactividad. Es uno de los atributos más utilizados, ya que gracias a él se puede apuntar a un elemento HTML desde JavaScript.
El atributo ‘inputmode’
Con el atributo inputmode se indica el tipo de mecanismo de entrada más beneficioso para que los usuarios introduzcan datos en un control o en un elemento con el atributo contenteditable. Este atributo puede tener ocho valores predefinidos y son los siguientes:
none | No se indica ningún mecanismo de entrada. |
text | Entrada de texto. |
tel | Entrada de número de teléfono. |
url | Entrada de una URL válida. |
email | Entrada de direcciones de correo electrónico. |
numeric | Entrada de valores numéricos enteros. |
decimal | Entrada de valores numéricos fraccionales. |
search | Entrada de texto optimizada para propósitos de búsqueda. |
El atributo ‘is’
El atributo is permite especificar un nombre para un elemento personalizado que, a su vez, extiende a otro elemento. Este atributo requiere que se haya definido programando una clase extendida, así que los autores de contenido probablemente no le encuentren un uso productivo.
El atributo ‘itemid’
El atributo itemid se usa para indicar un identificador único y global para ser usado en un ítem con microdatos.
El atributo ‘itemprop’
El atributo itemprop permite añadir propiedades a un ítem.
El atributo ‘itemref’
Mediante el atributo itemref se proporciona una lista de identificadores de ítems que son diferentes de los identificadores del atributo itemid. Los identificadores de este atributo tienen propiedades adicionales en otras partes del documento.
El atributo ‘itemscope’
El atributo itemscope indica que se va a definir una entidad o contenido en bloque. Por lo general funciona en conjunto con el atributo itemtype para especificar que el HTML contenido en un bloque se refiere a un término concreto.
El atributo ‘itemtype’
Con el atributo itemtype se indica el tipo de contenido mediante una URL. Se debe introducir una URL válida de un vocabulario, como sería el caso de Schema.org, ya que describe el elemento y el contexto de sus propiedades.
El atributo ‘lang’
El atributo lang permite especificar el idioma principal que se ha usado en el documento, de modo que se usa en la etiqueta de apertura del elemento <html>. En caso de que exista otro idioma en el mismo documento, se utilizará este atributo sobre el elemento que contiene el otro idioma.
El atributo ‘nonce’
El atributo nonce se utiliza para indicar un número criptográfico único que determina si un recurso externo puede ser cargado y aplicado al documento según la política de seguridad del sitio. «Nonce» viene del inglés number used once, que significa “número usado sólo una vez”.
El atributo ‘slot’
El atributo slot se usa para especificar el nombre del elemento <slot> en el que se emplaza el elemento vinculado. En este sentido, el valor de este atributo debe coincidir con el valor del atributo name del elemento <slot> al que apunta. Se trata de un atributo que está pensado para ser utilizado por programas, por lo que los autores de contenido le encontrarán escasa utilidad.
El atributo ‘spellcheck’
El atributo spellcheck permite indicar si el elemento debe estar sujeto a revisiones ortográficas o gramaticales. Es un atributo binario, de modo que su inclusión activa esta funcionalidad. En este caso, los navegadores web subrayarán en rojo las palabras con errores.
El atributo ‘style’
El atributo style es un viejo conocido que se ha usado durante muchos años para aplicar estilos directamente sobre el elemento. Su uso implica no tener que recurrir a los atributos id y class para seleccionar el elemento en cuestión, sin embargo, se desaconseja la aplicación de estilos de forma directa.
El atributo ‘tabindex’
Con el atributo tabindex es posible establecer un número para cada elemento que indica la posición en la navegación mediante la tecla tabuladora (Tab). Esto es especialmente útil en formularios, donde se puede saltar de un control a otro en un orden establecido. Su valor serán números enteros.
El atributo ‘title’
El atributo title es el que permite establecer un título a cualquier elemento. La finalidad de este atributo es la de mejorar la accesibilidad de la página web. Cuando un usuario pone el puntero del ratón encima del elemento, los navegadores web muestran el título como texto de ayuda.
El atributo ‘translate’
Mediante el atributo translate puede controlarse si el navegador web debe traducir o no el contenido del elemento y el de los elementos anidados. Este atributo puede ser útil cuando se quiere mantener un texto sin traducción, por ejemplo, en páginas de aprendizaje de idiomas. Puede tener dos valores:
yes | Indica que el elemento puede ser traducido. |
no | Indica que el elemento no debe ser traducido. |
