Search code examples
htmlsemanticssemantic-markup

When to use HTML section or article tag for a good semantic structure


I have the following structure and content on a specific page:

<header>
// Logo
// Site navigation
</header>
<main>
 <article>
  <section>
  // Hero image or video block
  </section>
  <section>
  // Here all kinds of paragraphs are rendered (e.g: Call to action, related video's block to this page, related actors block related to this page etc.
 // All those blocks has their own <section> tag  
  </section>
 </article>
</main>

So in above example inside <article> I have 2 <section> tags and then inside the second <section> I have more <section> tags nested. Is this correct approach?


Solution

  • Typically, the article tag would be used on blog pages, either for a collection of several blog articles on one page (i.e. containing several <article> tags), or for a single article page (i.e. containing one <article> tag). In any case, an article should stand on its own thematically, its understanding not depending on anything else outside the article tag.

    <section>s are similar, but are rather used to cover several aspects of the general subject treated on the particular page (also inside an article). There are cases where those two can be interchageable, but in general interpreting the word "article" literally can help IMO.