Пользовательские атрибуты HTML5 - зачем мне их использовать?

Question

Кажется, я не понимаю, почему я должен быть доволен тем, что HTML5 позволяет настраивать атрибуты Зачем мне их использовать?

Answer 1

Я полагаю, что вы ссылаетесь на атрибуты HTML5 [data-*].

Преимущество заключается в том, что вы можете легко связать некоторые данные сценариев (все еще семантические, но не для отображения) с вашими элементами без необходимости вставлять встроенныеJavascript повсюду, и это будет действительный HTML5.Чтобы сделать то же самое в HTML4, потребуется указать собственное пространство имен и добавить некоторые атрибуты пространства имен.

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

<ul>
  <li data-price="5">Item 1 is only $5 this week!</li>
  <li data-price="1">Sale on Item 2, only $1</li>
  ...
</ul>

Если вы разрешите своему пользователю отмечать несколько различных предметов для покупки, вы можете легко вытащить числовое значение для отображения промежуточного итога.

В качестве альтернативы вымогли бы поместить числа в диапазон с определенным классом, найти правильный диапазон в нужном элементе и извлечь значение таким образом, но атрибуты [data-*] уменьшают количество разметки / сценария, необходимое для того же самого.

Если вы не хотите его использовать, вам не нужно.Существует множество способов связать данные с элементами, это просто новый.

Кроме того, новый JavaScript-API dataset предоставляет согласованные средства декларативного доступа к значениям, хранящимся в [data-*] атрибутов.

Для пользователей jQuery .data() и .attr() могут использоваться для доступа к [data-*] атрибутам, а я написалподробный ответ о том, когда вы хотите использовать один над другим .

Answer 2

Использование пользовательского атрибута data- является гарантией будущего вашей html5 страницы, ни один из будущих браузеров, придерживающихся спецификации, не будет использовать data-[attribute], поэтому не будет конфликтовать с вашим пользовательским атрибутом.

Answer 3

Пользовательские атрибуты уже широко используются, например, пример из dojoToolkit ():

<div style="width: 350px; height: 300px">
    <div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
        <div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
            Lorem ipsum and all around...
        </div>
        <div dojoType="dijit.layout.ContentPane" title="My second tab">
            Lorem ipsum and all around - second...
        </div>
        <div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
            Lorem ipsum and all around - last...
        </div>
    </div>
</div>

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

Есть хорошее введение в атрибуты data- * в HTML5 Doctor .

Answer 4

Я нашел другое использование для атрибута data:

Вы можете использовать новый пользовательский атрибут data- HTML5 для всплывающих подсказок: Семантические подсказки с чистым CSS3 и HTML5.