Los atributos de datos en HTML5 son una manera de almacenar información adicional o personalizada sobre un elemento HTML, que no es necesaria para que el navegador muestre la página web, pero puede ser útil para realizar ciertos tipos de operaciones en JavaScript.
El atributo de datos puede ser cualquier cosa y puede llamarse de cualquier manera, siempre y cuando comience con `data-`. Por ejemplo, si tiene una imagen y desea almacenar información adicional, como una descripción o un título personalizado, puede hacerlo así:
```html
```
En este caso, ‘descripcion’ es un atributo de datos personalizado que puede ser útil para agregar funcionalidad adicional, como un cuadro de texto emergente con información adicional sobre la imagen cuando se pasa el ratón sobre ella.
Los atributos de datos se utilizan ampliamente en la codificación front-end porque permiten a los desarrolladores agregar datos a sus páginas HTML de una manera que es fácil de acceder con JavaScript y jQuery.
Para acceder a los atributos de datos en JavaScript, se puede utilizar el método dataset. En el ejemplo anterior, si quisieras acceder al valor del atributo de datos ‘descripcion’ en JavaScript, podrías hacerlo de la siguiente manera:
```javascript
var img = document.querySelector(‘img’);
console.log(img.dataset.descripcion); // “Esta es una descripción de mi imagen.“
```
Los atributos de datos hacen que HTML5 sea un lenguaje de marcado más flexible y poderoso, lo que también contribuye a una mayor separación entre la estructura (HTML), el estilo (CSS) y la funcionalidad (JavaScript) de una página web.
