id атрибут HTML

Глобальный атрибут id задаёт идентификатор (ID), который должен быть уникальным во всём документе.

Попробуйте

<p>A normal, boring paragraph. Try not to fall asleep.</p>

<p id="exciting">The most exciting paragraph on the page. One of a kind!</p>

#exciting {
  background: linear-gradient(to bottom, #ffe8d4, #f69d3c);
  border: 1px solid dimgrey;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 1px black;
}

#exciting::before {
  content: "ℹ️";
  margin-right: 5px;
}

Синтаксис

Значение атрибута ID не должно содержать символы пробелов ASCII. Браузеры обрабатывают несоответствующие требованиям идентификаторы, содержащие пробелы, так, как если бы пробелы были частью идентификатора. В отличие от атрибута class, который допускает значения, разделённые пробелами, у элемента может быть только одно значение ID.

Технически значение атрибута ID может содержать любые другие символы Unicode. Однако при использовании в селекторах CSS — как из JavaScript с помощью таких API, как Document.querySelector(), так и в таблицах стилей CSS — значения атрибутов ID должны быть допустимыми идентификаторами CSS. Это означает, что если значение атрибута ID не является допустимым идентификатором CSS (например, my?id или 1234), перед использованием в селекторе его необходимо экранировать с помощью метода CSS.escape() или вручную.

По этой причине разработчикам рекомендуется выбирать для атрибутов ID значения, являющиеся допустимыми идентификаторами CSS и не требующие экранирования.

Кроме того, не все допустимые значения атрибута ID являются допустимыми идентификаторами JavaScript. Например, 1234 — допустимое значение атрибута, но не допустимый идентификатор JavaScript. Это означает, что такое значение не является допустимым именем переменной, поэтому получить доступ к элементу с помощью кода вроде window.1234 нельзя. Однако его можно получить с помощью window["1234"].

Описание

Атрибут ID предназначен для идентификации отдельного элемента при создании ссылок (с использованием идентификатора фрагмента), написании скриптов или оформлении стилей (с помощью CSS).

Доступ к элементам с атрибутами ID можно получить как к глобальным свойствам объекта window: имя свойства соответствует значению ID, а его значение — соответствующему элементу. Например, для следующей разметки:

<p id="preamble"></p>

получить доступ к этому элементу абзаца в JavaScript можно с помощью следующего кода:

const content = window.preamble.textContent;

Спецификации

Совместимость с браузерами

См. также

• Все глобальные атрибуты.
• Element.id, отражающее значение этого атрибута.
• Метод Document.getElementById.
• Селекторы ID CSS.