НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Як зробити? ДОВІДНИКИ БІЛЬШЕ 🔍 ◑ ВПРАВИ
HTML5. Уроки для початківців. W3Schools українською

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 ❯

✍ Коментарі