Атрибут id тега <aside>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <aside>. Этот идентификатор должен быть уникальным в пределах всего документа и используется для:
- Связи с CSS и JavaScript
- Создания якорных ссылок
- Семантической идентификации элементов
<aside id="user-sidebar">
<h3>Профиль пользователя</h3>
<p>Информация о текущем пользователе...</p>
</aside>
<!-- Ссылка на элемент -->
<a href="#user-sidebar">Перейти к профилю</a>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Уникальность | Должен быть единственным в документе |
| Синтаксис | Должен начинаться с буквы (A-Z, a-z) |
| Допустимые символы | Буквы, цифры, дефисы, подчёркивания, точки |
| Чувствительность к регистру | Да (myAside и myaside - разные идентификаторы) |
Правильное именование:
<!-- Хорошие примеры -->
<aside id="main-sidebar">...</aside>
<aside id="notification_panel">...</aside>
<aside id="user.profile.widget">...</aside>
<!-- Плохие примеры -->
<aside id="123sidebar">...</aside> <!-- Начинается с цифры -->
<aside id="main sidebar">...</aside> <!-- Пробелы недопустимы -->
<aside id="sidebar@right">...</aside> <!-- Недопустимые символы -->
Использование в CSS и JavaScript:
<style>
#special-sidebar {
background-color: #f0f8ff;
border-left: 3px solid #4682b4;
padding: 15px;
}
</style>
<aside id="special-sidebar">
<h3>Особое предложение</h3>
<p>Только для избранных пользователей!</p>
</aside>
<script>
document.getElementById('special-sidebar').addEventListener('click', function() {
alert('Вы кликнули на специальную панель!');
});
</script>
Рекомендации:
- Используйте осмысленные имена, отражающие назначение элемента
- Избегайте общих имён типа "sidebar1", "panel2"
- Для динамически генерируемого контента используйте префиксы (например "user-123")
- Не изменяйте id элементов динамически - это может нарушить работу страницы
- Используйте id только когда нужен уникальный идентификатор
Важно: Не злоупотребляйте атрибутом id. Для стилизации нескольких элементов используйте классы. Идентификаторы должны быть действительно уникальными.
Доступность и SEO:
| Аспект | Рекомендация |
|---|---|
| Скринридеры | Используйте id для связки с aria-labelledby/aria-describedby |
| Якорные ссылки | Обеспечьте визуальный индикатор при переходе |
| SEO | Поисковики учитывают id при анализе структуры страницы |
Пример доступного aside с id:
<aside
id="accessible-widget"
aria-labelledby="widget-header"
aria-describedby="widget-desc"
>
<h3 id="widget-header">Доступный виджет</h3>
<p id="widget-desc">Этот элемент полностью доступен для скринридеров.</p>
</aside>