Тег img в HTML: атрибути src і alt, синтаксис та приклади

Тег img в HTML вставляє зображення на сторінку і працює як стандартний елемент для показу графіки у видимому вмісті документа. Якщо сказати простіше, HTML-тег img підключає файл картинки, а атрибути цього елемента керують джерелом, описом і базовими параметрами відображення.

Цей матеріал зосереджений на практиці. Тут важливо розібратися, як записується тег img у HTML, для чого потрібні src і alt, як задавати ширину та висоту, як зробити картинку посиланням і що перевірити, якщо зображення не відображається.

Що таке HTML-тег img і що він робить?

HTML-тег img вставляє зображення у сторінку і показує його в тому місці, де елемент стоїть у розмітці.

Найзручніше сприймати елемент img як точку підключення графічного файла. Сам тег не містить вміст усередині себе як абзац або заголовок. Він лише вказує браузеру, який файл треба завантажити і який альтернативний опис використовувати.

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

Який синтаксис тега img в HTML правильний?

Синтаксис тега img в HTML будується навколо елемента <img> з обов’язковим src і доречним alt.

<img src="photo.jpg" alt="Гірський пейзаж">

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

Який вигляд має базовий приклад тега img в HTML?

Базовий приклад тега img в HTML має містити шлях до файла і короткий змістовний опис.

<img src="images/cat.jpg" alt="Кіт на підвіконні">

Такий запис добре підходить для старту, бо показує головну логіку без зайвих параметрів. Спочатку перевірте, чи відкривається зображення за вказаним шляхом, а вже потім додавайте інші властивості.

Що означають атрибути src і alt у HTML-тега img?

Атрибути src і alt у HTML-тега img відповідають за джерело зображення і його альтернативний текст.

Src указує, який файл треба завантажити. Це може бути відносний шлях, наприклад images/pic.jpg, або інший коректний шлях до ресурсу в межах проєкту.

Alt дає текстовий опис, який спрацьовує, якщо картинка не завантажилася або якщо сторінку читають допоміжні технології. Саме тому атрибут alt не варто перетворювати на набір ключових слів. Він має коротко і точно пояснювати зміст зображення.

Ці два атрибути формують основу, без якої HTML-тег img або не працює, або працює гірше, ніж повинен.

Як писати alt для тега img без зайвого шуму?

Alt для тега img працює найкраще тоді, коли він короткий, конкретний і відповідає реальному змісту картинки.

Орієнтуйтесь на такі правила:

• описуйте, що важливо на зображенні
• не дублюйте без потреби слова “зображення” або “картинка”
• не перетворюйте alt на перелік ключових слів
• для суто декоративних зображень використовуйте порожній alt

Такий підхід робить розмітку чистішою і кориснішою. Після написання alt перечитайте його окремо від картинки: якщо сенс зрозумілий, опис працює добре.

Які атрибути HTML-тега img справді найважливіші?

Найважливіші атрибути HTML-тега img для початку це src, alt, width і height.

Src і alt формують основу. Width і height допомагають задати розміри і зробити відображення зображення передбачуванішим. Для більшості базових сторінок цього набору вже достатньо.

<img src="banner.jpg" alt="Банер сайту" width="800" height="300">

На практиці також трапляються loading, srcset і sizes, але для початку важливіше навчитися правильно працювати з головними атрибутами. Саме вони дають найбільше користі в повсякденній верстці.

Як змінювати розмір зображення через тег img в HTML?

Розмір зображення через тег img в HTML можна задавати атрибутами width і height, але для гнучкого оформлення часто зручніше використовувати CSS.

Ось простий варіант через атрибути:

<img src="photo.jpg" alt="Море" width="400" height="250">

Ось приклад через стиль:

<img src="photo.jpg" alt="Море" style="width: 100%; max-width: 400px;">

Для перевірки подивіться, чи не спотворюється картинка. Якщо пропорції зламалися, звірте співвідношення width і height або перенесіть керування розміром у CSS. Це надійніший шлях для адаптивного оформлення.

Як зробити зображення посиланням у HTML?

Зображення посиланням у HTML роблять через тег a, усередині якого стоїть img.

<a href="/gallery">

  <img src="preview.jpg" alt="Перейти до галереї">

</a>

Такий підхід корисний для карток товарів, прев’ю галерей і банерів. Після вставки перевірте дві речі: чи відкривається потрібна адреса і чи альтернативний текст залишається змістовним навіть без самої картинки.

Чому тег img в HTML не працює і що перевірити в першу чергу?

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

Почніть із такої послідовності:

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

Після кожного кроку оновлюйте сторінку і дивіться, чи з’явилося зображення. Якщо після перевірки шляху й розмірів проблема лишається, відкрийте сам файл окремо у браузері. Це швидко показує, де саме сталася помилка.

Яких помилок варто уникати під час роботи з тегом img у HTML?

Під час роботи з тегом img у HTML найчастіше помиляються не в самому елементі, а в деталях його використання.

Найтиповіші помилки такі:

• залишати неправильний або порожній src
• пропускати alt без причини
• перевантажувати alt ключовими словами
• ставити невідповідні width і height
• вставляти зображення без перевірки шляху до файла

Якщо перед публікацією перевірити шлях, опис і розмір, більшість базових проблем зникає ще до тестування сторінки. Це добра звичка для будь-якої HTML-розмітки.

Що варто запам’ятати про HTML-тег img?

HTML-тег img вставляє зображення на сторінку і працює правильно тоді, коли ви коректно задаєте src, пишете змістовний alt і контролюєте розмір без спотворення картинки. Для початку цього вже достатньо: правильний шлях до файла, зрозумілий опис і проста перевірка відображення після кожної зміни.