Standardista

CSS3, JavaScript and HTML5 explained

HTML5: <section> v. <article>

Posted By on March 14, 2010

I have been asked several times “when do you use <article> and when do you use <section> in HTML5?” I use an analogy that I figured I would share, as it seems to help developers make sense of the two elements.

Think of a newspaper. The paper comes in sections. You have the sports section, real estate section, maybe home & garden section, etc. Each of those sections, in turn, has articles in it. And, some of those articles are divided into sections themselves.

In other words, you can have parent <section>s with nested <article>s that in turn have one or many <section>s. Not all pages documents need these, but it is perfectly acceptable and correct to nest this way.

I hope that helps explain it.

-Estelle


About The Author

My name is Estelle Weyl. I am a consulting web developer, am writing some books with O'Reilly, run frontend workshop,s and speak about web development, performance, and other fun stuff all over the world. If you have any recommendations on topics for me to hit, please let me know via comments. If you want

Comments

11 Responses to “HTML5: <section> v. <article>”

  1. chris bovard says:

    Hello and thanks for the information on HTML5.
    Trying to wrap my head around HTML5 I have come across this about sections and articles:
    “The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.”
    http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

    also on HTML 5 Doctor:

    http://html5doctor.com/the-section-element/

    regards,
    chris bovard

  2. Márcio says:

    Yes Chris. The example on the article, however, still applies. :)
    If you can have a header and a footer, related to something, then, you probably have a section.
    In the example above, on Sport Section, you can have a header telling: “Our Sport Articles” and a footer “do some sport!”, hence, you probably have a section.

    The main thing about web is that, it is becaming semantical. And that’s a good thing so I hope, if and only if, we do not start making judgements about how some semantical elements should be organized. So, again, the example is a good example, you can have article and section, and section and article. Article and Article shoudn’t be a good choice, since that, to slip an article you have, guess what? section. :)

    Regards,
    Márcio

  3. chris bovard says:

    Marcio,
    What is was stating is this line above: “s with nested s ” is wrong.

    Sections are contained within another element. They are not the container of the article element.

    Go to these links and read more closely (as this spec is changing):
    http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

    “Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.”
    This is stated on the above link I posted which will be the final spec one day.

    sincerely,
    chris bovard

  4. chris bovard says:

    sorry the filter too it out:
    “sections with nested articles” does not follow the spec.

    chris

  5. Estelle Weyl says:

    Chris, I have to disagree with you. A section should be used to envelope a series of articles. the “section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”

    Is the sports section of the newspaper not a “section”. The sports section may has many articles, and the headlines of each article would indeed be part of said outline. My blog has several sections. those sections all have articles that were written at different times. SInce they’re articles, a pub date is appropriate. Within some of my articles, i have sections. For example, http://www.standardista.com/css3/css3-background-properties is an article. It’s within the CSS3 section of my blog. Within that article, there are several sections. And, those section have various headers that should be part of their own outline, as well as the outline of the document as a whole, and the article as a whole is part of the CSS3 section, which is all part of the blog (neither a section nor an article).

    And, now that i’ve used that as an example, i should probably go into that article and divide it up into sections. right now it’s just not divided, but semantically, it would make sense to do so.

    In fact, if you look at http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element you’ll see the nesting.

  6. chris bovard says:

    Hello,
    Here is the example from this page: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element

    This example shows a blog post using the article element:

    <article>
    <header>
    <h1>The Very First Rule of Life</h1>
    <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
    </header>
    <p>If there’s a microphone anywhere near you, assume it’s hot and
    sending whatever you’re saying to the world. Seriously.</p>
    <p>…</p>
    <footer>
    <a href="?comments=1">Show comments…</a>
    </footer>
    </article>

    Here is that same blog post, but showing some of the comments:

    <article>
    <header>
    <h1>The Very First Rule of Life</h1>
    <p><time pubdate datetime="2009-10-09T14:28-08:00"></time></p>
    </header>
    <p>If there’s a microphone anywhere near you, assume it’s hot and
    sending whatever you’re saying to the world. Seriously.</p>
    <p>…</p>
    <section>
    <h1>Comments</h1>
    <article>
    <footer>
    <p>Posted by: George Washington</p>
    <p><time pubdate datetime="2009-10-10T19:10-08:00"></time></p>
    </footer>
    <p>Yeah! Especially when talking about your lobbyist friends!</p>
    </article>
    <article>
    <footer>
    <p>Posted by: George Hammond</p>
    <p><time pubdate datetime="2009-10-10T19:15-08:00"></time></p>
    </footer>
    <p>Hey, you have the same first name as me.</p>
    </article>
    </section>
    </article>

    The parent element of this is not a section.
    That was my point.
    Me definition of this blog post is that the section can be the parent item.
    My debate is that it is not, based on the links above from the spec.

    In my mind I think it should be called section that is the wrapper.
    What I will end up doing is testing both ways.

    Sincerely,
    chris

  7. chris bovard says:

    Sorry filtered out the html again.
    Whatever works but I will follow the spec.

    chris

  8. [...] lies in the difference between the usage of a section and an article; I chose to go the route that Standardista recommended. In the case of a blog, each post should probably be its own <article>, and they could be [...]

  9. Jonathan says:

    Hey Estelle,

    reading the w3c-spec i got a understanding of sections and articles, which is quiet a little different.

    I would use an article, everytime the content of it could be seperated from it’s containing environment, without loosing information

    On the other hand i would use a section, if i have to divide a split a big document into parts, which cannot be distributed, without the larger context.

    Kind regards

    Jona

  10. [...] Estelle Wey creates a good analogy when she talks about a newspaper being split into sections: news, sports and real-estate (well she is American). Each of these has a generic heading and contains information that is related to this heading. Chances are each of these sections will contain articles, which leads us nicely onto… [...]

  11. [...] Weyl: section/article analogy (lots of other goodies, [...]