Ссылки, изображения и медиа

Ссылка — элемент <a> с адресом в href: абсолютным, относительным или якорем. Картинку вставляет <img> с описанием в alt, видео и звук — <video> и <audio>.

Ссылка: адрес и слова

Ссылка это то, что превратило набор документов в сеть: элемент <a> (anchor, якорь) с атрибутом href (hypertext reference). Две вещи в нём важны: куда он ведёт и что написано внутри.

Текст ссылки должен быть понятен без окружения. Люди с программой чтения с экрана часто просят у неё список всех ссылок страницы, и если там двадцать раз «здесь» и «читать далее», пользы нет. Пишите «Подробнее про межевание», «Скачать прайс (PDF, 120 КБ)», «Записаться на консультацию».

Адрес бывает нескольких видов. Попробуйте на схеме: поменяйте адрес страницы и значение href и посмотрите, куда ведёт ссылка.

Адрес этой страницы:

Значение href:

ОтносительнаяИз корня сайтаНа уровень вверхАбсолютнаяЯкорьПочтаТелефон

Это ссылка относительная: считается от адреса текущей страницы.
Браузер откроет: https://zarechye.example/kontakty.html

Какую картинку выберет браузер

Одна картинка лежит на сервере в четырёх размерах: 480, 800, 1200 и 2000 пикселей по ширине. Атрибут srcset перечисляет их, а браузер сам выбирает нужный для вашего экрана.

Ширина окна: 390 px Плотность экрана: обычный (×1)retina, телефон (×2)очень плотный (×3)

Картинка на всю ширину окна должна быть не уже, чем 780 px (ширина × плотность). Браузер возьмёт файл 800 px. Так телефон не скачивает лишние пиксели, а большой экран не получает размытую картинку.

Коротко о видах:

• абсолютная это полный адрес с https://: ведёт на конкретную страницу, откуда бы вы ни шли. Годится для других сайтов;
• относительная это kontakty.html или ../kontakty.html: считается от адреса текущей страницы. Годится для связей внутри сайта: при переезде на другой домен ссылки не ломаются;
• от корня сайта это /kontakty.html: считается от главной страницы, а не от текущей. Удобно, когда страницы лежат в разных папках;
• якорь это #contacts: место на этой же странице;
• особые схемы: mailto:ksenia@example.org открывает письмо, tel:+70000000000 набирает номер.

Если ссылка должна открываться в новой вкладке, пишут target="_blank". Делайте так только когда это правда нужно (например, чтобы человек не потерял заполняемую форму), и предупреждайте: людям с программой чтения неожиданное окно мешает. Раньше к такой ссылке добавляли rel="noopener"; современные браузеры делают это сами, но привычка не вредит.

Проверьте себя: чем относительная ссылка лучше абсолютной на своём сайте?

Она не привязана к адресу сайта: при переезде на другой домен или в другую папку ничего не ломается.

Якоря: ссылка на место страницы

Ссылка может вести не на другую страницу, а в нужное место этой. Для этого элементу, к которому надо попасть, дают уникальный id, а ссылку пишут с решёткой: href="#contacts".

<a href="#contacts">Связаться</a>
...
<aside id="contacts">...</aside>

Браузер прокрутит страницу к элементу с этим id. Правила: id один на странице, без пробелов, латиницей (русские буквы работают, но в адресах превращаются в длинные последовательности). Если ссылка с решёткой не работает, почти всегда причина в опечатке: id и href не совпадают.

Картинки

Картинка вставляется одиночным элементом <img>:

<img src="foto.jpg" width="160" height="160" alt="Ксения измеряет границу участка">

Файл нужного формата это половина дела.

• JPEG это фотографии: хорошо сжимает, но без прозрачности;
• PNG: графика и скриншоты, прозрачность;
• SVG это значки и схемы: векторная картинка, не размывается на любом экране и весит несколько килобайт;
• WebP и AVIF: современные форматы, которые сжимают лучше JPEG при том же качестве; поддерживаются всеми современными браузерами;
• GIF это устарел: для анимации сегодня берут видео, оно весит в десять раз меньше.

alt: слова вместо картинки

Атрибут alt это замена картинки словами. Его читает программа чтения с экрана, его показывает браузер, если картинка не загрузилась (вы видите это в практике: файлов нет). Правила простые:

• если картинка несёт смысл, опишите, что на ней и зачем она здесь: «Ксения измеряет границу участка», «Схема проезда: от остановки 200 метров налево»;
• если она декоративна (завиток, фон), пишите пустой alt="". Атрибут не убирают: без него программа читает имя файла вроде «IMG_2043.jpg»;
• если картинка служит ссылкой или кнопкой, опишите действие, а не картинку: «Позвонить», а не «телефонная трубка»;
• не пишите «изображение» и «фото» в начале: программа и так сообщит, что это картинка;
• не набивайте ключевыми словами: это вредит и людям, и поиску.

Проверьте себя: что писать в alt у декоративной картинки?

Пустую строку: alt="". Атрибут нужен, иначе программа прочтёт имя файла.

Размеры и ленивая загрузка

Пока картинка не загрузилась, браузер не знает, сколько места ей оставить. Помните «прыгающую вёрстку» из последнего урока части про интернет? Лечится она тем, что вы сами пишете width и height в пикселях: по ним браузер заранее считает пропорцию и резервирует место. Реальный размер потом подгонит CSS.

Картинки, которые лежат далеко внизу страницы, можно не грузить, пока человек до них не доскроллит: loading="lazy". Картинке на первом экране, наоборот, лениться нельзя: она задерживала бы первую отрисовку.

srcset и picture: нужный размер для каждого экрана

Если отдавать телефону картинку шириной 2000 пикселей, мы тратим его трафик. Поэтому одну картинку готовят в нескольких размерах и перечисляют в srcset:

<img src="foto-800.jpg"
     srcset="foto-480.jpg 480w, foto-800.jpg 800w, foto-1200.jpg 1200w"
     sizes="(min-width: 60rem) 40rem, 100vw"
     width="800" height="600" alt="…">

Здесь 480w это ширина файла в пикселях, а sizes подсказывает, сколько места картинка займёт на странице. Браузер знает ширину окна и плотность экрана, поэтому выбирает файл сам, как на схеме выше. А когда нужен другой формат или другая обрезка для разных экранов, картинку оборачивают в <picture> с несколькими <source>; запасной <img> остаётся внутри.

Подпись к картинке делают парой <figure> и <figcaption>: фигура объединяет картинку с её подписью.

Видео и звук

Элементы <video> и <audio> встроены в браузер:

<video controls width="640" poster="obloshka.jpg">
  <source src="rolik.webm" type="video/webm">
  <source src="rolik.mp4" type="video/mp4">
  <track kind="captions" src="rolik.vtt" srclang="ru" label="Русский">
  Ваш браузер не показывает видео: <a href="rolik.mp4">скачать</a>.
</video>

Что здесь есть:

• controls показывает кнопки управления;
• poster: картинка, пока видео не началось;
• несколько <source> дают браузеру выбор формата;
• <track>: субтитры. Они нужны глухим и слабослышащим, а ещё всем, кто смотрит без звука (в транспорте, на работе);
• текст внутри элемента увидит тот, чей браузер видео не умеет.

Не включайте автозапуск со звуком: он раздражает и мешает людям с программой чтения. Если видео запускается само, оно обязано быть без звука и должно останавливаться.

Часто видео не кладут на свой сайт, а вставляют с видеохостинга через <iframe>. Это удобно, но надо понимать цену: страница начинает обращаться к чужому серверу, а тот может собирать данные о ваших посетителях и в России работать нестабильно. В нашем курсе поэтому видео открываются только после клика.

Практика

Вернёмся к вашей странице 2005 года. Она получилась структурной, но ни с чем не связанной. Свяжите её: пункты меню должны вести к своим разделам, кнопка главного действия к контактам, а подвал должен давать вернуться наверх и открыть политику обработки данных. Потом добавьте фотографию и подтверждения из брифа.

Картинок в нашем предпросмотре нет: он не ходит в сеть. Поэтому на месте картинки появится её описание, и это отличный повод проверить, что оно понятно само по себе. На настоящем сайте файлы лежат рядом со страницей и грузятся. В проекте-архиве, который можно скачать, вы положите свои фотографии рядом под теми же именами.

Мы просим связать «не меньше трёх» разделов, но вы можете связать все: так будет и лучше для посетителя.

Что было не так с 2005 годом

Картинки без alt и без размеров были нормой: страница прыгала при загрузке, а для незрячих пользователей превращалась в череду имён файлов. Ссылки «здесь» и «подробнее» были нормой тоже. Всё это не техническое ограничение, а привычка: когда вы знаете, что смысл картинки ограничен тем, что видит глаз, вы о других не думаете. Сегодня эти привычки проверяют автоматические инструменты.