HTML (o quizás solo XHTML?) Es relativamente estricto cuando se trata de atributos no estándar en las etiquetas. Si no forman parte de la especificación, su código se considera no compatible.

Sin embargo, los atributos no estándar pueden ser bastante útiles para pasar metadatos a Javascript. Por ejemplo, si se supone que un enlace muestra una ventana emergente, puede establecer el nombre de la ventana emergente en un atributo:

<a href="#null" class="popup" title="See the Popup!" 
   popup_title="Title for My Popup">click me</a>

Alternativamente, puede almacenar el título de la ventana emergente en un elemento oculto, como un tramo:

<style>
    .popup .title { display: none; }
</style>
<a href="#null" title="See the Popup!" class="popup">
    click me
    <span class="title">Title for My Popup</span>
</a>

Sin embargo, estoy desgarrado en cuanto a cuál debería ser un método preferido. El primer método es más conciso y, supongo, no se complica tanto con los motores de búsqueda y los lectores de pantalla. A la inversa, la segunda opción facilita el almacenamiento de grandes cantidades de datos y, por lo tanto, es más versátil. También cumple con las normas.

Tengo curiosidad por lo que son los pensamientos de esta comunidad. ¿Cómo manejas una situación como esta? ¿La simplicidad del primer método supera las desventajas potenciales (si las hay)?