Практика: карточка, понятная без изображения
Карточка не должна терять название и назначение при недоступной картинке. В этом упражнении смысл хранится в обычном HTML-тексте, а декоративная иллюстрация не повторяет его для экранного диктора.
Назначение
Карточка не должна терять название и назначение при недоступной картинке. В этом упражнении смысл хранится в обычном HTML-тексте, а декоративная иллюстрация не повторяет его для экранного диктора.
Как это работает
Встроенная SVG-картинка в img служит только цветовым украшением. Поэтому alt пустой, а заголовок и описание находятся отдельными элементами. Grid выделяет иллюстрации компактную колонку, которую можно убрать без потери информации.
Пример
<style>.resilient-card{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:1rem;padding:1rem;border:1px solid #b2cbbb}.resilient-card img{width:4rem;height:4rem}.resilient-card h3{margin:0}.resilient-card p{margin:.5rem 0 0}</style>
<article class="resilient-card"><img src="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2764%27 height=%2764%27%3E%3Crect width=%2764%27 height=%2764%27 rx=%2712%27 fill=%27%23276d49%27/%3E%3C/svg%3E" alt="" width="64" height="64"><div><h3>Основы разметки</h3><p>Учебный материал о структуре HTML-документа.</p></div></article>Что должно получиться
Название и описание доступны независимо от успешности декодирования иллюстрации. Размеры декоративного изображения зарезервированы. Пустой alt уместен именно потому, что рисунок здесь не сообщает дополнительных фактов.
Граница применения и частая ошибка
Нельзя автоматически ставить пустой alt всем картинкам карточек. Если схема, фотография товара или график передают важные сведения, нужен подходящий текстовый эквивалент. Не используйте CSS-фон для единственного носителя содержательной информации.
Самостоятельная проверка
Удалите src в своей копии, затем полностью уберите img и сравните смысл карточки. После этого замените декор содержательной схемой и сформулируйте подходящее описание. Проверьте перенос длинного заголовка.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.