Атрибут id тега <em>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <em> (акцентированного текста), который может использоваться для:
- Точечной стилизации через CSS
- Обращения к элементу через JavaScript
- Создания якорных ссылок внутри документа
- Связи с другими элементами через ARIA-атрибуты
Важно: Значение id должно быть уникальным в пределах документа!
Пример использования:
<p>
Это <em id="main-emphasis">ключевой момент</em> в тексте,
на который можно <a href="#main-emphasis">сослаться</a>.
</p>
Основные применения:
| Применение | Пример | Описание |
|---|---|---|
| CSS-стилизация | #main-emphasis { color: red; } |
Уникальное оформление акцента |
| JavaScript доступ | document.getElementById('main-emphasis') |
Получение элемента для манипуляций |
| Якорные ссылки | <a href="#main-emphasis">...</a> |
Прямая ссылка на акцентированный текст |
| ARIA-связи | aria-describedby="main-emphasis" |
Связь с другими элементами для доступности |
Правила именования:
- Должен начинаться с буквы (A-Z, a-z)
- Может содержать цифры (0-9), дефисы (-), подчеркивания (_), точки (.)
- Чувствителен к регистру
- Не должен содержать пробелов
- Рекомендуется использовать семантические имена
Пример комплексного использования:
<style>
#important-term {
background-color: #fff3cd;
padding: 2px 5px;
border-radius: 3px;
font-style: normal;
font-weight: bold;
}
</style>
<p>
Обратите внимание на <em id="important-term">этот термин</em>,
который имеет особое значение.
</p>
<script>
const term = document.getElementById('important-term');
term.addEventListener('click', () => {
alert(`Вы выбрали: ${term.textContent}`);
});
</script>
Сравнение с атрибутом class:
| Критерий | id |
class |
|---|---|---|
| Уникальность | Должен быть уникальным | Может повторяться |
| CSS-специфичность | Высокая (#id) | Средняя (.class) |
| Использование | Для уникальных элементов | Для групп элементов |
Рекомендации по использованию:
- Используйте для действительно уникальных акцентов
- Избегайте избыточного применения (не всем <em> нужен id)
- Для стилизации предпочитайте классы, если стиль будет повторяться
- Придерживайтесь единого стиля именования в проекте
- Не используйте id для хранения данных (лучше data-*)
Пример с ARIA и доступностью:
<p aria-describedby="term-help">
Термин <em id="term-example">акцент</em> имеет особое значение.
</p>
<div id="term-help" hidden>
Акцент - это интонационное выделение элемента речи.
</div>
<button onclick="document.getElementById('term-help').hidden =
!document.getElementById('term-help').hidden">
Показать/скрыть справку
</button>
Примечание: Хотя атрибут id очень полезен для конкретных задач, его следует использовать осмысленно. Для большинства случаев стилизации акцентированного текста лучше подходят классы, оставляя id для особых случаев, когда требуется уникальная идентификация элемента.