2

I just confused how to use <article> and <section> tags in HTML5.

I referenced lot in Google and also in Stack Overflow website.

On that, I found HTML5 pages with <section> elements containing <article> elements, and <article> elements containing <sections> elements.

I also found pages with <section> elements containing <section> elements, and <article> elements containing <article> elements.

What is the exact use of these tags?

unor
  • 92,415
  • 26
  • 211
  • 360
deepika
  • 65
  • 1
  • 11
  • mention your reference here... provide url – BomberMan Nov 12 '14 at 09:30
  • 1
    [The
    element](http://html5doctor.com/the-section-element/) and [The
    element](http://html5doctor.com/the-article-element/)
     – ʰᵈˑ Nov 12 '14 at 09:30
  • 1
    (Duplicate) Read this... [Link 1](http://stackoverflow.com/questions/19662721/confusion-between-article-or-section-tags-which-to-use) and [Link 2](http://stackoverflow.com/questions/7549561/section-vs-article-html-5) – bud-e Nov 12 '14 at 09:34
  • 1
    I know, what is
    and what is
    .. but i am asking which is contain which is.?
     – deepika Nov 12 '14 at 09:40
  • 3
    @deepika There is no rule (to my knowledge) which states that one must be contained by the other. Their usage is intended to give semantic value to your content based on its unique qualities. – Justin Ryan Nov 12 '14 at 09:51

1 Answers1

11

It depends on your content.

For example, a list of recent blog posts could be a section containing several article (example 1), a complex blog post could be an article with several section (example 2), a blog post with comments could be an article with a section and several article (example 3).

How to decide when to use which? Easy:

  1. If you need a sectioning content element, start with section.
  2. Check if the content matches the definition of nav. If yes, go with nav, else:
  3. Check if the content matches the definition of aside. If yes, go with aside, else:
  4. Check if the content matches the definition of article. If yes, go with article, else:
  5. Stay with section.

Example 1: A list of blog posts

<section>
  <h2>Recent blog posts</h2>

  <article>
    <h3>Blog post 1</h3>
  </article>

  <article>
    <h3>Blog post 2</h3>
  </article>

</section>

Example 2: A complex blog post

<article>
  <h2>Blog post 1</h2>

  <section>
    <h3>So, this is what happened</h3>
  </section>

  <section>
    <h3>What the others said</h3>
  </section>

</article>

Example 3: A blog post with comments

<article>
  <h2>Blog post 2</h2>

  <section>
    <h3>Comments</h3>

    <article>
      <p>First!</p>
    </article> 

    <article>
      <p>First! <ins>Edit: Second :(</ins></p>
    </article>        

  </section>

</article>
unor
  • 92,415
  • 26
  • 211
  • 360
  • disagree, mostly because you left out that articles are for syndicated content. so not sure where you got the rest of this info – albert Nov 12 '14 at 20:18
  • @albert: Neither does my answer rule out syndicated content, nor does the HTML5 spec limit the use of `article` to syndicated content. -- What exactly are you disagreeing with? – unor Nov 12 '14 at 22:31
  • its just such a crucial point...its odd its left out https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article – albert Nov 12 '14 at 23:08
  • @albert: Sorry, I don’t understand what you mean. I gave three examples showing how `article` and `section` could be nested in different ways (which is [what the OP wants to know](http://stackoverflow.com/questions/26883406/how-to-use-section-and-article-tags-in-html5/26887006?noredirect=1#comment42322717_26883406)), and linked to the specification of the `article` element which exactly explains how it can be used. I fail to see how and why syndicated content should matter in this context. It’s one of *many* possible use cases for `article`, but not necessary for understanding the nesting. – unor Nov 12 '14 at 23:14
  • small question on top of your answer: I've noticed you used

    alot. what did you use for

    ? and can there only be one

    in a page?. Thank you.

     – Kosem Nov 10 '18 at 21:11
  • @Kosem: The heading for `body` (i.e., the heading for the whole page) is on level 1 (you could have multiple). If you add a sectioning content element (like `section`), it’s on level 2. If you nest another sectioning content element inside the first one, it’s on level 3. You could use the `h1` element all the time, and the outline algorithm calculates the correct level, but this algorithm is not widely implemented, and old user agents don’t support it anyway, so it’s typically a good idea to use the heading element with the correct level. (I edited my answer to fix this in the first snippet.) – unor Nov 11 '18 at 01:42
  • @Kosem: For a typical website, I use the site name as page-level heading (as the only `h1`), and that page’s main content in an `article`/`section` with a `h2`. -- Many people want to use `h1` for the main content heading, but this doesn’t allow to have only one top-level entry in the document outline, because it wouldn’t make sense to have the `nav` etc. in scope of the main content. -- Whether or not it’s a bad thing to have multiple top-level entries in the document outline might depend on preference, though. – unor Nov 11 '18 at 01:46
  • @Kosem H1 is simple. On a page, semantic-wise - you use it only once - or you don't use it at all. Imagine a news website. On the main page you use only multiple H2 or H3 etc. When you read a specific news article - than you use H1. – Roko C. Buljan Jul 04 '19 at 20:54