Урок №6. HTML. Атрибути

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Атрибути надають додаткову інформацію про елементи HTML.

Атрибути HTML. Для чого потрібні атрибути?


Атрибут href

Посилання HTML визначаються тегом <a>. Адреса посилання вказана в атрибуті href:

Приклад:

<a href="https://www.w3schools.com">This is a link</a>
Спробуйте самі! »

Докладніше про посилання та тег <a> можна дізнатися в наступних розділах цього посібника.


Атрибут src

Зображення в HTML визначаються тегом <img>.

Назва файлу джерела зображення вказано в атрибуті src:

Приклад:

<img src="img_girl.jpg">
Спробуйте самі! »

Атрибути width (ширина) і height (висота)

Зображення в HTML мають набір атрибутів розміру, який визначає ширину і висоту зображення:

Приклад:

<img src="img_girl.jpg" width="500" height="600">
Спробуйте самі! »

Розмір зображення задається в пікселях: width = "500" означає ширину 500 пікселів.

Ви дізнаєтеся більше про зображення в розділі Зображення в HTML.


Атрибут alt

Атрибут alt вказує альтернативний текст для використання, коли зображення не може бути відображено. Значення атрибуту можна прочитати читачами екрану (скрінрідерами). Таким чином, хтось "слухає" веб-сторінку, наприклад людина з порушенням зору може "почути" елемент.

Приклад:

<img src="img_girl.jpg" alt="Girl with a jacket">
Спробуйте самі! »

Атрибут alt також корисний, якщо зображення не існує. Подивіться, що станеться, якщо ми спробуємо відобразити зображення, яке не існує:

Приклад:

<img src="img_typo.jpg" alt="Girl with a jacket">
Спробуйте самі! »

Атрибут style

Атрибут style використовується для визначення стилю елемента, наприклад кольору, шрифту, розміру тощо.

Приклад:

<p style="color:red">I am a paragraph</p>
Спробуйте самі! »

Примітка: Ви дізнаєтеся більше про стилізацію пізніше в цьому посібнику, а також в підручнику по CSS на W3Schools.


Атрибут lang

Мову веб-сторінки можна оголосити в тезі <html>. Мова оголошується атрибутом lang. Оголошення мови має важливе значення для додатків доступності (програми для читання з екрана) та пошукових систем:

Приклад:

<!DOCTYPE html>
<html lang="en-US">
<body>
... Content
</body>
</html>

Перші дві літери визначають мову (en). Якщо є діалект, використовують ще дві букви (US). Для української мови використовують букви uk.


Атрибут title

Тут атрибут title додається до елемента <p>. Значення атрибута заголовка відображатиметься як спливаюча підказка, коли ви пересуваєте курсор миші над параграфом:

Приклад:

<p title="I'm a tooltip">
This is a paragraph.
</p>
Спробуйте самі! »

Використовуйте атрибути нижнього регістру

Стандарт HTML5 не вимагає імен атрибутів у нижньому регістрі. Атрибут title може бути записаний у верхньому або нижньому регістрі – title або TITLE.

Примітка: W3C рекомендує нижній регістр в HTML і вимагає нижнього регістру для більш жорстких типів документів, таких як XHTML.


Значення атрибутів в лапках

Стандарт HTML5 не вимагає лапок навколо значень атрибутів. Атрибут href, показаний вище, може бути написаний без лапок:

Приклад (Погано):

<a href=https://www.w3schools.com>
Спробуйте самі! »

Приклад (Добре):

<a href="https://www.w3schools.com">
Спробуйте самі! »

W3C рекомендує лапки в HTML і вимагає лапки для більш жорстких типів документів, таких як XHTML. Іноді потрібно використовувати лапки. Цей приклад не відображатиме правильно атрибут title, оскільки він містить пробіл:

Приклад:

<p title=About W3Schools>
Спробуйте самі! »

Примітка: Найбільш поширеним написанням HTML-коду є з використанням лапок. Опущення лапок може призвести до помилок. У W3Schools завжди використовують лапки навколо значень атрибутів.


Одинарні чи подвійні лапки?

Подвійні лапки навколо значень атрибутів є найбільш поширеними в HTML, але також можна використовувати і одинарні лапки. У деяких ситуаціях, коли значення атрибута само по собі містить подвійні лапки, необхідно використовувати одинарні лапки:

Приклад:

<p title='John "ShotGun" Nelson'>

Або навпаки:

Приклад:

<p title="John 'ShotGun' Nelson">
Спробуйте самі! »

Резюме розділу


Перевірте себе вправами!


HTML Атрибути

Нижче наведено алфавітний список деяких атрибутів, які часто використовуються в HTML, про які ви дізнаєтеся більше в цьому підручнику:

Атрибут Опис
alt Визначає альтернативний текст для зображення, коли зображення не може бути відображене
disabled Вказує, що вхідний елемент повинен бути вимкнений
href Вказує URL-адресу (веб-адресу) для посилання
id Вказує унікальний ідентифікатор елемента
src Вказує URL-адресу (веб-адресу) зображення
style Визначає вбудований стиль CSS для елемента
title Визначає додаткову інформацію про елемент (відображається як спливаюча підказка)

Примітка: Повний список всіх атрибутів для кожного елемента HTML наведено в довіднику атрибутів HTML.



warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.