Урок 3. Картинки на странице
Страница из одного текста скучная. Добавим картинку — и сразу станет похоже на настоящий сайт.
Картинка вставляется тегом <img>. Он особенный: у него нет закрывающего тега, потому что закрывать нечего — внутри картинки текста не бывает.
<img src="/assets/img/cover-1.jpg" alt="Ночной город">Что такое src и alt
Слова внутри тега называются атрибутами — это настройки тега.
src— адрес картинки. Откуда браузеру её взять. Без него картинки не будет;alt— текстовое описание картинки.
Про alt стоит сказать отдельно, потому что новички его вечно пропускают. Он нужен в трёх случаях: если картинка не загрузилась — покажется текст; если страницу читает незрячий человек — программа-помощник прочитает описание вслух; и если страницу читает поисковик — он поймёт, что на картинке. Пустой alt — это как фотография без подписи в семейном альбоме: вроде и ничего, но через год никто не вспомнит, кто там.
Размер картинки
Огромную картинку можно уменьшить прямо в теге:
<img src="/assets/img/logo.png" alt="Логотип" width="200">Твой прогресс
Опыт и значки хранятся прямо в этом браузере — ни имени, ни почты для этого не нужно. Все треки и значки →
Частые вопросы
Почему у тега img нет закрывающего тега?
Потому что внутрь картинки нечего положить. Такие теги называют одиночными: браузеру достаточно знать адрес файла, а содержимого у элемента нет.
Зачем нужен атрибут alt?
Он показывается, если картинка не загрузилась, читается вслух программами для незрячих и помогает поисковику понять, что изображено. Без alt картинка для половины интернета просто не существует.