En HTML5 los atributos se usan para informar del tipo de contenidos del elemento a los que se aplican, en esta entrada voy a repasar algunos de ellos.
Cambiar el orden de una lista
En primer lugar vamos a ver el atributo reversed, es muy fácil de usar pero puede ahorrarte muchas horas de trabajo.
<ol reversed> <li>Lista 1</li> <li>Lista 2</li> <li>Lista 3</li> <li>Lista 4</li> <li>Lista 5</li> </ol>
Como vemos tenemos una lista desordenada (ol) y le hemos añadido el atributo reversed que simplemente cambia el orden de la lista, poniendo el último elemento el primero. Imagina si tenemos que cambiar el HTML de algunas listas en nuestro proyecto, con este atributo no es necesario cambiar nada más.
Descargar un enlace
Este otro atributo nos permite cambiar el funcionamiento habitual de un enlace. Imagina que queremos que se descargue un fichero html o php en vez de abrirse en un navegador, bastaría con añadirlo como atributo en el ancla.
<p><a download href="pagina.html">Descargar</a></p>
Notificar eventos
Cuando navegamos es posible que queramos recoger esa actividad o ejecutar algún proceso en segundo plano, para eso podemos añadir el atributo ping.
<p><a ping="ping.php" href="pagina.html">Guardar en base de datos el clic.</a></p>
En este ejemplo al hacer clic en el enlace se ejecutara el fichero ping.php, el que podemos usar por ejemplo para guardar estadísticas de clic, actualizar un excel, o mandar un mail informativo.
Este atributo permite generar programación en segundo plano de forma muy sencilla.
Crear atributos personalizados
En HTML 5 disponemos de un montón de atributos, cada etiqueta dispone de los suyos propios, pero además podemos crear los nuestros propios mediante el atributo data-.
<img src="ejemplo.jpg" data-autor="imacreste" />
Aunque visualmente no se vea nada raro, podemos observar en el código fuente que el nuestro atributo esta y por tanto podemos llamarlo desde javascript. Vamos a ver un ejemplo:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> //en el head
<img id="imagen" src="jejemplo.jpg" data-autor="imacreste" />
<script>
$("#imagen").click(function() {
var autor = this.getAttribute("data-autor");
alert("El autor es: " + autor + "."); });
</script>
En primer lugar cargamos el framework JQuery de javascript en la cabecera del fichero html, luego identificamos la imagen y finalmente con JQuery recogemos el valor del autor de la imagen y cuando se hace clic en la misma mostramos su nombre por pantalla.
Editar el texto desde el navegador
Para que el usuario pueda editar un texto desde el navegador, hasta ahora era necesario añadir un formulario, que rellene los datos y envié la información. Ahora podemos hacerlo desde un párrafo, o un encabezado, veamos como:
<p contenteditable="true" spellcheck="false">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Continuacion...</p>
- contenteditable: hace que el contenedor que tiene el atributo pueda ser editado por el usuario. En realidad no vale de mucho ya que no se almacena, pero se podría guardar, peor lo veremos en otra entrada.
- spellcheck: Si no ponemos esta etiqueta, mientras el usuario escribe se le marcaran los errores ortográficos.. pero imagina que es una prueba de un idioma y no queremos que se le marque como error.
Arrastrar contenido HTML
Otra posibilidad que se ha mejorado y facilitado mucho es poder crear bloques que se puedan arrastrar.
<p>Lorem Ipsum es simplemente el texto de relleno <span draggable="true">de las imprentas y</span> archivos de texto.</p>
Si pasamos el ratón veremos cómo al pasar por encima de la etiqueta con el atributo cambia a flechita que indica que se puede mover, aunque para que sirva para algo se necesita javascript que veremos en otra entrada.
Evitar que un texto sea traducido
Actualmente es bastante frecuente que los usuarios tengan instalado un traductor en su navegador y que eso facilite la lectura de textos en otros idiomas, pero imagina que tenemos una página de un libro en el cual su título es importante que sea en el idioma de origen, y por tanto necesitamos que no sea traducido por estas herramientas, debemos usar el atributo translate de la siguiente forma.
<p>Lorem Ipsum es simplemente el texto de relleno <span translate="no">de las imprentas y</span> archivos de texto.</p>