HTML5: atributos

Como se explicó en el capítulo anterior, los elementos pueden contener atributos que se utilizan para establecer varias propiedades de un elemento.

Algunos atributos se definen globalmente y se pueden usar en cualquier elemento, mientras que otros se definen solo para elementos específicos. Todos los atributos tienen un nombre y un valor y se ven como se muestra a continuación en el ejemplo.

A continuación se muestra el ejemplo de un atributo HTML5 que ilustra cómo marcar un elemento div con un atributo llamado clase usando un valor de "ejemplo" -

<div class = "example">...</div>

Los atributos solo se pueden especificar dentro de start tags y nunca debe usarse en end tags.

Los atributos HTML5 no distinguen entre mayúsculas y minúsculas y pueden escribirse en mayúsculas o en mayúsculas, aunque la convención más común es utilizar minúsculas.

Atributos estándar

Los atributos enumerados a continuación son compatibles con casi todas las etiquetas HTML 5.

Atributo Opciones Función
llave de acceso Usuario definido Especifica un atajo de teclado para acceder a un elemento.
alinear derecha, izquierda, centro Alinea las etiquetas horizontalmente
antecedentes URL Coloca una imagen de fondo detrás de un elemento
bgcolor valores numéricos, hexadecimales, RGB Coloca un color de fondo detrás de un elemento
clase Usuario definido Clasifica un elemento para su uso con hojas de estilo en cascada.
contento verdadero Falso Especifica si el usuario puede editar el contenido del elemento o no.
Menú de contexto ID de menú Especifica el menú contextual de un elemento.
datos-XXXX Usuario definido Atributos personalizados. Los autores de un documento HTML pueden definir sus propios atributos. Debe comenzar con "datos-".
arrastrable verdadero, falso, automático Especifica si un usuario puede o no arrastrar un elemento.
altura Valor numérico Especifica la altura de las tablas, las imágenes o las celdas de una tabla.
oculto oculto Especifica si el elemento debe estar visible o no.
carné de identidad Usuario definido Nombra un elemento para usar con hojas de estilo en cascada.
articulo Lista de elementos Se utiliza para agrupar elementos.
itemprop Lista de artículos Se utiliza para agrupar elementos.
corrector ortográfico verdadero Falso Especifica si el elemento debe tener su ortografía o gramática revisada.
estilo Hoja de estilo CSS Especifica un estilo en línea para un elemento.
tema Identificación definida por el usuario Especifica el elemento correspondiente del elemento.
tabindex Número de pestaña Especifica el orden de tabulación de un elemento.
título Usuario definido Título "emergente" para sus elementos.
valign arriba, medio, abajo Alinea verticalmente las etiquetas dentro de un elemento HTML.
anchura Valor numérico Especifica el ancho de tablas, imágenes o celdas de tabla.

Para obtener una lista completa de etiquetas HTML5 y atributos relacionados, consulte nuestra referencia a etiquetas HTML5 .

Atributos personalizados

Una nueva característica que se está introduciendo en HTML 5 es la adición de atributos de datos personalizados.

Un atributo de datos personalizado comienza con data-y se nombraría según sus requisitos. Aquí hay un ejemplo simple:

<div class = "example" data-subject = "physics" data-level = "complex">
   ...
</div>

El código anterior será HTML5 perfectamente válido con dos atributos personalizados llamados datasubject y data-level . Podrá obtener los valores de estos atributos utilizando las API de JavaScript o CSS de manera similar a como lo hace con los atributos estándar.