Универсальное использование section и article, будет ли такая структура верной для интернет-магазина?

Question

[iminby]

Добрый всем.
У меня вопрос по универсальности использования для интернет-магазина разметки.
По сути, я хочу тут наконец определиться окончательно, так как все магазины одинаковы по сути по структуре и больше не задаваться вопрос и сомнениями.

Главная страница, блок последние товары мы делаем структуру:

<section>
<h2>Последние товары</h2>
<section>

Дальше у нас идет сетка товаров, по сути, тут мы можем брать обвертку в div, ну каждый по своему, тут пока особо разницы нет

<section>
<h2>Последние товары</h2>
<div class="list">

</div>
<section>

Дальше, судя по описанию, каждый товар мы можем оборачивать в article, так как , они потом как отдельная карточка товара.

<section>
<h2>Последние товары</h2>
<div class="list">
<article class="list__item"> - // - </article>
<article class="list__item"> - // - </article>
<article class="list__item"> - // - </article>
<article class="list__item"> - // - </article>
</div>
<section>

По сути, пока всё нормально, дальше у меня основные вопросы:
Главная страница, со списком товаров:

1. Нужно ли внутри article , всё оборачивать в section?
2. Потом, там по мануалам, по сути на название товара в article можно использовать уже h1, стоит ли его использовать или дальше по иерархии пускать h3?
3. Стандартный вывод мини-карточки:

- Изображение
- Заголовок
- Краткое описание
- Цена
- Кнопка купить

Изображение в figure
Заголовок в header

Дальше , описание , цена и кнопка купить, нужно ли оборачивать во что-нибудь по вашему, в тот же section по смыслу это можно связать, описание цена и купить, либо вместе с заголовком вновь же обернуть в section?

Карточка товара:

4. Карточка товара сама уже, стоит ли оборачивать в article?

Спасибо. Думаю в крациях - это многим поможет , в универсальном использовании, в плане вопросов и ответов, без воды и кучи слов, статья, не статья, заголовки и так далее.

Comments

[Антон Литвиненко]

Почему бы не посмотреть на наработки магазинов. Тот же вукоммерс, опенкарт. Целые команды работают над этим, можно брать за образец

[Ankhena]

1. Список товаров. Вы даже по-русски называете его списком.
Список это тег ul.

2. Оборачивать ли сам товар в article. Теоретически, товар самодостаточная смысловая единица и её можно обернуть в article. Я не использую, не люблю лишние обертки.

3. h1 в теории можно использовать сколько угодно раз на странице, но я ни раз не видела SEOшников, которым бы это нравилось. Я использую как основной заголовок страницы. А дальше по иерархии. В вашем примере выходит h3. Причем, заголовок ставлю первым для доступности.

4. header отпадает, раз нет article. Да и использовать его только ради одного заголовка, только лишние теги писать.
Но зато заголовок обычно является и ссылкой на карточку товара.

5. Если картинке нужна обертка, то да, figure, без описания.

6. Описание в p, цену тоже.

7. Купить - ссылкой или кнопкой, по обстоятельствам.

[iminby]

Антон Литвиненко, О да, зайди на маркеты пооткрывай большинство магазинов.
Чтобы отыскать что-то нужное, нужно покапаться, большинство дальше дивами просто.

[Антон Литвиненко]

iminby, да просто открой вукомерс из коробки. или их тему сторфронт

Answer 1

[Dima Polos]

Разве структура в карточке такая большая, что нужен section?
Чего Вы хотите добиться, добавляя все эти обертки вокруг всех элементов внутри карточки (я про header вокруг заголовка например)?
Заголовки лучше сделать по иерархии, так как они будут помогать навигации по странице.
В отношении section -> article, согласен, по семантике похоже на правду. А вот внутри карточки скорее всего не будет сложной структуры, чтоб выделять целые секции, и не забывайте, что section обязан иметь заголовок.

Comments

[Dima Polos]

iminby, Вы сами спросили, нужно ли внутри article все оборачивать в section. По Вашему описанию понятно, что карточка товара - это article, вот и вопрос, зачем section внутри? Section - крупный смысловой блок, у которого к тому же должен быть заголовок.

[iminby]

Dima Polos, я сначала не так прочитал, думал вы всё о карточке.
С section я , окей.
Ну если в карточке товара article дальше в section и там заголовок товара h1 , то по сути заголовок будет))

да и сейчас часто используется при лендосах, все разделы лендинга section смысловые, если там заголовок не предусмотрен дизайном,его скрывают стилями, но оставляют в разметке)

[iminby]

Dima Polos, Последний вопрос, так же в применении по смыслу тегов, перечень товаров ведь это по сути список, так возможно логичнее, это всё брать в ul, там каждый товар оборачивать в li , а уже в li использовать article.

Судя по семантике и логике, даже так правильнее, чем просто aside обвернутые в div просто, так как это будет список товаров, грубо говоря список, чего-то.
Но с такой же логикой, нужно в каждом блоге или новостном сайте, перечень постов список, тоже чтобы шлепами везде через ul )

[Dima Polos]

iminby, я тоже не мог ответить чётко на этот вопрос, пока не поставил скринридер и не стал вникать, как им пользоваться. Так вот, благодаря заголовкам можно быстро перейти с раздела в раздел.
Поэтому, если в секции есть заголовок "Список товаров" второго уровня, тогда человек, если захочет посмотреть товары, будет искать подзаголовки, то есть h3, так что не рекомендую делать h1.

По этой же логике и ответ на второй вопрос о списке. Тем, кто пользуется визуально тег ul ничем не помогает. Роботы типа seo им секции и артикла с заголовками хватит, чтобы понять структуру, а людям с ограничеными возможностями хватит ориентиров и тех же заголовков. Между товарами они смогут переходить по заголовкам, а для быстрого перехода к покупке через таб или хоткей на ближайший ориентир.
Выходит, что список не сильно тут важен для пользователя. Единственное, что он может дать - скажет сколько элементов в списке, но очень усложнит разметку.

[Dima Polos]

Чтоб сказать, сколько товаров в списке товаров можно скрытый блок сделать и туда на бекенде или через компонент выводить количество, а визуально скрывать. Так можно и себе жизнь облегчить и ничего не испортить.

Просто в погоне за семантикой нельзя упускать ее сути и цели - делать удобный и понятный для всех интерфейс. Именно для этого очищается используются эти html5 семвнтические теги, а не ради философии.

[iminby]

Dima Polos, да я понимаю, что с большего тут упор идет на скринридер и чистую разметку, без кучи дивов.

Answer 2

[sergski]

например, так

<section>
    <h1>Последние товары</h1>
    <article>
        <aside>
            <figure>
                <figcaption>Описание изображения</figcaption>
                <img src="" alt="" />
            </figure>
        </aside>
        <header>
            <h2>Товар</h2>
        </header>
        <div>
            Краткое описание товара
        </div>
        <footer>
            <div>Цена</div>
            <button>Кнопка купить</button>
        </footer>
    </article>
</section>

Comments

[Dima Polos]

Конечно, можно и так, но для текста подойдет тег р. Вот только тег aside вокруг figure зачем и зачем header вокруг заголовка? Не то чтобы это ошибка, но просто сама суть, какая у этих семантических оберток?
Дело в том, что теги типа aside помогают в качестве ориентиров на странице, и зачем ориентир вокруг картинки? А header и footer не имеют роли ориентиров, если не являются прямыми потомками body, зато в качестве вступления и заключению подходят как раз, так что окей. Просто хотел подчеркнуть, что у этих оберток есть вполне конкретные цели в разметке, и злоупотребление может даже немного помешать, я про aside, кажется это уже перебор. Заголовок сам по себе часть навигации, в доп. обертках часто не нуждается. Кнопки внизу карточки товара в footer - ок, я бы еще роль добавил, или взял aside, то есть вот тут aside как раз в тему, имхо) В остальном согласен.

[iminby]

С aside и divaми тут не согласен, тут p подходит, под просто текст.

[iminby]

Dima Polos, Ну header и footer тут да, тема двоякая, что как-бы и можно их использовать и как бы не нужны.
Aside согласен.

[Dima Polos]

iminby, окей, описание и цену можно и дивом, но как бы тег р не имеет особого смысла, кроме обертки специально под phrasing content. Но реально, можно и див, не суть) В общем, да, сошлись)

[iminby]

Dima Polos, ну для цены тут даже span больше подойдет, так как это по сути одно слово, без какого либо смысла текстового

А касательно header footer всё равно получается, что каждый др....т , как хочет)))

[Dima Polos]

iminby, header footer - пожалуйста, просто они особо тут ничего не дадут, но как бы да, можно прикрутить

[sergski]

Dima Polos, iminby, div в описании предполагает абзацы внутри. aside с изображением оправдан тем, что там может быть, например, и сладер со своим контентом. footer тоже на месте. В header кроме h2 быть и дополнительная информация. Это пример, а не истина в последней инстанции) Верстка хороша, когда при любой перестановке блоков ничего не ломается и выглядит, будто так и задумано, легко ориентироваться и поддерживать.

[iminby]

sergski, ну для этого используют, уникальные классы, по технологии например БЭМ, а не за счёт тэгов. А в div оборачивать текстовые куски - это тоже из дивозности, по сути это куски текста, которые либо в p , либо в span надо

[Dima Polos]

sergski, окей, интересная идея, тогда согласен