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.