Як вставити картинку в HTML — це одне з перших питань, з яким стикаються новачки у веброзробці. Насправді все зводиться до одного тега, але важливо правильно вказати шлях до файлу, alt-опис і, за потреби, розмір зображення.
Основний спосіб: тег img
Для вставки зображення в HTML використовують тег <img>. Це порожній тег, тобто він не має закривального аналога. Найпростіший приклад виглядає так:
<img src=”image.jpg” alt=”Опис зображення”>
Тут src вказує шлях до картинки, а alt описує її зміст. Саме alt важливий для доступності, пошукових систем і випадків, коли файл не завантажився.
Як правильно вказати шлях до картинки
Щоб зрозуміти, як вставити картинку в html без помилок, треба розрізняти три типи шляхів:
- Відносний шлях — якщо зображення лежить поруч із HTML-файлом або в папці проєкту.
- Шлях до папки — наприклад, images/photo.jpg.
- Абсолютне посилання — повний URL на зображення, наприклад з CDN або іншого сайту.
Приклад для локального проєкту:
<img src=”images/banner.jpg” alt=”Банер сайту”>
Якщо картинка знаходиться на сайті FileHostSeller або в хмарному сховищі, можна вставити її через пряме посилання:
<img src=”https://filehostseller.com/uploads/photo.jpg” alt=”Фото з сервісу FileHostSeller”>
Як задати ширину, висоту та адаптивність
Іноді потрібно не просто вставити зображення, а й керувати його розміром. Це можна зробити прямо в HTML, хоча для сучасних сайтів краще частину стилів винести в CSS.
<img src=”image.jpg” alt=”Приклад” width=”600″ height=”400″>
Якщо ж ви хочете, щоб картинка автоматично підлаштовувалася під ширину контейнера, використовуйте CSS:
<img src=”image.jpg” alt=”Приклад” style=”max-width:100%; height:auto;”>
Такий підхід особливо корисний для мобільних пристроїв і адаптивних сторінок.
Що робити, якщо картинка не відображається
Найчастіші причини прості:
- неправильний шлях у src;
- файл не завантажено на сервер або видалено;
- у назві є помилка, пробіл або неправильне розширення;
- сайт блокує зовнішнє зображення;
- браузер не має доступу до файлу через права або кеш.
Щоб швидко перевірити проблему, відкрийте URL картинки напряму в браузері. Якщо файл не відкривається окремо, HTML тут ні до чого — проблема в посиланні або розміщенні.
Короткий приклад для реальної сторінки
Ось базовий варіант, який можна вставити на сторінку одразу:
<img src=”images/office-laptop.jpg” alt=”Ноутбук на робочому столі” style=”max-width:100%; height:auto;”>
У цьому прикладі зображення має зрозумілий alt, зберігає пропорції та добре виглядає на різних екранах. Якщо ви часто працюєте з файлами для сайту, зручно тримати їх у впорядкованій структурі папок і використовувати прямі посилання з надійного хостингу.
Тепер ви знаєте, як вставити картинку в HTML у найпростішому та практичному форматі. Починайте з тега <img>, перевіряйте шлях до файлу і не забувайте про alt — цього вже достатньо для більшості базових задач.
