Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Які атрибути використовуються найчастіше в роботі?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)У повсякденній роботі веброзробника найчастіше використовуються **глобальні атрибути** (підходять до будь-якого тега) і **специфічні** (характерні для посилань, зображень, форм). **Ключове:** найчастіше зустрічаються `class`, `id`, `href`, `src`, `alt`, `type`, `name`, `placeholder`, `required`, `disabled` і `style` - саме вони керують структурою, стилем, поведінкою і доступністю елементів на сторінці.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняУ повсякденній роботі веброзробника найчастіше використовуються **глобальні атрибути** (підходять до будь-якого тега) і **специфічні** (характерні для посилань, зображень, форм). Нижче - найбільш затребувані, згруповані за типами. --- ### 1. **Глобальні атрибути**: застосовні до будь-якого елемента | Атрибут | Призначення | Приклад | |---|---|---| | `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">` | --- ### 2. **Атрибути посилань** `<a>` | Атрибут | Призначення | Приклад | |---|---|---| | `href` | Адреса переходу | `<a href="https://site.com">` | | `target` | Де відкрити посилання (`_blank`, `_self` тощо) | `<a target="_blank">` | | `rel` | Відношення між сторінками, важливо для SEO і безпеки | `<a rel="noopener">` | --- ### 3. **Атрибути зображень** `<img>` | Атрибут | Призначення | Приклад | |---|---|---| | `src` | Шлях до файлу | `<img src="photo.jpg">` | | `alt` | Альтернативний текст (для доступності і SEO) | `<img alt="Пейзаж">` | | `width`, `height` | Розміри зображення | `<img width="300" height="200">` | | `loading` | Лінива загрузка (`lazy`, `eager`) | `<img loading="lazy">` | --- ### 4. **Атрибути форм** `<form>`, `<input>`, `<button>` | Атрибут | Призначення | Приклад | |---|---|---| | `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">` | --- ### 5. **Атрибути мультимедіа** | Атрибут | Призначення | Приклад | |---|---|---| | `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`: саме вони керують структурою, стилем, поведінкою і доступністю елементів на сторінці.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.