HTML Атрибут id

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

Нельзя иметь более одного элемента с одним и тем же идентификатором в документе HTML.

Атрибут id

Атрибут id устанавливает уникальный идентификатор для элемента HTML. Значение атрибута id должно быть уникальным в рамках документа HTML.

Атрибут id используется для привязки к конкретной декларации стиля в таблице стилей. Он также используется в JavaScript для доступа и изменения элемента с указанным идентификатором.

Синтаксис атрибута id следующий: напишите символ решетки (#), затем укажите имя идентификатора. Далее задайте свойства CSS в фигурных скобках {}.

В следующем примере у нас есть элемент <h1>, имеющий идентификатор «myHeader». Этот элемент будет оформлен в соответствии с определением стиля #myHeader в секции заголовка:

Пример

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">Мой заголовок</h1>

</body>
</html>

Обратите внимание: Имя идентификатора чувствительно к регистру!

Также обратите внимание: Имя идентификатора должно содержать хотя бы один символ, не начинаться с цифры и не содержать пробельных символов (пробелы, табуляцию и т.д.).

Различия между классом и идентификатором

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

Пример

<style>
/* Оформляем элемент с идентификатором "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Оформляем все элементы с классом "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- Элемент с уникальным идентификатором -->
<h1 id="myHeader">Мои города</h1>

<!-- Несколько элементов с одним классом -->
<h2 class="city">Лондон</h2>
<p>Лондон — столица Англии.</p>

<h2 class="city">Париж</h2>
<p>Париж — столица Франции.</p>

<h2 class="city">Токио</h2>
<p>Токио — столица Японии.</p>

Закладки HTML с использованием id и ссылок

Закладки HTML предназначены для того, чтобы читатели могли перемещаться к конкретным разделам веб-страницы.

Закладки полезны, если ваша страница очень длинная.

Чтобы использовать закладку, сначала создайте её, а затем добавьте ссылку на нее.

После щелчка по ссылке страница прокручивается к месту закладки.

Пример

Сначала создайте закладку с атрибутом id:

<h2 id="C4">Глава 4</h2>

Затем добавьте ссылку на закладку («Перейти к главе 4») в пределах той же страницы:

<a href="#C4">Перейти к главе 4</a>

Или добавьте ссылку на закладку («Перейти к главе 4») с другой страницы:

<a href="html_demo.html#C4">Перейти к главе 4</a>

Использование атрибута id в JavaScript

Атрибут id также может использоваться в JavaScript для выполнения определенных задач для определенного элемента.

JavaScript может получить доступ к элементу с конкретным идентификатором с помощью метода getElementById().

Пример

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

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Хорошего дня!";
}
</script>

Краткий обзор главы

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