Why write <article> element for every item on the list?

HTML-CSS
1

Hey, I have a short question about the article element.

Why do I have to make an <article for every individual item when they all have the same article?

I was following along with the Cafe forum and came across this code:

<article class="item">
        <p class="dessert">Donut</p><p class="price">1.50</p>
</article>
<article class="item">
        <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
</article>
<article class="item">
        <p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
<article class="item">
        <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
</article>

Why should I not write it like this?

<article class="item">
        <p class="dessert">Donut</p><p class="price">1.50</p>
        <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
        <p class="dessert">Cheesecake</p><p class="price">3.00</p>
        <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
</article>
2

Hi @Mixer !

The first one is telling your browser “There are 4 articles with 2 paragraphs inside each of them”.
The second one is “There is 1 article with 8 paragraphs inside it”.

If you want to experiment a bit, you can visualize it by adding a CSS like below for example. This will make the border of your articles visible.

article {
  border: 1px solid black;
}

Edit: Both are correct HTML, but they have different meanings.

1 Like
3

Ah makes perfect sense! Thank you very much for the example with the border as well. It all clicked after I tried that out in the CSS tab.

Really appreciate the in depth explanation!

1 Like
4

I think this is a very good question. Keep up the great work!

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.