HTML Атрибути
HTML Атрибути надають додаткову інформацію про елементи HTML.
В цій темі:
HTML Атрибути
- Всі HTML елементи можуть мати атрибути
- Атрибути надають додаткову інформацію про елемент
- Атрибути завжди вказуються в початковому тезі
- Атрибути зазвичай входять в пари ім'я/значення, наприклад: ім'я="значення"
Атрибут href
HTML посилання визначаються за допомогою тега <a>. Адреса посилання вказується в атрибуті href:
Докладніше про посилання і тег <a> можна дізнатись в наступних розділах цього підручника.
Атрибут src
HTML зображення визначаються за допомогою тега <img>.
Ім'я файла джерела зображення вказується в атрибуті src:
Атрибути width (ширина) та height (висота)
HTML зображення також мають атрибути width (ширина) та height (висота), які визначають ширину та висоту зображення:
Ширина та висота вказуються в пікселях за умовчанням; тому width="500" означає ширину 500 пікселів, а height="600" означає висоту 600 пікселів.
Детальніше про зображення ви дізнаєтесь в розділі HTML зображення на нашому сайті W3Schools українською.
Атрибут alt
Атрибут alt вказує альтернативний текст, який буде використовуватись, якщо зображення не може бути відображене.
Значення атрибута alt може бути прочитано програмами читання з екрану (скрінрідерами). Таким чином, можна "прослуховувати" веб-сторінки, наприклад, людина з вадами зору може "чути" елемент, тобто, буде знати, що зображено на картинці.
Атрибут alt також корисний, якщо зображення не може бути відображене (наприклад, якщо воно не існує на сайті):
Приклад
Подивіться, що відбудеться, якщо ми спробуємо відобразити зображення, яке не існує:
<img src="img_typo.jpg" alt="Дівчина в жакеті">
Спробуйте самі »
Атрибут style
Атрибут style використовується для вказівки стилю елемента, такого як колір, шрифт, розмір і т.д.
Ви дізнаєтесь більше про стилізацію HTML елементів пізніше в цьому підручнику, і в CSS Підручнику на нашому сайті W3Schools українською.
Атрибут lang
Мова документу може бути оголошена в тезі <html>.
Мова оголошується за допомогою атрибута lang.
Оголошення мови важливо для додатків з розширеними можливостями (наприклад, засобів читання з екрану - скрінрідерів) і пошукових систем:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Перші дві літери вказують на мову (en - англійська). Якщо є діалект, додайте ще дві літери (US, тобто США).
Атрибут title
Тут атрибут title додається до елементу <p>. Значення атрибута title буде відображатися у вигляді підказки при наведенні миші на параграф:
Використовувати рядкові атрибути (в нижньому регістрі)
Стандарт HTML5 не вимагає імен атрибутів в нижньому регістрі.
Атрибут title може бути написаний у верхньому або нижньому регістрі, наприклад title або TITLE.
W3C рекомендує використовувати нижній регістр в HTML і вимагає нижній регістр для більш строгих типів документів, таких як XHTML.
У W3Schools завжди використовують імена атрибутів в нижньому регістрі.
Ми пропонуємо: значення атрибутів брати в лапки
Стандарт HTML5 не вимагає лапок навколо значень атрибутів.
Атрибут href, показаний вище, можна писати без лапок:
W3C рекомендує лапки в HTML та вимагає лапки для більш строгих типів документів, наприклад XHTML.
Іноді необхідно використовувати лапки. Цей приклад не буде правильно відображати атрибут title, оскільки він містить пробіл:
Використання лапок є найбільш поширеним при написанні HTML-коду. Пропуск лапок може привести до помилок. У W3Schools завжди використовують лапки навколо значень атрибутів.
Одинарні або подвійні лапки?
Подвійні лапки навколо значень атрибутів є найбільш поширеними в HTML, але також можна використовувати і одинарні лапки.
У деяких ситуаціях, коли саме значення атрибута містить подвійні лапки, необхідно використовувати одинарні лапки:
<p title='John "ShotGun" Nelson'>
Або навпаки:
<p title="John 'ShotGun' Nelson">
Спробуйте самі »
Резюме розділу
- Всі HTML елементы можуть мати атрибути
- Атрибут
titleзабезпечує додаткову інформацію у вигляді "виринаючої підказки" - Атрибут
hrefнадає адресну інформацію для посилань - Атрибути
widthтаheightнадають інформацію про розмір зображень - Атрибут
altнадає текст для програм читання з екрану (скрінрідерів) - У W3Schools завжди використовують рядкові (в нижньому регістрі) значення атрибутів
- В W3Schools завжди значення атрибутів в лапках
HTML Вправи
HTML Атрибути
Нижче наведено алфавітний список деяких атрибутів, часто використовуваних в HTML, про які ви дізнаєтеся більше в цьому підручнику:
| Атрибут | Опис |
|---|---|
| alt | Визначає альтернативний текст для зображення, коли зображення не може бути відображене |
| disabled | Вказує, що вхідний елемент повинен бути відключений |
| href | Вказує URL-адресу (веб-адресу) для посилання |
| id | Вказує унікальний ідентифікатор елемента |
| src | Вказує URL-адресу (вебадресу) зображення |
| style | Визначає вбудований CSS стиль для елемента |
| title | Визначає додаткову інформацію про елемент (відображається як підказка) |
Повний список всіх атрибутів для кожного HTML елемента наведений в: HTML Довідник атрибутів на нашому сайті W3Schools українською.
Запитання для самоконтролю
- Що таке HTML-атрибути?
- Навіщо потрібні атрибути HTML-елементам?
- Де вказуються атрибути?
- Які бувають атрибути?
- Який атрибут визначає адресу посилання?
- Який атрибут вказує джерело зображення?
- Які атрибути визначають ширину і висоту елемента?
- Який атрибут вказує альтернативний текст?
- Який атрибут використовується для вказівки стилю елемента?
- За допомогою якого атрибута оголошується мова вебсторінки?
- За допомогою якого атрибута вказується виринаюча підказка для HTML-елементу?
- В якому регістрі рекомендується писати імена атрибутів?
- Чи потрібно писати атрибути в лапках?
- Які лапки - одинарні чи подвійні - рекомендується писати навколо значень атрибутів?
