У повсякденній роботі веброзробника найчастіше використовуються глобальні атрибути (підходять до будь-якого тега) і специфічні (характерні для посилань, зображень, форм). Нижче - найбільш затребувані, згруповані за типами.
| Атрибут | Призначення | Приклад |
|---|
id | Унікальний ідентифікатор елемента (використовується в CSS, JS) | <div id="header"> |
class | Ім'я класу для групування і стилізації | <p class="text"> |
style | Вбудовані CSS-стилі | <h1 style="color:red;"> |
title | Підказка при наведенні курсора | <button title="Натисни"> |
lang | Мова вмісту | <html lang="en"> |
hidden | Приховує елемент | <div hidden> |
tabindex | Визначає порядок фокуса при навігації з клавіатури | <input tabindex="1"> |
| Атрибут | Призначення | Приклад |
|---|
href | Адреса переходу | <a href="https://site.com"> |
target | Де відкрити посилання (_blank, _self тощо) | <a target="_blank"> |
rel | Відношення між сторінками, важливо для SEO і безпеки | <a rel="noopener"> |
| Атрибут | Призначення | Приклад |
|---|
src | Шлях до файлу | <img src="photo.jpg"> |
alt | Альтернативний текст (для доступності і SEO) | <img alt="Пейзаж"> |
width, height | Розміри зображення | <img width="300" height="200"> |
loading | Лінива загрузка (lazy, eager) | <img loading="lazy"> |
| Атрибут | Призначення | Приклад |
|---|
type | Тип поля (text, password, email та ін.) | <input type="email"> |
name | Ім'я поля для відправлення даних | <input name="user"> |
value | Значення типово | <input value="Текст"> |
placeholder | Підказка всередині поля | <input placeholder="Введіть ім'я"> |
required | Обов'язкове поле | <input required> |
checked | Позначений чекбокс/радіо | <input type="checkbox" checked> |
disabled | Вимикає елемент | <button disabled> |
action | URL для відправлення форми | <form action="/submit"> |
| Атрибут | Призначення | Приклад |
|---|
controls | Показує елементи керування | <video controls> |
autoplay | Автоматичне відтворення | <audio autoplay> |
loop | Зациклення | <video loop> |
muted | Без звуку | <video muted> |
| Категорія | Часто використовувані атрибути |
|---|
| Глобальні | id, class, style, title |
| Посилання | href, target, rel |
| Зображення | src, alt, loading |
| Форми | type, name, placeholder, required, value |
| Кнопки | disabled, onclick |
| Медіа | controls, autoplay, loop |
Коротко:
У повсякденній розробці найчастіше зустрічаються class, id, href, src, alt, type, name, placeholder, required, disabled і style: саме вони керують структурою, стилем, поведінкою і доступністю елементів на сторінці.