Иногда возникает необходимость связать с HTML элементом дополнительные данные, с которыми потом будет работать JavaScript. Простое и очевидное решение — добавить новый атрибут, но с ним не согласен валидатор. Как тут быть?

Решение очевидно, отправить старичка на пенсию и посмотреть в будущее. В HTML5 мы можем объявить любой атрибут с тем лишь условием, что его имя должно начинаться на data-:

<div data-example="Пример атрибута" data-targets=".content count"></div>

Раздел спецификации: Embedding custom non-visible data

Чтобы пройти проверку валидатором нужно использовать доктайп HTML5:

<!DOCTYPE html>

Но он же еще только в черновике? CSS3 тоже в черновике, но никому это не мешает использовать готовые элементы. Как некоторые любят говорить «Хватит тормозить развитие веб». Для валидных HTML 4.01 документов переход на HTML5 в большинстве случаев сводится к смене доктайпа. С XHTML несколько сложнее, нужно использовать Content-Type: application/xhtml+xml (отдавать XHTML5 с Content-Type: text/html для  обработки HTML парсером нельзя), что приводит к столкновению с реальным миром, многие браузеры его не поддерживают, а некоторые, даже не собираются, хорошее решение этой проблемы не использовать XHTML.

Самое замечательное в этом нововведении то, что это не нововведение, а обычный атрибут, в HTML5 он просто стандартизируется.

<p id="attribute-test" data-example="Пример атрибута"></p>

<script type="text/javascript">
  // прямой доступ к атрибуту с данными
  // работает во всех браузерах
  var attributeTest = document.getElementById('attribute-test');
  attributeTest.innerHTML = attributeTest.getAttribute('data-example');
</script>

Для упрощения доступа к таким данным в HTML5 вводится DOM атрибут dataset, но браузерами он пока не поддерживается:

<p id="dataset-test" data-test="Поддерживается атрибут dataset">
  Атрибут dataset не поддерживается
</p>

<script type="text/javascript">
  // удобный доступ к данным через dataset
  // браузерами пока не поддерживается
  var datasetTest = document.getElementById('dataset-test');
  if(datasetTest.dataset) {
    datasetTest.innerHTML = datasetTest.dataset.test;
  }
</script>

Пример

Ответ на статью: Интересная задачка для знатоков.