Урок 16 із 239
7%
← Назад

Робота із зображеннями в HTML

Навчіться додавати зображення на вебсторінку за допомогою HTML-тега img.

Робота із зображеннями в HTML

Зображення роблять вебсторінки більш цікавими та зрозумілими. У HTML для додавання картинок використовується спеціальний тег img.

Тег img відрізняється від більшості HTML-тегів тим, що він не має закривального тега. Він є одиночним тегом.

Тег img

Для того щоб показати зображення, потрібно використати обов'язковий атрибут src. У ньому вказується шлях до файлу картинки.

<img src="smile.png">

У цьому прикладі браузер шукає файл smile.png у тій самій папці, де знаходиться HTML-файл.

Шляхи до зображень

КодОпис
<img src="photo.png">Картинка знаходиться в цій самій папці
<img src="images/photo.png">Картинка знаходиться у папці images
<img src="/images/photo.png">Абсолютний шлях від кореня сайту
<!-- Картинка з папки images -->

<img src="images/photo.jpg">

Атрибут alt

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

<img 
  src="smile.png" 
  alt="Весела посмішка"
/>
❗ Важливо:

Завжди додавайте alt до зображень. Це покращує доступність сайту та допомагає пошуковим системам зрозуміти зміст картинки.

📌 Завдання:
  1. Додайте будь-яке зображення до вашого HTML-проєкту.
  2. Розмістіть картинку на сторінці за допомогою тега img.
  3. Додайте атрибут alt з описом зображення.
  4. Перевірте результат у браузері.
💡 Показати підказку

Перевірте правильність шляху до файлу. Якщо картинка не показується — найчастіше проблема саме у неправильному src.

✅ Показати відповідь
Приклад:

<img 
  src="images/cat.jpg"
  alt="Кіт на фото"
/>