I
I
iminby2021-04-13 23:06:02
HTML
iminby, 2021-04-13 23:06:02

Generic use of section and article, would such a structure be correct for an online store?

Kind everyone.
I have a question about the versatility of using markup for an online store.
In fact, I want to finally decide here finally, since all stores are essentially the same in structure and no longer ask questions and doubts.

Main page, block latest products we make the structure:

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


Next we have a grid of goods, in fact, here we can take a wrapper in a div, well, each in its own way, there is not much difference here yet

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

</div>
<section>


Further, judging by the description, we can wrap each product in an article, since then they are like a separate product card.

<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>


In fact, while everything is fine, then I have the main questions:
Main page, with a list of products:

1. Do I need to wrap everything in a section inside an article ?
2. Then, according to the manuals, in fact, h1 can already be used for the product name in the article, is it worth using it or should h3 be used further along the hierarchy?
3. Standard mini-card output:

- Image
- Header
- Short description
- Price
- Buy button

Image in figure
Header header

Next , description , price and buy button, whether to wrap it in something you like, in the same section on the meaning can be linked, the description price and buy, or together with the title again wrapped in section?

Product card:

4. The product card itself is narrower, should it be wrapped in an article?

Thank you. I think in terms - this will help many, in universal use, in terms of questions and answers, without water and a bunch of words, an article, not an article, headlines and so on.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
Dima Polos, 2021-04-13
@dimovich85

Is the structure in the card so big that a section is needed?
What do you want to achieve by adding all these wrappers around all the elements inside the card (I'm talking about header around the header for example)?
Headings are best done in a hierarchy, as they will help navigate the page.
Regarding section -> article, I agree, it looks like the truth in terms of semantics. But inside the card, there will most likely not be a complex structure to highlight entire sections, and do not forget that the section must have a heading.

S
sergski, 2021-04-13
@sergski

like so

<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>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question