Semantically, should I choose ul or article when displaying products?

Question

I am marking the products listed on the home, I am using HTML5 to structure the pages, my intention is to define a semantic content. Because then I came across the following possibilities of marking:

Wrap the product showcase with a Section and list the products as a list.

<section>
    <h1>Semana da tecnologia</h1> <!-- Titulo da vitrine de produtos-->
    <ul>
        <li>
            <div></div> <!-- Aqui é o wrap do produto (titulo, foto, preco, etc...) -->
        </li>
        <li>
            <div></div> <!-- Aqui é o wrap do produto (titulo, foto, preco, etc...) -->
        </li>
    </ul>
</section>

Or instead of list use article for each product

<section>
    <h1>Semana da tecnologia</h1> <!-- Titulo da vitrine de produtos-->
    <article></article><!-- Aqui é o wrap do produto (titulo, foto, preco, etc...) -->
    <article></article><!-- Aqui é o wrap do produto (titulo, foto, preco, etc...) -->
</section>

I believe that both forms offer a semantic marking for the content, but which one should choose?

Answer 1

"The tag <article> specifies an independent content, self-sufficient. An article should make sense and be distributed independent of the rest of the site." W3schools

Considering that your product will follow a specific model and will work dynamically, I think it makes more sense to use the article.

In addition to making it visibly cleaner, it will be simpler to work a backend script to generate these products with this tag.

Answer 2

HTML stands for Hypertext Markup Language. It is a markup language. The original goal was a structure that worked by itself, and the CSS "complementary".

It’s not reality anymore. Without CSS very few sites would work. Taking this into account, it is often necessary to use HTML tags that simplify the work of "styling" a site, but it is not the goal of HTML, so semantically, the ideal would be to use the article.

The tag ul represents "unordered list" (unordered list), while the article tag was inserted into Html5 specifically to remedy the discussion ul versus div.

It is worth considering that it is always necessary to weigh the "purity" of the code against the speed of implementation. The "correct" does not always deliver the project or pay the bills, and this dilemma has no definitive solution, but from the point of view of obeying the standards, the article is the way. D