Blog / HTML / Atributos en el HTML 5
Algunos atributos del HTML son muy importantes en cuanto al SEO, seguridad y accesibilidad de una página web. Otros cumplen funciones muy específicas.
Atributo: target
Se usa en enlaces para indicar su destino.
Función. Permite controlar la "navegación", por ejemplo, que el navegador abra el enlace en una nueva ventana. Por defecto, es decir si no lo indicamos, un enlace a otra página se abrirá en la ventana actual.
Ejemplo. target que abre una nueva ventana al pulsar el enlace:
target="_blank"
Atributo: rel
Se usa en enlaces e indica su tipo, así como otros aspectos muy importantes.
Función. Añadiendo o no "external" indicamos a los buscadores si un enlace es a otros sitios web o interno de la propia web (cuando no se indica). Existen una serie de valores adicionales que debemos añadir a enlaces externos, relacionados con el SEO y la seguridad.
Ejemplo. El atributo, para un enlace externo, "debería" ser:
rel="nofollow noopener noreferrer external"
El orden no importa, ni en cuanto a los
atributos de un elemento HTML, ni dentro de uno de ellos,
si como es el caso del atributo
rel
admite varios valores.
Atributo: title
Se usa en diferentes elementos, generalmente enlaces e imágenes.
Función. muestra información adicional al usuario si deja el puntero del ratón sobre el elemento que lo contiene.
Ejemplo. El siguiente párrafo contiene un atributo title:
Lorem ipsum.
Atributo: alt
Su uso es un elemento muy importante en imágenes ya que los buscadores lo registran. Además, es el texto alternativo que se muestra al usuario en caso de que la imagen no cargue y es usado por los dispositivos de lectura (screen readers).
Función. Aporta una descripción a la imagen.
Las imágenes que solo cumplen una función de diseño, deben tener un atributo alt vacío. Con esto, el HTML será válido en herramientas de auditoría web y se indica que se salte el elemento a los lectores de pantalla o screen readers.
Atributo: name
Requerido en elementos de formulario: inputs, textareas, etc.
Función. Permite obtener los datos de cada campo del formulario cuando se procesa.
Ejemplo. Campo de entrada de usuario de un formulario de login:
<input type="text"
name="username">
Atributo: accept
Atributo específico que permite controlar el tipo de fichero cargado en un formulario por un input de tipo "file".
Función. Especificar tipo de fichero soportado.
Ejemplo. Campos de entrada de imagen:
<input type="file"
name="image"
accept="image/*">
<!-- o concretando tipos, p.e. PNG / JPEG -->
<input type="file"
name="image"
accept="image/x-png,image/gif,image/jpeg">
Conclusiones
Siempre se debe usar el atributo rel en los enlaces si estos son externos, tanto para indicar su uso a los buscadores, como por las opciones de seguridad que proveen.
Se deben añadir los atributos alt y title a todas las imágenes importantes de una web. Muy importante en cuanto a su accesibilidad.
Fuentes consultadas:
- Difference between alt and title
- Image alt vs image title
- Answer from stackoverflow: How to allow <input type=“file”> to accept only image files?
21-08-2020 (actualizado 12-09-2020)