Атрибути є невід'ємною частиною елементів HTML, оскільки вони надають додаткову інформацію або інструкції про елемент. Визначаючи поведінку, зовнішній вигляд або функціональність елемента, атрибути покращують його загальну функціональність. Атрибути вказуються у відкриваючому тезі елемента і складаються з імені та значення.

Базовий синтаксис

Атрибути вказуються лише у трикутних дужках відкриваючого тегу елемента. Синтаксис для визначення атрибуту наступний:

Ключові моменти

• Атрибути можуть бути необов'язковими або обов'язковими: Залежно від елемента, певні атрибути можуть бути обов'язковими для коректної роботи, тоді як інші є необов'язковими і надають додаткові можливості кастомізації;
• Атрибути беруться в лапки: Значення атрибутів беруться в подвійні лапки ("...") або одинарні лапки ('...'). Це допомагає відрізнити їх від імені елемента і полегшує читання;
• Кожен тег має власний набір атрибутів: Різні елементи HTML підтримують різні атрибути. Розуміння специфічних атрибутів, що застосовуються до кожного елемента, є важливим для їх ефективного використання;
• Можна використовувати декілька атрибутів: В одному елементі можна використовувати декілька атрибутів, розділяючи їх пробілами. Це дає змогу ширше кастомізувати та контролювати поведінку елемента.

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

Розглянемо кілька прикладів використання елементів HTML з атрибутами, щоб зрозуміти, як вони впливають на поведінку елементів:

Пояснення коду по рядках:

1. Елемент input;
   • type="text" вказує на те, що поле вводу повинно приймати від користувача звичайний текст;
   • placeholder="name" надає підказку або приклад очікуваного введення у полі введення. Ми очікуємо ім'я користувача.
2. Елемент img;
   • alt="Forest" надає альтернативний текст для зображення. Якщо зображення не буде завантажено, користувач побачить текст "Forest";
   • src="..." вказує URL-адресу джерела зображення (Uniform Resource Locator). В інтернеті воно знаходиться за цим посиланням (https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/forest+example+img.png).
3. Елемент a;
   • target="_blank" вказує, що коли користувач натискає на посилання, URL-адреса призначення повинна відкритися в новій вкладці браузера;
   • href="https://www.google.com/" посилання призначення.
4. Елемент button.
   • type="reset" визначає поведінку кнопки, яка при натисканні скидає поля форми до початкових значень, якщо кнопка вказана в елементі form.

Примітка

У цьому курсі ми заглибимося в деталі атрибутів кожного елемента. Наразі важливо зрозуміти концепцію атрибутів, їх застосування та той факт, що кожен елемент має свій унікальний набір атрибутів. Ці атрибути відіграють важливу роль у зміні зовнішнього вигляду, призначення та функціональності елемента.

Підсумок

Елемент HTML зазвичай складається з тега, атрибутів і вмісту.

• Тег визначає тип елемента (наприклад, p, img тощо);
• Атрибут надає додаткову інформацію про елемент (наприклад, src, alt тощо);
• Вміст - це все, що знаходиться між відкриваючим та закриваючим тегами елемента.