276

I have a page made up of various "sections" like videos, a newsfeed etc.. I am a bit confused how to represent these with HTML5. Currently I have them as HTML5 <section>s, but on further inspection it looks they the more correct tag would be <article>. Could anyone shed some light on this for me?

None of these things are blog posts or "documents" in the true sense of the word so it's kind of hard to see which element to apply.

EDIT: I have opted to use the article tag since it seems to be a container tag for unrelated elements which I guess my "sections" are. The actual tagname article however seems to be rather misleading and although they are saying HTML5 has been developed with greater consideration for web applications, I find a lot of the tags to be more blog-centric / document based.

Anyway thanks for your answers it appears to be fairly subjective.

starball
  • 20,030
  • 7
  • 43
  • 238
James Hay
  • 7,115
  • 6
  • 33
  • 57

9 Answers9

233

In the W3 wiki page about structuring HTML5, it says:

<section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.

And then displays an image that I cleaned up:

enter image description here

It also describes how to use the <article> tag (from same W3 link above):

<article> is related to <section>, but is distinctly different. Whereas <section> is for grouping distinct sections of content or functionality, <article> is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. Think of it this way - if you have a number of items of content, each of which would be suitable for reading on their own, and would make sense to syndicate as separate items in an RSS feed, then <article> is suitable for marking them up.

In our example, <section id="main"> contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore <article> is perfect for them:

<section id="main">
    <article>
      <!-- first blog post -->
    </article>

    <article>
      <!-- second blog post  -->
    </article>

    <article>
      <!-- third blog post -->
    </article>
</section>

Simple huh? Be aware though that you can also nest sections inside articles, where it makes sense to do so. For example, if each one of these blog posts has a consistent structure of distinct sections, then you could put sections inside your articles as well. It could look something like this:

<article>
  <section id="introduction">
  </section>

  <section id="content">
  </section>

  <section id="summary">
  </section>
</article>
Justin
  • 26,443
  • 16
  • 111
  • 128
  • 28
    Additionally:
    can be used to wrap the elements between the header and footer (blue blocks from the image).
    wraps images within the articles or sections.
     – logic-unit Oct 22 '14 at 09:29
  • 2
    Great job. This should be the accepted answer. I agree with logic-unit that you should add `main`. – Chuck Le Butt Jul 21 '15 at 14:00
  • 1
    You should update the pic with the section in articles. – basickarl Mar 28 '17 at 12:05
  • I feel like this war between article and section will go one now because of the confusion. But Justin Im 100% on board your use of section over article as section applies to parts of documents (as you have shown) where article is stand-alone, independent content INSIDE the document (and thus its sections). Semantically the term "section" just makes more sense as a replacement for the old div sections anyway. Good job! – Stokely Aug 10 '17 at 17:50
  • 1
    You can also use
    and
    inside the
    if you need something more specific than
    – Ric May 14 '19 at 16:00
  • It's worth noting that each `article` and `section` [should be identified by heading (h1-h6)](https://www.w3.org/wiki/HTML/Usage/Headings/Missing). – Sharak May 07 '20 at 19:16
  • Thank you for this answer! HTML5 also has a `
    ` tag. Should the `
    ` tag wrap the whole page (`header`, `nav`, all `section`s, `aside`s and `footer`, i.e. all the green and blue blocks) or should it only wrap the `section`s and maybe the `aside`s tag (only the blue blocks)? Thank you!
     – tonix Jun 06 '20 at 11:41
  • I do wonder. Assuming one can't position a search bar inside the
    , only inside the
    . Can that search bar be inside a
    tag?. I know that
    tag requires headers, and so, not sure if to position it inside a simple
    with no meaning or inside a
    . Also, didn't quite see any topic regarding which tag is best for positioning a search bar. Most say
    , but if that is not an option - No one talks about alternative
     – Kosem Jan 06 '23 at 13:10
138

Sounds like you should wrap each of the "sections" (as you call them) in <article> tags and entries in the article in <section> tags.

The HTML5 spec says (Section):

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. [...]

Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.

Note: 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.

And for Article

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

I think what you call "sections" in the OP fit the definition of article as I can see them being independently distributable or reusable.

Update: Some minor text changes for article in the latest editors draft for HTML 5.1 (changes in italic):

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Also, discussion on the Public HTML mailing list about article in January and February of 2013.

steveax
  • 17,527
  • 6
  • 44
  • 59
  • 17
    while searching on the web, i came across a legal document that read `Article 1, Section 2, Clause 3`. I hope that will help me remember the logic. – commonpike Jan 29 '13 at 16:48
  • 3
    I disagree to an extent, but I also believe they could be switched depending on the context. Reading the spec descriptions suggests to me that it should be the other way around if an `article` acts as a "widget". `section`: "thematic grouping" and "section of a document". `article`: "self-contained" and "widget". Consider a homepage example like http://codepen.io/anon/pen/iDEwf – daleyjem Jan 30 '14 at 19:12
  • 2
    Why do they say that a *single* forum post makes an article? A forum post is not complete without the rest of the thread imho. – masterxilo Jun 19 '14 at 12:55
  • I agree with @masterxilo's line of thinking. We need to ask, when does it "make sense to syndicate the contents of the element"? I've come across this rubric many times and I've concluded that it begs the question (of "when to use article"). – harpo Sep 18 '14 at 15:39
  • 8
    This is backwards. W3C clearly state that `section` is a thematic grouping of content, and `article` is a stand-alone element (ie. which could be grouped into a theme). Think of it like a newspaper: You will find many articles in each section. Film review articles in the Entertainment section, for example. – Chuck Le Butt Jul 21 '15 at 13:59
  • 4
    Agreeing with @Chuck here. In my book this answer has it completely backwards. [Justin's answer](http://stackoverflow.com/a/24764861/151509) is way more fitting. But oh well, guess the spec leaves a lot of room for interpretation. Not sure though if this a bad or good thing. – maryisdead Sep 02 '15 at 12:41
  • @maryisdead, I think the main takeaway is that content in an article element should stand on its own. I think that part is clear from the spec. I may have misinterpreted the OP's description of the content but hopefully the pointers to the spec that are linked are helpful to others trying to decide how to markup their content. – steveax Sep 02 '15 at 14:27
  • @steveax From what I get, OP meant having a list of videos, a list of news article etc. If OP was talking about applying `
    ` or `
    ` to single items of those, you are, of course, correct.
     – maryisdead Sep 02 '15 at 15:36
  • all this answer does is regurgitate the documentation – phillipsK Feb 23 '16 at 18:12
48

I'd use <article> for a text block that is totally unrelated to the other blocks on the page. <section>, on the other hand, would be a divider to separate a document which have are related to each other.

Now, i'm not sure what you have in your videos, newsfeed etc, but here's an example (there's no REAL right or wrong, just a guideline of how I use these tags):

<article>
    <h1>People</h1>
    <p>text about people</p>
    <section>
        <h1>fat people</h1>
        <p>text about fat people</p>
    </section>
    <section>
        <h1>skinny people</p>
        <p>text about skinny people</p>
    </section>
</article>
<article>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</article>

As you can see, the sections are still relevant to each other, but as long as they're inside a block that groups them. Sections DONT have to be inside articles. They can be in the body of a document, but i use sections in the body, when the whole document is one article.

e.g.

<body>
    <h1>Cars</h1>
    <p>text about cars</p>
    <section>
        <h1>Fast Cars</h1>
        <p>text about fast cars</p>
    </section>
</body>

Hope this makes sense.

mnsr
  • 12,337
  • 4
  • 53
  • 79
  • 6
    `I'd use
    for a text block that is totally unrelated to the other blocks on the page.` I know you wrote this back in 2011, but, isn't this what the `
     – MyDaftQuestions May 05 '15 at 09:07
  • @MyDaftQuestions No. `> The – Alex78191 Jul 12 '22 at 08:39
33

The flowchart below can be of help when choosing one of the various semantic HTML5 elements: enter image description here

Captain Sensible
  • 4,946
  • 4
  • 36
  • 46
23

I like to stick with the standard meaning of the words used: An article would apply to, well, articles. I would define blog posts, documents, and news articles as articles. Sections on the other hand, would refer to layout/ux items: sidebar, header, footer would be sections. However this is all my own personal interpretation -- as you pointed out, the specification for these elements are not well defined.

Supporting this, the w3c defines an article element as a section of content that can independently stand on its own. A blog post could stand on it's own as a valuable and consumable item of content. However, a header would not.

Here is an interesting article about one mans madness in trying to differenciate between the two new elements. The basic point of the article, that I also feel is correct, is to try and use what ever element you feel best actually represents what it contains.

What’s more problematic is that article and section are so very similar. All that separates them is the word “self-contained”. Deciding which element to use would be easy if there were some hard and fast rules. Instead, it’s a matter of interpretation. You can have multiple articles within a section, you can have multiple sections within and article, you can nest sections within sections and articles within sections. It’s up to you to decide which element is the most semantically appropriate in any given situation.

Here is a very good answer to the same question here on SO

Community
  • 1
  • 1
Michael Jasper
  • 7,962
  • 4
  • 40
  • 60
8

Section

  • Use this for defining a section of your layout. It could be mid,left,right ,etc..
  • This has a meaning of connection with some other element, put simply, it's DEPENDENT.

Article

  • Use this where you have independent content which make sense on its own .

  • Article has its own complete meaning.

Dafin
  • 5
  • 4
Anand Singh
  • 2,343
  • 1
  • 22
  • 34
4

A section is basically a wrapper for h1 (or other h tags) and the content that corresponds to this. An article is essentially a document within your document that is repeated or paginated...like each blog post on your document can be an article, or each comment on your document can be an article.

Nick Manning
  • 2,828
  • 1
  • 29
  • 50
2

My interpretation is: I think of YouTube it has a comment-section, and inside the comment-section there are multiple articles (in this case comments).

So a section is like a div-container that holds articles.

userX
  • 370
  • 3
  • 11
2

also, for syndicated content "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."

albert
  • 8,112
  • 3
  • 47
  • 63