По семантике aside или нет — вот в чем вопрос?

Question

[Pavel_20]

Всем привет! Хочется расставить все точки над и с aside)
Есть страница карточки товара. Сверху по классике описание товара со слайдером, а ниже 3 секции (Наши посты, похожие товары и дополнить образ).
Вопрос: правильно ли я семантически разметил эти 3 секции через aside > section * 3 (см. скрин), рассуждая, что если мы уберем эти 3 секции на данной конкретной странице, то смысл страницы (карточка товара) от этого не потеряется?

Comments

[Вадим]

Пожалуй, один из самых холиварных тэгов.

рассуждая, что если мы уберем эти 3 секции на данной конкретной странице, то смысл страницы (карточка товара) от этого не потеряется

С одной стороны, звучит резонно, с другой...
Обратимся к mdn: aside - контент, который косвенно связан с основным содержимым. Задаём вопрос к каждой секции:
1) "Наши посты" - связан ли этот блок, даже косвенно, с основным содержимым карточки товара? Если бы там были посты про конкретный вид товара, к которому относится просматриваемый товар, то, пожалуй, да. Если там вообще все посты ресурса, то, скорее, нет.
2) "Похожие товары" - тот же вопрос. С одной стороны, товары же похожие, значит, вроде как связано? Связано, но косвенно ли с конкретным товаром? Как-то эта информация дополняет информацию о текущем товаре? Вроде как не особо. Если бы там была информация по типу "ещё товары этой же категории из этого же материала\от этого же производителя", то тут уже скорее да. Если просто все возможные, по не понятно какому принципу якобы похожие товары, то скорее нет.
3) "Дополнить образ" - как по мне, аналогично с предыдущим. Если бы были товары из той же коллекции, то скорее да. Если товары на другие "части тела", то скорее нет.

[Pavel_20]

Вадим, просто если б условно похожие товары были выведены в боковой панельке, то многие думаю без колебаний подумали, что это aside. А когда секции идут друг под другом, то уже вопросы возникают. Но читал в какой-то статье, что одна из ошибок при распознавании aside - это считать, что это только боковая колонка (сайдбар)

[Вадим]

Pavel_20, всё верно. Если человек определяет aside на основе его положения в вёрстке, то, скорее всего, этот человек не понял что такое aside.

[Вадим]

Pavel_20, вот, например, небезызвестный макет благодаря одной небезызвестной школе по веб разработке:

spoiler

Считаю что сноска снизу про перфораторы, вполне себе aside, потому что открыт раздел с перфораторами, там уточняющая информация, убрав которую, для интернет магазина, мало что, на самом деле, поменяется.

Answer 1

[Alexey Levicky]

HTML-элемент представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.
Исходя из этого описания и предоставленного Вами дизайна, использование aside семантически неверно. Эти три секции это именно секции

Comments

[Pavel_20]

читал, что главной ошибкой считать, что aside может быть только сбоку. А если представить, что секция похожие товары была бы выведена в сайдбаре?

[Alexey Levicky]

Тут все зависит от ваших целей, если в расчет на оптимизацию SEO, то использование <section> и <ul> вполне достаточно, <aside> тут скорее для конкретизации, и, возможно добавит больше относительно доступности (скринридеры смогут более детально описать контекст контента на странице)
Вообще верстка называется версткой потому что раньше сайты верстали по принципу газетных/журнальных статей, и там <aside> это именно боковая колонка с рекламой или сносками к статье — отсюда и описание в документации к этому тегу.
По этому могу предположить, что использование в данном случае улучшит доступность, но вполне вероятно ухудшит SEO страницы, так как контент представленный в этом теге будет считаться как доп. информация, а товары, даже если они "похожие" это главный контент любого интернет-магазина.

[Pavel_20]

Aleksey Levickyj, спасибо за развернутый ответ, наверное и вправду когда не до конца уверен лучше section и все