Article vs Section

Hello,

In the code below. How come each “section” should be attributed an article and not section?

Based on below description:

“The section element is also new with HTML5, and has a slightly different semantic meaning than article . An article is for standalone content, and a section is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the article , then each chapter is a section . When there’s no relationship between groups of content, then use a div .”

  **Your code so far**

<h1>Deep Thoughts with Master Camper Cat</h1>
<main>
<article>
  <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
  <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
</article>

<img src="samuraiSwords.jpeg" alt="">

<article>
  <h2>Defeating your Foe: the Red Dot is Ours!</h2>
  <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
</article>

<img src="samuraiSwords.jpeg" alt="">

<article>
  <h2>Is Chuck Norris a Cat Person?</h2>
  <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
</article>
</main>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36

Challenge: Wrap Content in the article Element

Link to the challenge:

Ya, it’s not always black and white as to which one you should use. Some screen readers make a slight distinction between the two while others basically treat them the same. Usually it’s not that big of a deal if you use one when you really should have used the other. The one exception is that if you use a <section> and assign it an accessible name (using either aria-label or aria-labelledby) then it will be treated as a landmark (with role="region"). Landmarks really only come into play if you are using a screen reader (although it would be cool if browsers would expose them to all keyboard users as it would make jumping around the page much easier).

In this challenge I think the use of <article> is fine since each of these is sort of an independent little thought. But I’m sure you could make a convincing argument for <section> as well. But unless you are purposely using a <section> to create a landmark for screen reader users then the <section> element is pretty much just a fancy name for a <div>.

Bottom line, don’t fret over it too much.

i did a mock restaurant site recently. I used sections to divide the different segments of the menu, like salads, first meal, desserts etc. Then in each section, i used articles for every item, i found it to be a fitting semantic use. The use can be quite ambigous and hard to put into labels

the article tag always seemed to be connected to publishing articles or blog posts. For the restaurant menu I would have used sections with divs inside for each item.

Articles

  • Forum post
  • Blog post
  • News story

At MDN their example uses it with a weather forecast.

article represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable.

Thank you all for the responses! very appreciated… It is a jungle in the beginning :slight_smile:

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