Semantically, should I opt for ul or article when displaying products?

Navigation
2

I'm doing the marking of the products listed in home, I'm using HTML5 to structure the pages, my intention is to define a semantic content. So I came across the following markup possibilities:

Involve the product window 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 rather use list 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 markup for content, but which one should I choose?

    
asked by anonymous 13.04.2015 / 22:10

2 answers

2
  

"The <article> tag specifies a separate content,   self sufficient. An article should make sense and be distributable   independent of the rest of the site. "    W3Schools

Considering that your product will follow a specific model and 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 with a backend script to generate those products with this tag.

    
13.04.2015 / 22:31
0

HTML stands for HyperText Markup Language. It is a markup language. The original purpose was a structure that would work by itself, and CSS would "complement."

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

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

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 nor pay the bills, and this dilemma has no definitive solution, but from the point of view of obeying standards, article is the way. : D

    
14.04.2015 / 09:23
Hide tab - Java Android themes support on custom components using AppCompat-v7