Як вставити картинку в HTML — одне з найчастіших питань для тих, хто робить першу сторінку, редагує шаблон або додає зображення в лист чи блог. На практиці все зводиться до одного тега, але важливо правильно вказати шлях до файлу та опис для доступності.
Базовий тег для зображення
У HTML картинку вставляють через тег <img>. Це порожній елемент, тобто він не має окремого закриваючого тега. Найпростіший варіант виглядає так:
<img src="image.jpg" alt="Опис зображення">
Тут src вказує, де лежить файл, а alt описує, що саме показано на зображенні. Саме цей опис важливий для SEO, екранних читачів і випадків, коли файл не завантажився.
Як правильно вказати шлях до картинки
Найчастіше помилка виникає не в самому тегу, а в адресі файлу. Є два основні варіанти:
- Відносний шлях — коли картинка лежить поруч із HTML-файлом або в папці на сервері.
- Абсолютний URL — коли ви вставляєте повну адресу, наприклад із доменом і назвою файлу.
Якщо зображення не відображається, перевірте написання імені файлу, розширення та регістр літер. На сервері photo.jpg і Photo.jpg можуть бути різними файлами.
Що означають alt, width і height
Щоб зображення було не лише видимим, а й коректним для сторінки, часто додають ще кілька атрибутів.
- alt — короткий змістовний опис картинки.
- width і height — розміри зображення в пікселях.
- title — підказка, яка з’являється при наведенні, але вона не замінює alt.
Атрибути width і height допомагають браузеру швидше розрахувати макет сторінки, а це зменшує стрибки верстки під час завантаження.
Приклад вставки картинки в HTML
Ось простий приклад, який можна одразу використати:
<img src="images/office-laptop.jpg" alt="Ноутбук на робочому столі" width="800" height="450">
Якщо картинка має бути клікабельною, її зазвичай загортають у посилання. Тоді зображення веде на окрему сторінку, файл або збільшену версію:
<a href="images/office-laptop.jpg"><img src="images/office-laptop.jpg" alt="Ноутбук на робочому столі"></a>
Типові помилки, яких варто уникати
- забути атрибут alt;
- вказати неправильний шлях до файлу;
- використати великі й малі літери невірно в назві зображення;
- додавати надто довгий або порожній опис у alt;
- підключати занадто великий файл без оптимізації.
Якщо ви готуєте сторінку для сайту, краще зберігати зображення в зрозумілій структурі папок і давати файлам короткі назви без пробілів. Це спрощує підтримку і зменшує ризик помилок.
Коли варто використовувати інші способи
Для сучасної верстки інколи потрібні додаткові рішення: адаптивні зображення, picture для різних екранів або lazy loading для відкладеного завантаження. Але якщо вам потрібно саме зрозуміти, як вставити картинку в HTML, базовий тег <img> закриває більшість простих задач.
Почніть із правильного src, додайте змістовний alt і перевірте шлях до файлу — цього вже достатньо, щоб зображення стабільно працювало на сторінці.
