ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Как сделать? СПРАВОЧНИКИ БОЛЬШЕ 🔍 ◑ УПРАЖНЕНИЯ
HTML5. Уроки для начинающих. W3Schools на русском

Ua En Es De Fr

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">Заголовок</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">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 Учебнике на нашем сайте 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 тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.

HTML — Атрибут Id - Видеоурок W3Schools

В этом видео объясняется атрибут id в HTML и как его использовать в HTML, CSS и JavaScript.

Часть серии видеоуроков для изучения HTML для начинающих!

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

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