Атрибут data-* тега <article>

Описание

Атрибуты data-* позволяют хранить дополнительную информацию в стандартных HTML-элементах, включая тег <article>. Эти пользовательские атрибуты не влияют на отображение или поведение элемента, но могут быть использованы JavaScript для хранения данных или CSS для стилизации.

Пример использования:
<article data-author="Иван Иванов" data-publish-date="2023-05-15" data-category="технологии"> <h2>Новые тенденции в веб-разработке</h2> <p>Статья о современных подходах к созданию веб-приложений...</p> </article>

Доступ к данным через JavaScript:

<script> const article = document.querySelector('article'); console.log(article.dataset.author); // "Иван Иванов" console.log(article.dataset.publishDate); // "2023-05-15" console.log(article.dataset.category); // "технологии" // Можно также изменять значения article.dataset.views = "1024"; </script>

Использование в CSS:

<style> /* Стилизация статьи в зависимости от категории */ article[data-category="технологии"] { border-left: 4px solid blue; } article[data-category="наука"] { border-left: 4px solid green; } /* Показываем специальный значок для популярных статей */ article[data-views="1024"]::after { content: "🔥 Популярное!"; color: red; margin-left: 10px; } </style>

Особенности работы с data-атрибутами:

Характеристика Описание
Именование Должно начинаться с data-, после может быть любое имя в нижнем регистре
Доступ в JavaScript Через свойство dataset элемента
Типы данных Всегда строки (для сложных данных используйте JSON)
Совместимость Поддерживается всеми современными браузерами

Рекомендации:

  • Важно: Не используйте data-атрибуты для информации, которая должна быть видна пользователям - для этого есть обычный контент
  • Для хранения сложных структур данных используйте JSON внутри одного data-атрибута
  • Избегайте слишком длинных имен data-атрибутов
  • Не злоупотребляйте количеством data-атрибутов на одном элементе

Пример с JSON данными:

<article data-meta='{"author":"Иван Иванов","date":"2023-05-15","tags":["технологии","веб"]}'> <h2>Комплексные данные в атрибутах</h2> <p>Статья с метаданными в JSON формате...</p> </article> <script> const article = document.querySelector('article'); const metaData = JSON.parse(article.dataset.meta); console.log(metaData.tags); // ["технологии", "веб"] </script>

SEO совет: Хотя поисковые системы не используют data-атрибуты напрямую для ранжирования, они могут помочь в организации контента и улучшении пользовательского опыта, что косвенно влияет на SEO.

Совет: Используйте data-атрибуты для хранения состояния элементов (например, data-expanded="true"), что упрощает работу с JavaScript и делает код более понятным.

Примечание: Data-атрибуты являются частью стандарта HTML5 и предоставляют удобный способ хранения дополнительной информации без использования нестандартных атрибутов или классов.