EN VI

HTML5 Section or Article?

How to HTML5 Section or Article

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.

Solution:

Technically there's no difference in using <section> vs <article>. Both behave exactly like <div> tags. So for styling with CSS it does not matter 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 ones 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.