HTML5 Section or Article

Question

Let's say I have this part of my website (project to make a webshop):

<section id="GraphicsCards">
        <h2>Graphics Cards</h2>
        <section>
            <h3>Radeon GPUs</h3>
            <section>
                <h4>ASUS Dual Radeon RX 7800 XT OC</h4>
                <p>1x HDMI, 3x DisplayPort, RDNA 3</p>
                <img src="../media/GPUs/rx7800xt.png" alt="rx7800xt">
                <p class="price">Price: € 549.00</p>
                <a href="./p_RX7800_details.html">More details</a>
            </section>
        </section>

        <section>
            <h3>Nvidia GPUs</h3>
            <section>
                <h4>GIGABYTE GeForce RTX 4060 EAGLE OC 8G</h4>
                <p>2x HDMI, 2x DisplayPort, DLSS 3</p>
                <img src="../media/GPUs/rtx4060.png" alt="rtx4060">
                <p class="price">Price: € 349.00</p>
                <p>More details</p>
            </section>
        </section>
    </section>

Would there be any use in changing any of them in articles or should I just keep them as is? I'm still a bit confused as to which one I should use.

Researched a bit but still quite confused, I can use both but I want to make sure it's properly made so that when I continue working on it and use CSS it can be properly designed.

Answer 1

Both <section> and <article> behave exactly like <div> tags. So for styling with CSS it makes no difference at all which of them (or other div-like elements) you use.

But they are what's called semantic HTML elements, so they convey a meaning. Which matters for

• readability of one's code (to developers)
• accessiblity (to visually impaired people who use screen readers)
• SEO (search engine crawlers can better understand what your site is about)

According to W3C (who develops the HTML standard):

The section element represents a section of a document, typically with a title or heading. ~ Link

The article element represents a section of content that forms an independent part of a document or site; for example, a magazine or newspaper article, or a blog entry. ~ Link

In your case the two outer <section> elements make perfect sense, but you could turn the innermost <section>s into <article>s, because as products they're somewhat self-contained and independent.

Answer 2

The main difference between a <section> and an <article> is that the latter...

...represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

— MDN Web Docs: The Article Contents element

What you have now is great as-is.

Or if you intend for the individual specification to independently distributable or reusable, you could convert those innermost <section> elements to <article> elements. Both approaches are valid HTML and semantically reasonable. In this case it is somewhat of a judgement call by you as the author.

Personally, since those specification blocks are self-contained and could make complete sense if they were clipped out of the page to stand alone, I'd lean towards using an <article>. But this is up to interpretation and author intent.

But don't double up and have an article that only has a section as its one child or vice versa. You can mix them, but don't double wrap something in order to use both.