Урок 4 · HTML · 18 минут

Изображения и списки: сделай страницу наглядной

Картинка помогает объяснить мысль, а список делает длинный текст удобным для просмотра. В этом уроке разберём базовую разметку и важные детали доступности.

Как добавить изображение

Для изображения используют одиночный тег img. У него нет закрывающей части: всю информацию передают через атрибуты. Главный атрибут src содержит путь к файлу.

<img src="images/workplace.jpg" alt="Рабочее место с ноутбуком">

Относительный путь images/workplace.jpg означает, что рядом с текущей страницей находится папка images. Можно указывать и полный адрес картинки, но для собственных файлов надёжнее хранить их на своём сайте.

Зачем нужен alt

alt — текстовое описание изображения. Его прочитает скринридер, а браузер покажет его вместо картинки, если файл не загрузился. Описание должно передавать смысл: не «картинка», а то, что на ней важно.

<img src="team.jpg" alt="Команда обсуждает макет сайта у доски" width="800" height="450">

Атрибуты width и height задают исходные размеры. Они помогают браузеру заранее выделить место и уменьшают «прыжок» страницы во время загрузки. Внешний вид всё равно можно настроить через CSS.

Маркированный и нумерованный список

Если порядок пунктов не важен, используй ul. Для шагов инструкции, рецепта или последовательности действий подойдёт ol. Каждый пункт всегда записывают в теге li.

<h2>Что понадобится</h2>
<ul>
  <li>Редактор кода</li>
  <li>Браузер</li>
  <li>Немного любопытства</li>
</ul>

<ol>
  <li>Создай файл index.html</li>
  <li>Добавь разметку</li>
  <li>Открой файл в браузере</li>
</ol>

Что часто идёт не так

• Файл называется photo.JPG, а в src написано photo.jpg. На хостинге регистр букв важен.
• В alt повторяют подпись рядом с изображением или пишут слишком общие слова.
• Делают элементы списка без обёртки ul или ol.
• Вставляют огромную фотографию без оптимизации — страница загружается медленно.

Картинка — это файл, а не украшение в тексте

Тег img только указывает адрес файла. Сам файл должен лежать там, куда ведёт src. Удобная привычка: папка images рядом с страницей или в корне проекта, а в адресе — понятное имя вроде ceramic-bowl.jpg, а не IMG_2044.jpg.

Большой снимок с телефона легко весит несколько мегабайт. Страница из-за этого открывается медленно даже при правильной разметке. Перед вставкой ужми картинку примерно до ширины, в которой она реально показывается.

Подпись и альтернативный текст отвечают на разные вопросы

<figure>
  <img src="/images/bowl.jpg" alt="Глиняная пиала с синей глазурью на сером столе" width="800" height="600">
  <figcaption>Пиала после первого самостоятельного обжига.</figcaption>
</figure>

alt заменяет изображение, если оно не загрузилось или его не видит человек. Подпись в figcaption видна всем и добавляет контекст. Не копируй одну и ту же фразу в оба места. Для чисто декоративной картинки alt оставляют пустым: alt="".

Списки, которые не разваливаются

• Каждый пункт — это li внутри одного ul или ol. Не вкладывай список прямо в li другого пункта, пока в этом нет смысла.
• Нумеруй через ol только шаги и рейтинги. Перечень материалов остаётся маркированным.
• Не вставляй в пункт заголовок, картинку и три абзаца. Если пункт разросся, это уже отдельный раздел.
• У изображения указывай width и height, чтобы страница не прыгала, пока файл грузится.

<article>
  <h2>Прогулка у реки</h2>
  <img src="river.jpg" alt="Набережная у реки в солнечный день">
  <ul>
    <li>Свежий воздух</li>
    <li>Длинный маршрут</li>
    <li>Красивый вид</li>
  </ul>
</article>