Атрибут id тега <article>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <article>. Этот идентификатор должен быть уникальным в пределах всего HTML-документа и может использоваться для:
- Связи с CSS и JavaScript
- Якорных ссылок внутри страницы
- Семантической идентификации контента
<article id="main-article">
<h2>Основная статья</h2>
<p>Содержание статьи...</p>
</article>
<!-- Ссылка на статью -->
<a href="#main-article">Перейти к статье</a>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Уникальность | Должен быть единственным в документе |
| Синтаксис | Должен начинаться с буквы, может содержать дефисы, подчёркивания, точки и цифры |
| Чувствительность к регистру | Да (myArticle и myarticle - разные идентификаторы) |
| Использование в URL | Может быть якорем (#id) |
Правильное именование:
<!-- Хорошие примеры -->
<article id="main-news">...</article>
<article id="article_123">...</article>
<article id="user.profile">...</article>
<!-- Плохие примеры -->
<article id="123article">...</article> <!-- Начинается с цифры -->
<article id="main news">...</article> <!-- Пробелы недопустимы -->
<article id="article@test">...</article> <!-- Спецсимволы -->
Использование в CSS и JavaScript:
<style>
#featured-article {
border: 2px solid #4CAF50;
padding: 20px;
background-color: #f8f9fa;
}
</style>
<article id="featured-article">
<h2>Избранная статья</h2>
<p>Особое оформление для этой статьи</p>
</article>
<script>
document.getElementById('featured-article').addEventListener('click', function() {
alert('Вы кликнули на избранную статью!');
});
</script>
Важно: Не злоупотребляйте атрибутом id. Используйте его только когда действительно нужен уникальный идентификатор. Для группового стилизации лучше подходят классы.
Рекомендации:
- Используйте осмысленные имена, отражающие содержание или функцию
- Избегайте общих имён типа "article1", "content"
- Для динамически генерируемого контента используйте префиксы (например "user-123")
- Не изменяйте id элементов динамически - это может нарушить работу страницы
Доступность и SEO:
- Уникальные id помогают скринридерам ориентироваться в документе
- Якорные ссылки улучшают юзабилити длинных статей
- Поисковые системы используют id для анализа структуры страницы
Примечание: Хотя HTML5 допускает использование id без значений в некоторых случаях, всегда указывайте осмысленное значение для этого атрибута.