HTML Идентификаторы. Атрибут Id

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

HTML. Для чего необходим атрибут идентификатора - Id в HTML-коде? Использование атрибута Id

Атрибут id указывает уникальный идентификатор для HTML элемента (значение должно быть уникальным в HTML документе). Значение id может использоваться CSS и JavaScript для выполнения определённых задач для уникального элемента с заданным значением id. В CSS, чтобы выбрать элемент с определённым идентификатором, напишите символ hash (#) (решётка), а потом идентификатор (id) элемента:

Пример:

Используйте CSS для стилизации элемента с идентификатором "myHeader":

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

<h2 id="myHeader">My Header</h2>

Результат:

My Header

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

Совет: Атрибут id можно использовать на любом HTML элементе.

Примечание: Значение id является чувствительным к регистру.

Примечание: Значение id должно содержать хотя бы один символ и не должно содержать пустого места (пробелы, вкладки).

Разница между классом (class) и идентификатором (id)

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

Пример:

<style>
/* Стиль элемента с id "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">My Cities</h1>

<!-- Несколько похожих элементов -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
Попробуйте сами »

Примечание: Вы можете узнать больше о CSS в Учебнике по CSS.

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

JavaScript может получить доступ к элементу с указанныи идентификатором, используя метод getElementById():

Пример:

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

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
Попробуйте сами »

Примечание: Узнать больше про JavaScript можно в разделе HTML JavaScript или в Учебнике по JavaScript.

Проверьте себя с помощью упражнений!

Упражнение 1 » Упражнение 2 »

Примечание: Для получения полного списка всех доступных HTML тегов, посетите Справочник HTML тегов.