@iminby

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

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

Главная страница, блок последние товары мы делаем структуру:
<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?

Спасибо. Думаю в крациях - это многим поможет , в универсальном использовании, в плане вопросов и ответов, без воды и кучи слов, статья, не статья, заголовки и так далее.
  • Вопрос задан
  • 138 просмотров
Пригласить эксперта
Ответы на вопрос 2
dimovich85
@dimovich85
https://u-academy.net/
Разве структура в карточке такая большая, что нужен section?
Чего Вы хотите добиться, добавляя все эти обертки вокруг всех элементов внутри карточки (я про header вокруг заголовка например)?
Заголовки лучше сделать по иерархии, так как они будут помогать навигации по странице.
В отношении section -> article, согласен, по семантике похоже на правду. А вот внутри карточки скорее всего не будет сложной структуры, чтоб выделять целые секции, и не забывайте, что section обязан иметь заголовок.
Ответ написан
sergski
@sergski
web-developer
например, так
<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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы