НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

HTML5 Підручник

HTML СТАРТ HTML Вступ HTML Редактори HTML Основні приклади HTML Елементи HTML Атрибути HTML Заголовки HTML Параграфи HTML Стилі HTML Форматування HTML Цитати HTML Коментарі HTML Кольори HTML CSS HTML Посилання HTML Зображення HTML Таблиці HTML Списки HTML Блоки HTML Класи HTML Ідентифікатори HTML Фрейми HTML JavaScript HTML Шляхи файлів HTML Голова веб-сторінки HTML Макети HTML Адаптивність HTML Комп'ютерний код HTML Символьні об'єкти HTML Символи HTML Кодування HTML URL кодування HTML XHTML

HTML Форми

HTML Форми HTML Елементи форми HTML Типи вводу HTML Атрибути вводу

HTML5

HTML5 Вступ HTML5 Підтримка HTML5 Нові елементи HTML5 Семантичні елементи HTML5 Перехід з HTML4 HTML5 Гід по стилю

HTML Графіка

HTML Canvas HTML SVG

HTML Медіа

HTML Медіа HTML Відео HTML Аудіо HTML Плагіни HTML YouTube

HTML API

HTML Геолокація HTML Drag/Drop HTML Web сховище HTML Web робітники HTML SSE

HTML Приклади

HTML Приклади HTML Вікторина HTML Вправи HTML Сертифікат HTML Резюме HTML Доступність

HTML Довідники

HTML Список тегів HTML Атрибути HTML Глобальні атрибути HTML Події HTML Кольори HTML Canvas HTML Аудіо/Відео HTML Діючі Doctype HTML Набори символів HTML URL кодування HTML Кодування мови HTTP Повідомлення HTTP Методи PX в EM Конвертер Гарячі клавіши

HTML5. Уроки для початківців

HTML Атрибути



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


HTML Атрибути

  • Всі HTML елементи можуть мати атрибути
  • Атрибути надають додаткову інформацію про елемент
  • Атрибути завжди вказуються в початковому тезі
  • Атрибути зазвичай входять в пари ім'я/значення, наприклад: ім'я="значення"

Атрибут href

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

Приклад

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

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


Атрибут src

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

Ім'я файла джерела зображення вказується в атрибуті src:

Приклад

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

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

 HTML зображення також мають атрибути width (ширина) та height (висота), які визначають ширину та висоту зображення:

Приклад

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

Ширина та висота вказуються в пікселях за умовчанням; тому width="500" означає ширину 500 пікселів.

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


Атрибут alt

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

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

Приклад

<img src="img_girl.jpg" alt="Дівчина в жакеті">
Спробуйте самі »

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

Приклад

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

<img src="img_typo.jpg" alt="Дівчина в жакеті">
Спробуйте самі »

Атрибут style

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

Приклад

<p style="color:red">Це параграф.</p>
Спробуйте самі »

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


Атрибут lang

Мова документу може бути оголошена в тезі <html>.

Мова оголошується за допомогою атрибута lang.

Оголошення мови важливо для додатків з розширеними можливостями (засоби читання з екрану) і пошукових систем:

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

...

</body>
</html>

Перші дві літери вказують на мову (en). Якщо є діалект, додайте ще дві літери (US, тобто США).


Атрибут title

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

Приклад

<p title="Я виринаюча підказка">
Це параграф.
</p>
Спробуйте самі »

Використовувати рядкові атрибути (в нижньому регістрі)

Стандарт HTML5 не вимагає імен атрибутів в нижньому регістрі.

Атрибут title може бути написаний у верхньому або нижньому регістрі, наприклад title або TITLE.

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

У W3Schools завжди використовують імена атрибутів в нижньому регістрі.


Ми пропонуємо: значення атрибутів брати в лапки

Стандарт 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 елементы можуть мати атрибути
  • Атрибут title забезпечує додаткову інформацію у вигляді "виринаючої підказки"
  • Атрибут href надає адресну інформацію для посилань
  • Атрибути width та height надають інформацію про розмір зображень
  • Атрибут alt надає текст для програм читання з екрану (скрінрідерів)
  • У W3Schools завжди використовують рядкові (в нижньому регістрі) значення атрибутів
  • В W3Schools завжди значення атрибутів в лапках

HTML Вправи

Перевірте себе за допомогою вправ

Вправа:

Додайте "виринаючу підказку" до пункту нижче з текстом "About W3Schools".

<p ="About W3Schools">W3Schools is a web developer's site.</p>

Почати вправу


HTML Атрибути

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

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

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