Общий HTML атрибут id

Атрибут id определяет уникальный идентификатор HTML элемента (его значение должно быть уникально для всего HTML документа).

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

В HTML5 атрибут id можно использовать с любым HTML элементом (все элементы с этим атрибутом будут проходить валидацию. Тем не менее, это не всегда имеет смысл!).

В HTML 4.01 атрибут id нельзя использовать с элементами <base>, <head>, <html>, <meta>, <param>, <script>, <style>, <title>.

В HTML 4.01 на атрибут id накладываются более строгие ограничения. Например, название идентификатора не может начинаться с цифры.

Синтаксис атрибута

<element id="идентификатор">

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

ЗначениеОписание
идентификатор

Определяет уникальный идентификатор элемента. Правила присваивания имен:

  • Должен состоять по крайней мере из одного символа
  • Не должен содержать пробельные символы
  • В HTML все значения регистронезависимы

Пример использования атрибута

Пример №1

Использование атрибута id для манипулирования HTML элементом при помощи JavaScript:


<html>
<body>

   <h1 id="myHeader">Привет, мир!</h1>
   <button onclick="displayResult()">Изменить текст</button>

   <script>
      function displayResult() {
         document.getElementById("myHeader").innerHTML = "Всего хорошего!";
      }
   </script>

</body>
</html>

Пример №2

Использование атрибута id для ссылки на HTML элемент с заданным идентификатором внутри страницы:


<html>
<body>
   <h2><a id="top">Заголовок</a></h2>

   <p>Много текста....</p>
   <p>Много текста....</p>
   <p>Много текста....</p>

   <a href="#top">Наверх</a>
</body>
</html>

Пример №3

Использование атрибута id для определения стиля элемента:


<html>
<head>
   <style>
      #myHeader {
         color: red;
         text-align: center;
      }
   </style>
</head>
<body>
   <h1 id="myHeader">У нас лучшее образование!</h1>
</body>
</html>