2

Estou fazendo a marcação dos produtos listados na home, estou utilizando HTML5 para estruturar as páginas, minha intenção é definir um conteúdo semântico. Pois então me deparei com as seguintes possibilidades de marcação:

Envolver a vitrine de produtos com uma section e listar os produtos como uma lista.

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

Ou ao inves de lista usar article para cada produto

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

Acredito eu que ambas as formas oferecem um marcação semântica para o conteúdo, porém por qual deveria optar?

1

2 Respostas 2

2

"A tag <article> especifica um conteúdo independente, auto-suficiente. Um article deve fazer sentido e poder ser distribuído independente do restante do site." W3Schools

Considerando que seu produto vai seguir um modelo específico e trabalhará de forma dinâmica, acho que faz mais sentido o uso do article.

Além de deixar visivelmente mais limpo, ficará mais simples de trabalhar um script de backend para gerar esses produtos com esta tag.

0

HTML significa HyperText Markup Language. É uma linguagem de marcação. O objetivo original era uma estrutura que funcionasse por si só, e o CSS "complementaria".

Não é a realidade mais. Sem o CSS pouquíssimos sites funcionariam. Tendo isso em conta, muitas vezes é necessário usar tags HTML que simplifiquem o trabalho de " estilizar" um site, mas não é o objetivo do HTML, portanto, semanticamente, o ideal seria utilizar o article.

A tag ul representa "listas não-ordenadas" (unordered list), enquanto a tag article foi inserida no html5 especificamente para sanar a discussão ul versus div.

Vale considerar que é necessário sempre pesar a "pureza" do código contra a velocidade de implementação. O "correto" nem sempre entrega o projeto nem paga as contas, e esse dilema não tem solução definitiva, mas do ponto de vista de obedecer aos padrões, o article é o caminho. :D

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .