Атрибут id тега <section>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <section>, позволяя однозначно обращаться к нему через CSS, JavaScript или якорные ссылки.
<section id="main-news">
<h2>Главные новости</h2>
<!-- Содержимое раздела -->
</section>
<style>
#main-news {
background-color: #f8f9fa;
padding: 20px;
}
</style>
Ключевые характеристики:
| Характеристика | Описание |
|---|---|
| Уникальность | Должен быть единственным в документе |
| Синтаксис | Должен начинаться с буквы (A-Za-z) |
| Чувствительность | К регистру (mainSection ≠ mainsection) |
Практическое применение:
- Якорные ссылки:
<a href="#main-news"> - JavaScript-обращение:
document.getElementById('main-news') - Стилизация конкретного раздела
- Интеграция с системами аналитики
Пример с динамическим управлением:
<section id="user-profile">
<!-- Содержимое профиля -->
</section>
<script>
const profileSection = document.getElementById('user-profile');
profileSection.classList.add('active');
</script>
Рекомендации по именованию:
- Используйте осмысленные имена (contact-form, news-feed)
- Придерживайтесь единого стиля (kebab-case рекомендуем)
- Избегайте общих имен (section1, block2)
- Для версионных элементов добавляйте суффиксы (v1, v2)
Ограничения:
- Дублирование ID вызывает ошибки валидации
- Может привести к конфликтам в больших проектах
- Не рекомендуется для стилизации (лучше использовать классы)
Примечание: Хотя атрибут id часто используется для стилизации, в современных проектах рекомендуется:
- Использовать классы для CSS
- Оставлять ID для JavaScript и якорных ссылок
- Применять методологии именования (BEM)