Atributos HTML5: reversed, data, ping, download, contenteditable, spellcheck y draggable

Home » Blog » Atributos HTML5: reversed, data, ping, download, contenteditable, spellcheck y draggable

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>
Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas

Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.

erlantz rique
erlantz rique
19/02/2024

Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.

Jose Marlasca
Jose Marlasca
06/02/2024

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/2024

Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.

Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024

Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%

Asier Hermoso
Asier Hermoso
03/01/2024

Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita 😉
Un crack!!

itxaso zubia
itxaso zubia
15/12/2023

El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.

Fernando Cózar
Fernando Cózar
02/11/2023