HTML глобальный атрибут `id`

Определение и применение

Глобальный атрибут id задает уникальный идентификатор для элемента.

Некоторые правила:

Для удобства используйте латинские буквы, цифры, дефисы и подчёркивания. Это соглашение об именовании, а не полный набор допустимых символов HTML: идентификатор должен быть непустым и не содержать ASCII-пробелов. Для некоторых значений потребуется экранирование в CSS-селекторе.
Идентификатор не должен содержать каких-либо пробелов.
Идентификатор на странице используется только к одному элементу.
Идентификаторы чувствительны к регистру (#vottakvot и #VotTakVot разные идентификаторы).

Один и тот же id нельзя повторять в документе: нарушатся однозначность ссылок-якорей и связи элементов, например поля с <label for="…">. Для повторяющихся элементов используйте class. Сам идентификатор не меняет оформление.

На одной HTML-странице ссылка с href="#toy" ведёт к заголовку с id="toy". После перехода браузер прокручивает страницу к этому элементу. Фрагмент toy в ссылке совпадает с идентификатором заголовка. Решётка нужна в href, но не входит в значение id. — Идентификатор связывает ссылку с целевым элементом: `href="#toy"` ведёт к `id="toy"`. Символ `#` входит в адрес ссылки.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьhtml.global_attributes.id
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`id`	✓1	✓12	✓32	✓15	✓1	✓18	✓32	✓14	✓1	✓1.0	✓4.4	✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Значения атрибута

Значение
`id`

Примеры, попробуйте сами

Название документа

Нажмите ▶. Измените разметку во вкладке HTML и сравните результат.

index.html

HTML

<h1 id="main">Заголовок первого уровня.</h1>
<p id="index">Параграф с присвоенным id в роли стилевого идентификатора.</p>
<a href="#main">Использование id в роли якоря</a> (перебрасывает к указанному id).<br />
<p>Использование скриптов JavaScript (изменение элементов с определённым id):</p>

<button data-migration-click-0="">Нажми меня!</button>

main.js

JavaScript

function chg() {
    var x = document.getElementById('index')
    x.style.color = 'white'
    x.style.backgroundColor = 'orange'
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    chg()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')

style.css

CSS

#main {
    text-align: center;
    color: red;
}
#index {
    color: blue;
}

Отличия HTML 4.01 от HTML 5

В HTML5, атрибут id может быть использован к любому элементу HTML (пройдёт валидацию), но в некоторых случаях в этом нет необходимости.

В HTML 4.01, атрибут id не может быть применён к следующим элементам:

HTML глобальный атрибут id