Главная » Руководство по HTML – HTML5 введение » Атрибут id HTML

Атрибут id HTML

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

HTML-документ не может содержать более одного элемента с одинаковым id.

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

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

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

Синтаксис для идентификатора

Напишите символ решетки (#), за которым следует имя идентификатора. Затем определите свойства CSS в фигурных скобках {}.

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

Мой первый заголовок

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

<!DOCTYPE html>
<html>
<head>
<style>
#firstHeader {
  background-color: rgba(205,231,209,1);
  color: white;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="firstHeader">Мой первый заголовок</h1>

</body>
</html>

★ Примечание: имя идентификатора должно содержать хотя бы один символ, и не должно содержать пробелов.

Предыдущие версии HTML накладывали большие ограничения на содержание значений ID (например, они не позволяли значениям ID начинаться с цифры).

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

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

Мой первый заголовок

Москва

Москва столица России.

Берлин

Берлин столица Герамании.

Токио

Токио столица Японии.

<style>
/* Стиль элемента с идентификатором "firstHeader" */
#firstHeader {
  background-color: rgba(205,231,209,1);
  color: black;
  padding: 40px;
  text-align: center;
}

/* Стиль всех элементов с именем класса "city" */
.city {
  background-color: rgba(137,171,204,1);
  color: white;
  border: 2px solid white;
  margin: 20px;
  padding: 20px;
}
</style>

<!-- Элемент с уникальным id -->
<h1 id="firstHeader">Мой первый заголовок</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="C5">Глава 5</h2>

Затем добавьте ссылку на закладку ("Перейти к главе 5") на той же странице:

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

ПРИМЕР

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

<a href="html_example.html#C5">Перейти к главе 5</a>

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

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

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

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

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

ПРИМЕР

Краткое содержание

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

☛ Iframes HTML

Атрибут class HTML ☚

Поделиться ссылкой