Атрибути глобальної області

8.1 Атрибут id

Атрибути глобальної області — це атрибути, які можуть бути використані з будь-яким HTML-елементом. Вони грають ключову роль в ідентифікації, класифікації та управлінні елементами веб-сторінок.

Атрибут id використовується для унікальної ідентифікації елемента на сторінці. Значення атрибута id повинно бути унікальним у межах усього HTML-документа. Цей атрибут часто використовується для зв’язування з елементами CSS та JavaScript.

Синтаксис:

    
      <element id="unique-id">...</element>
    
  

Приклад використання:

    
      #header {
        background-color: #f4f4f4;
        padding: 10px;
      }
    
  

    
      <div id="header">
        <h1>Заголовок</h1>
      </div>
    
  

    
      document.getElementById('header').style.color = 'blue';
    
  

Переваги:

• Унікальна ідентифікація: дозволяє однозначно ідентифікувати елементи на сторінці
• Стайлінг: зручно для застосування CSS-стилів
• Маніпуляції з DOM: легко отримувати доступ до елементів за допомогою JavaScript

8.2 Атрибут class

Атрибут class використовується для задання одного чи кількох класів елементу. Ці класи можуть бути використані для застосування стилів CSS і для маніпуляцій з елементами за допомогою JavaScript. На відміну від id, значення class не обов'язково мають бути унікальними.

Синтаксис:

    
      <element class="class-1 class-2">...</element>
    
  

Приклад використання:

    
      .highlight {
        background-color: yellow;
      }

      .bold {
        font-weight: bold;
      }
    
  

    
      <p class="highlight">Цей текст виділений жовтим.</p>
      <p class="bold">Цей текст жирний.</p>
      <p class="highlight bold">Цей текст жирний і виділений жовтим.</p>
    
  

Переваги:

• Множинні класи: дозволяє задавати кілька класів для одного елемента
• Групування елементів: легко застосовувати стилі до груп елементів
• Маніпуляції з DOM: дозволяє легко працювати з групами елементів через JavaScript

8.3 Атрибути data-*

Атрибути data-* дозволяють зберігати користувацькі дані в елементах HTML. Ці атрибути починаються з префіксу data- і можуть мати будь-яке значення. Вони часто використовуються для зберігання інформації, яка може бути корисною для JavaScript.

Синтаксис:

    
      <element data-key="value">...</element>
    
  

Приклад використання:

    
      <div data-user-id="12345" data-role="admin">
        Користувач з ID 12345, роль - адміністратор.
      </div>
    
  

    
// Знаходимо перший елемент на сторінці, у якого є атрибут data-user-id
const userElement = document.querySelector('[data-user-id]');

// Отримуємо значення атрибуту data-user-id і виводимо його в консоль
console.log(userElement.dataset.userId); // Вивід: 12345

// Отримуємо значення атрибуту data-role і виводимо його в консоль
console.log(userElement.dataset.role); // Вивід: admin
    
  

Переваги:

• Зберігання даних: зручно для зберігання і передачі даних, пов’язаних з елементами
• Доступ через JavaScript: легко отримувати доступ і змінювати дані через dataset API
• Гнучкість: дозволяє додавати будь-які дані без порушення стандарту HTML