Este artículo forma parte del Curso HTML5 desde cero.
Haz click aquí para ver el índice.
Como has aprendido, las etiquetas de HTML permiten definir y estructurar un documento web, y has utilizado atributos en muchas de ellas para especificar valores necesarios o para modificar el uso de una etiqueta.
Los atributos permiten especificar en la mayoría de ocasiones el correcto funcionamiento de la etiqueta y, centrándonos en HTML5, esto es lo que tienes que tener en mente sobre ellos:
- A menos que nos sea imposible, los valores de los atributos deberán ir entre comillas dobles («valor«).
- Existen 2 tipos de atributos:
- Globales: Aquellos que se pueden aplicar a todas las etiquetas de HTML5
- Especificos: Aquellos que podremos añadir o no según la etiqueta en cuestión.
Como ya hemos visto muchos atributos especificos para las etiquetas que te he enseñado en los módulos anteriores, en este módulo veremos los atributos globales de HTML5.
Contenido del artículo
Atributos Globales de HTML5
Los atributos globales se pueden añadir a todas las etiquetas del lenguaje HTML5 y permiten dar sentido y significado a las mismas dentro del contexto en el que se apliquen.
accesskey
Proporciona y genera un acceso de teclado para el elemento actual. Este atributo consiste de una lista de caracteres, separadas por espacios. El navegador debe utilizar el primero que exista en la distribución del teclado del ordenador.
class
Es una lista de clases del elemento, separadas por espacios. Las clases se utilizan para que el código CSS y JavaScript de la página web pueda seleccionar y acceder a estos elementos.
contenteditable
Es un atributo enumerado que indica si el elemento debe ser modificable por el usuario. Si es así, el navegador muestra este elemento de tal forma que el usuario puede modificarlo, eliminarlo, o añadir información (como cuando rellenamos información en un formulario). El atributo debe tener uno de los siguientes valores:
- true o empty string, el cual indica que el elemento es editable.
- false, el cual indicaque el elemento no debe ser editable.
Es el id de un <menu> para usar como menú contextual para este elemento.
data-*
Forma una clase de atributos, llamados custom data attributes, pero no veremos estos tipos de atributos en este curso, dado que está relacionado con la programación en HTML5 y otros lenguajes.
dir
Es un atributo enumerado que indica la direccionalidad del texto del elemento. Puede tener los siguientes valores:
- ltr, significa left to right y se utiliza para idiomas que se escriben de izquierda a derecha (como el Español).
- rtl, significa right to lefty se utiliza para idiomas que se escriben de derecha a izquierda (como el Árabe);
- auto, permite que el agente decida. Se utiliza un algoritmo básico, que analiza los caracteres dentro del elemento hasta que encuentra un caracter con una direccionalidad fuerte, a continuación, aplica esta dirección a todo el elemento (es decir, intenta entender en qué dirección está escrito el texto y así lo visualiza).
draggable
Es un atributo enumerado que indica si el elemento puede ser arrastrado, usando la API de Drag and Drop. Puede tener los siguiente valores:
- true, indica que el elemento puede ser arrastrado.
- false, indica que el elemento no puede ser arrastrado.
Para que entiendas este atributo te recomiendo que lo incluyas en cualquier etiqueta de los archivos HTML5 con los que has trabajado en los módulos anteriores. Aunque suele usarse en objetos (imágenes, botones, etc), puedes comprobar el efecto sobre un título o un párrafo. Verás que al intentar «desplazar» con el ratón un texto normal, lo que haces es seleccionar ese texto. Sin embargo, si intentas arrastrar un texto con este atributo como true, verás que coges ese texto con el ratón y puedes desplazarlo por la pantalla.
dropzone
Es un atributo enumerado que indica qué tipos de contenidos pueden soltarse sobre el elemento, usando de nuevo la API de Drag and Drop. Puede tener los siguiente valores:
- copy, indica que al soltar se crea una copia del elemento que fue arrastrado
- move, indica que el elemento que fue arrastrado será movido a esta nueva locación.
- link, creará un link a la información arrastrada.
Es un atributo booleano que indica si el elemento aún no es, o ya no es, relevante. Por ejemplo, puede usarse para ocultar elementos de la página que no pueden usarse hasta que un proceso o una acción concreta se realice. El navegador no mostrará/renderizará dichos elementos. Este atributo no debe ser utilizado para ocultar el contenido que legítimamente podría ser mostrado.
id
Define un identificador único (ID) el cual debe ser único en todo el documento. Es decir, esa ID ha de identificar únicamente a un elemento, ya sea un párrafo, un título, una imagen o cualquier otro elemento encerrado en una etiqueta.
itemid
Identificador único y global de un item.
itemprop
Usado para agregar propiedades a un item. Cada elemento HTML puede tener un atributo itemprop especificado, y consiste de nombre y valor.
itemref
Propiedades que no son descendientes de un elemento mediante el atributo itemscope pueden ser asociadas con el item usando un itemref. Itemref provee una lista de element ids con propiedades adicionales en cualquier parte del documento.
itemscope
Itemscope (habitualmente) funciona junto con itemtype para especificar que el HTML contenido en un bloque es sobre un item en particular. Itemscope crea el item y define el scope del itemtype asociado con él. itemtype es una URL válida de vocabulario (como schema.org) que describe el item y el contexto de sus propiedades.
itemtype
Especifica la URL del vocabulario que será usado para defeinir itemprops (propiedades del item) in la estructura de datos. Itemscope es usado para setear el scope de dónde en la estructura de datos es seteado el vocabulario por itemtype.
lang
Define el lenguage del elemento, el lenguage en que son escritos los elementos no-editables o el lenguage en que deben ser escritos los elementos editables.
spellcheck
Es un atributo enumerado que define si el elemento se puede comprobar por errores de ortografía. Puede tener los siguientes valores:
- true, indica que el elemento debería, si es posible, ser revisado por errores.
- false, indica que el elemento no debe ser revisado por errores.
style
Contiene declaraciones de estilo CSS para ser aplicadas al elemento. Esto lo veremos más adelante, en el curso de CSS3, pero piensa que dentro de este artibuto puedes añadir código CSS (aunque no es lo más recomendable).
tabindex
Se utiliza para establecer el orden de tabulación en el documento web, y establece de qué forma el cursos se sitúa en los diferentes elementos del documento cuando el usuario va pulsando la tecla TABULADOR
- Un valor negativo significa que el elemento debe no debe ser alcanzado vía la navegación secuencial del teclado (la tecla TABULADOR que te he comentado).
- 0 significa que el elemento debe ser seleccionable y alcanzable vía la navegación secuencial del teclado, pero el orden es relativo (lo decide el navegador en función de la estructura de tu página web)
- Un valor positivo significa que debe ser seleccionable y alcanzable vía la navegación secuencial del teclado, el orden relativo es definido por el valor del atributo: sigue la secuencia en orden ascendente. Si varios elementos comparten el mismo tabindex, su orden relativo sigue su posición en el documento.
title
Contiene un texto que representa información de asesoramiento en relación al elemento al que pertenece.
translate
Es un atributo que se utiliza para especificar si los valores de los atributos de un elemento son traducidos o si hay que dejarlos sin cambios. Puede tener los siguientes valores:
- Cadena vacía y yes, indica que el elemento será traducido.
- «no«, indica que el elemento no será traducido.
Sé que algunas de las explicaciones son algo ambiguas o difíciles de entender, pero con algunos atributos la única forma de comprenderlos será verlos en acción dentro de ciertas etiquetas y que realices las prácticas todas las veces que puedas para coger soltura y experiencia.
¡A practicar!
Este módulo ha sido algo más corto y algo más ambiguo, por lo que no te voy a añadir nuevas prácticas. Lo que te recomiendo es que cogas los documentos HTML5 de los módulos anteriores, sobre todo el de la práctica del módulo anterior, y apliques cualquiera de estos atributos a todas las etiquetas que quieras.
No verás cambios si abres tu documento HTML5 en el navegador, pero escribir estos atributos correctamente dentro de dichas etiquetas te dará práctica y soltura para el próximo módulo.
¡Recuerda usar la zona de comentarios para resolver dudas!
