Desde la versión 5 de HTML, HTML permite a los desarrolladores agregar atributos que nosotros mismos podemos agregar a las etiquetas. Los propósitos para ello pueden ser variados. Estos Data Attributes son muy utilizados en Javascript.
Existe una regla para crear los Data Attributes, y es que tienen que empezar por la palabra data-. Después del guion medio le ponemos el nombre que queramos, de la siguiente manera.
Ejm
<li data-name="primavera">Primavera</li> <li data-name="verano">Verano</li> <li data-name="otoño">Otoño</li> <li data-name="invierno">Invierno</li>
Muchos de los frameworks, como Bootstrap… para la programación interna de sus componentes de UI, utilizan mucho este tipo de atributos.