Урок 03 · 11 хв

Посилання й картинки

Куди веде клік і що бачить той, хто картинки не бачить.

Посилання — перехід. Картинка — вміст, а не прикраса верстки. Обидва теги ламаються однаково: порожній href, картинка без alt, посилання «натисніть тут». Пиши так, щоб із тексту посилання було ясно, куди воно веде, навіть без навколишнього абзацу.

Три види адреси

Абсолютна адреса — з протоколом. На інший сайт.
Відносна від кореня — починається з /. Сторінка на цьому ж сайті.
Якір — #id. Стрибок до елемента з таким id на цій сторінці.
mailto: відкриває поштову програму. Це все ще посилання.

Можна спитати про це правило«Нова вкладка — лише з rel»

Картинка із запасним текстом

alt описує, що на картинці, якщо її немає: повільна мережа, скринрідер, режим без картинок. Якщо картинка суто декоративна і сенс уже є в підписі — alt="". Порожній атрибут кращий, ніж «картинка» чи ім'я файлу. width і height не малюють розмір самі по собі: вони резервують місце, щоб сторінка не стрибала, поки файл вантажиться.

Можна спитати про цей пункт«Суть уроку»

Підпис до зображення

figure загортає ілюстрацію разом із figcaption. Підпис стосується картинки, а не сусіднього абзацу. Якщо картинка всередині посилання, alt описує мету переходу, а не пейзаж на фото.

Картинка-посилання

Документація

MDN · a — href, target, rel
MDN · img — src, alt, розміри
MDN · figure — ілюстрація з підписом

Можна спитати про цей пункт«Підпис до зображення»

Перевірка

Закріпи, поки не пішов далі

1. Що означає href="/about"?
2. Відкриваєш посилання в новій вкладці. Що ще потрібно?
3. Коли в img допустимий порожній alt?
4. Який текст посилання гірший?