Хранение данных в тегах HTML в качестве пользовательских атрибутов

Question

Это хорошая практика хранения связанной информации в HTML тег?

$("#my_div").append("<span id='info' boo='foo'/>");
$("#info").attr("boo");

Я сталкивался с такой техникой (и немного позаимствовал ее) в TAL (в ZPT) где вы могли бы использовать tal:attributes заявление, чтобы изменить HTML теги (например, передавая значение boo переменная из бэкэнда, которая будет отображаться в конечном документе как значение атрибута):

<span id='info' tal:attributes='boo view/boo'>

результат:

<span id='info' boo='foo'>

Эта техника когда-нибудь сломает документ, или это безопасно по спецификации?

Answer 1

Правильный способ сделать это - использовать атрибуты data-*:

http://www.w3.org/TR/2011/WD-html5-20110525/elements.html

Тангенциально, у jQuery есть специальный метод для работы с ними. Например:

<p id='string' data-user_name='thedude'></p>
$('#string').data('user_name') => "thedude"
typeof $('#string').data('name') => "string"

<p id='number' data-user_id='12345'</p>
typeof $('#number').data('user_id') => "number"

<p id='boolean' data-user_is_active='true'></p>
typeof $('#boolean').data('user_is_active') => "boolean"

<p id = 'json' data-user='{"name": "the dude", "id": "12345"}'></p>
typeof $('#json').data('user') => "object"
// embedding JSON is extremely useful in my experience

Answer 2

w3.org позволяет в HTML5 использовать пользовательские данные в HTML-тегах;

Смотрите раздел:

3.2.3.9 Встраивание пользовательских невидимых данных с атрибутами data-*

Пользовательский атрибут данных - это атрибут без пространства имен, имя которого начинается со строки "data-", имеет как минимум один символ после дефиса [...]

Пример:

<ol>
 <li data-length="2m11s">Beyond The Sea</li>
 ...
</ol>

Итак, я скажу, что это принятая практика для HTML5.