Skip to main content

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

Атрибут у HTML - це додаткова характеристика тега, яка уточнює, як саме елемент має виглядати, працювати чи поводитися.

Якщо тег - це "що це таке", то атрибут - це "який він, де знаходиться, що робить".


Приклад

html
<img src="photo.jpg" alt="Моє фото" width="300">

Тут:

  • <img> - тег зображення,
  • src="photo.jpg" - шлях до файлу картинки,
  • alt="Моє фото" - альтернативний текст, якщо зображення не завантажиться,
  • width="300" - ширина картинки в пікселях.

Усе, що йде всередині відкриваючого тега після його імені, - це атрибути.


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

Атрибут складається з трьох частин:

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

Приклад:

html
<a href="https://example.com">Посилання</a>
  • ім'я атрибута: href
  • значення: "https://example.com"

Де пишуться атрибути

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

html
<tagname attribute1="value1" attribute2="value2">Вміст</tagname>

Бувають різні типи атрибутів

1. Стандартні (загальні)

Можна додати майже до будь-якого тега:

  • id - унікальний ідентифікатор елемента;
  • class - ім'я класу для застосування стилів;
  • style - вбудовані стилі;
  • title - спливаюча підказка.

Приклад:

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

2. Специфічні (залежать від тега)

Деякі атрибути застосовуються лише до певних тегів:

  • src, alt, width, height - у <img>;
  • href, target - у <a>;
  • type, value, placeholder - у <input>.

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

Іноді достатньо просто наявності атрибута:

html
<input type="checkbox" checked>

Тут checked означає, що галочка встановлена типово.


Підсумок:

ПоняттяОпис
АтрибутДодаткова властивість тега
Де вказуєтьсяВсередині відкриваючого тега
Форматім'я="значення"
Навіщо потрібенЩоб уточнити поведінку, зовнішній вигляд або вміст елемента

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

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

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

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