Как вставить картинку в 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 — этого достаточно для большинства базовых задач.
