Урок №21. HTML. Ідентифікатори. Атрибут Id

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML/CSS. Для чого потрібен атрибут ідентифікатора - Id в HTML-коді на веб-сайті? Використання атрибуту Id

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

Приклад:

Використовуйте 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>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* Style all elements with the class name "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>

<!-- A unique element -->
<h1 id="myHeader">My Cities</h1>

<!-- Multiple similar elements -->
<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.


Перевірте себе вправами!


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



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.