Разметка карточки товара
Вопрос
Как бы ты сверстал карточку товара в каталоге: фото, название, цена, кнопка «В корзину», ссылка на страницу товара? Какие теги и почему?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Список карточек в `<ul>`/`<li>`, сама карточка `<article>`
Название заголовком нужного уровня (например `<h3>`), внутри ссылка на товар
`<img>` с осмысленным `alt` или `alt=""`, если название рядом и фото ничего не добавляет
«В корзину» это `<button type="button">`, переход на страницу это `<a href>`
Не вкладывать кнопку внутрь ссылки: интерактивное в интерактивном запрещено
Цена текстом, при скидке старая цена в `<del>` или с поясняющим текстом
Что могут спросить следом
- Как сделать кликабельной всю карточку, не вкладывая кнопку в ссылку?
- Какой уровень заголовка выбрать и от чего он зависит?
- Что прочитает скринридер, если в карточке только иконка корзины?
Разбор
Каталог это список, поэтому <ul> и в каждом <li> карточка <article>: она самостоятельна и имеет смысл отдельно. Название делаю заголовком уровня, который продолжает иерархию страницы, например <h3> под <h2> раздела, а внутри заголовка ссылка на страницу товара. У фото alt описывает товар, но если он дублирует название рядом, лучше пустой alt, чтобы не читать одно и то же дважды. Цена обычным текстом, старая цена через <del> с пояснением. «В корзину» это кнопка, потому что действие, а не переход, и у неё type="button". Кнопку нельзя класть внутрь ссылки: интерактивные элементы не вкладываются. Если нужна кликабельная карточка целиком, растягиваю псевдоэлемент ссылки на всю карточку через position: absolute, а кнопку поднимаю над ним. Если в кнопке только иконка, ей нужен aria-label.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.