Как валидно добавить тегу свои атрибуты?

В этой статье мы рассмотрим, каким образом в HTML5 стало возможно добавить свои(пользовательские) атрибуты так, чтобы не было ошибки валидации.

 Проблема с валидностью и добавлением своих атрибутов в языке HTML стояла давно и очень остро. Ведь использование своих атрибутов помогало задавать необходимые значения, для их дальнейшего использования в js или css.

С приходом HTML5 пришло и решение этой проблемы. Разработчики стандарта предусмотрели добавление пользовательских атрибутов. Для этого можно использовать атрибуты, которые начинаются с data-. Продолжение же атрибута - ваше пользовательское представление.

Вот несколько примеров использования:

<p data-name="тег p">радуйся и улыбайся</p>

А вот пример с изображением и пользовательским описанием:

<img src="/smile.png" data-description="Здесь описание картинки, которое можно выводить средствами js" />

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