ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP КАК СДЕЛАТЬ W3.CSS JQUERY XML JAVA БОЛЬШЕ 🔍 ◑ КНИГИ СПРАВОЧНИКИ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих

En Ua

HTML атрибут id

❮ Prev Next ❯

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

В документе HTML не может быть больше одного элемента с одинаковым идентификатором (id).

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

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

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

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

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

Пример

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

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

</body>
</html>
Попробуйте сами »

Примечание: Имя id чувствительно к регистру!

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

Разница между Class и ID

Имя класса может использоваться несколькими элементами HTML, тогда как имя 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>

<!-- Элемент с уникальным id -->
<h1 id="myHeader">My Cities</h1>

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

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

<h2 class="city">Токио</h2>
<p>Токио - это столица Японии.</p>
Попробуйте сами »

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

HTML Закладки с ID и ссылками

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

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

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

Затем, когда кликнуть ссылку, страница прокрутится к месту с закладкой.

Пример

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

<h2 id="C4">Chapter 4</h2>

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

Пример

<a href="#C4">Перейти к разделу 4</a>
Попробуйте сами »

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

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

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

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

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

Пример

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

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

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

Резюме

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

HTML Упражнения

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

Упражнение:

Добавьте корректный HTML атрибут, чтобы сделать элемент H1 красным.

<!DOCTYPE html>
<html>
<head>
<style>
#myheader {color:red;}
</style>
</head>
<body>

<h1 >My Home Page</h1>

</body>
</html>

Вопросы для самоконтроля

  • Для чего необходим HTML-атрибут id?
  • Сколько HTML-элементов могут совместно использовать один и тот же id?
  • Какой символ используется для написания названия id в CSS?
  • Имеет ли значение регистр написания имен id?
  • Какая разница между class и id?
  • Можно ли использовать id для создания закладок на веб-странице?
  • Может ли JavaScript использовать имена id?
❮ Prev Next ❯