Атрибут id тега <code>
Описание
Атрибут id задаёт уникальный идентификатор для элемента <code>, который может использоваться для:
- Стилизации через CSS
- Обращения к элементу в JavaScript
- Создания якорных ссылок для навигации
- Связи между элементами (например,
<label for>)
<code id="main-function-example">
function calculate() { return 42; }
</code>
Основные правила
| Правило | Пример | Недопустимо |
|---|---|---|
| Уникальность в документе | id="unique-code" |
Повторение id |
| Начинается с буквы | id="code1" |
id="1code" |
| Без пробелов | id="main-code" |
id="main code" |
| Чувствительность к регистру | id="MyCode" ≠ id="mycode" |
- |
Использование в CSS:
<style>
#special-code-block {
background-color: #f8f9fa;
border-left: 3px solid #3498db;
padding: 10px;
display: block;
}
</style>
<code id="special-code-block">
// Особо важный фрагмент кода
const importantValue = 42;
</code>
Использование в JavaScript:
<code id="dynamic-code">let x = 10;</code>
<script>
// Изменение содержимого
document.getElementById('dynamic-code').textContent = 'let y = 20;';
// Добавление класса
document.getElementById('dynamic-code').classList.add('highlight');
// Копирование в буфер обмена
function copyCode() {
const code = document.getElementById('dynamic-code').textContent;
navigator.clipboard.writeText(code);
}
</script>
Создание якорных ссылок:
<h2 id="code-examples">Примеры кода</h2>
<code id="example-1">...</code>
<!-- Ссылка из другого места страницы -->
<a href="#example-1">Перейти к примеру 1</a>
Рекомендации по именованию:
- Используйте осмысленные имена (
user-auth-code) - Придерживайтесь единого стиля (kebab-case или camelCase)
- Избегайте общих названий (
id="code1") - Для временных элементов добавляйте префикс (
temp-code)
Ограничения и особенности:
- Высокая специфичность в CSS (010) - сложнее переопределить
- Глобальная переменная в JavaScript (в некоторых браузерах)
- Не рекомендуется для стилизации (лучше использовать классы)
- Проверяйте уникальность в больших документах
Примечание: Хотя атрибут id является универсальным для всех HTML-элементов, для тега <code> он особенно полезен при создании интерактивных примеров кода, учебных материалов и технической документации с перекрестными ссылками.