Skip to main content

Що таке атрибут в HTML?

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


1. Структура атрибута

Атрибут завжди пишеться всередині відкриваючого тега і має формат:

javascript
ім'я="значення"

Приклад:

html
<a href="https://example.com" target="_blank">Перейти</a>
  • href - ім'я атрибута (вказує адресу посилання)
  • "https://example.com" - значення атрибута
  • target="_blank" - другий атрибут, відкриває посилання в новій вкладці

2. Де використовуються атрибути

Майже в кожного HTML-тега можуть бути атрибути. Вони задають налаштування або додаткову інформацію.

Приклади:

html
<img src="photo.jpg" alt="Фото"> <!-- шлях і опис картинки --> <input type="text" placeholder="Ім'я"> <!-- тип поля і підказка --> <button disabled>Надіслати</button> <!-- кнопка вимкнена -->

3. Типи атрибутів

Загальні (глобальні): застосовуються до всіх тегів:

АтрибутПризначення
idУнікальний ідентифікатор елемента
classІм'я класу для CSS і JS
styleВбудовані стилі оформлення
titleПідказка при наведенні
hiddenПриховує елемент
langВказує мову вмісту

Приклад:

html
<p id="intro" class="text" title="Опис">Приклад абзацу</p>

Специфічні: застосовуються до певних тегів:

ТегАтрибутиПризначення
<a>href, targetПосилання і спосіб відкриття
<img>src, alt, width, heightЗображення та його параметри
<input>type, value, placeholderПоле вводу
<video>controls, autoplay, loopКерування відео

4. Атрибути без значення

Деякі атрибути діють просто за наявністю, без вказання значення:

html
<input type="checkbox" checked> <button disabled>Кнопка</button>

Тут checked і disabled означають активний стан елемента.


Підсумок:

ВластивістьОпис
Де пишетьсяУ відкриваючому тезі
Форматім'я="значення"
ПризначенняУточнює властивості елемента
БуваютьГлобальні та специфічні
Без значенняПросто вказують стан (checked, disabled)

Простими словами: Атрибут - це "налаштування тега", яке каже браузеру: де взяти дані, як їх показати або як має поводитися елемент.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.