Атрибуты пользователя в HTML

Часто для взаимодействия HTML и Javascript приходится добавлять свои придуманные атрибуты в код, который, естественно, не проходит валидацию.

Решение здесь очевидное — переход на HTML5

Для начала скажем валидатору, что мы хотим юзать HTML5, указав правильный пролог страницы:


<!DOCTYPE html>
<html>
...
</html>

Теперь можно создавать свои атрибуты тегов, не боясь пройти валидацию. Одно обязательное условие — имя атрибута должно начинаться с префикса data-


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

Обратится из скрипта ко вновь созданным атрибутам можно обычным способом:


<script type="text/javascript">
var elem = document.getElementById('test');
alert(elem.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>

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>