<section> or <article>, which is contained in which

StackOverflow https://stackoverflow.com/questions/1789692

  •  22-09-2019
  •  | 
  •  

Question

Trying to get my head around the new semantic elements in HTML5.

Does a <section> belong inside an <article> or is it the other way around? Does it even matter?

I'm looking at re-structuring a wordpress blog.

Was it helpful?

Solution

From the HTML5 spec:

The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header and possibly a footer.

and

The article element represents an independent section of a document, page, or site. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, or any other independent item of content.

So I would say both section and article elements can contain the other element, if appropriate. I think your diagram makes sense, apart from the nested section elements:

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. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.

Maybe use a <div> for the outer one?

OTHER TIPS

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's also important to know how to use the <article> tag (from the 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>

I would use div for the outer one, and div for the inner one, unless you have a heading directly inside the inner section.

Ta

Rich

See http://html5doctor.com/the-section-element/ for more info.

IMOO, it should be simple, as simple as what normal people will take it for granted. If a simple tag name confuses people, it is a fail. For me:

  • An <article> is an article. People share articles. When you say something is an article, I'll expect it should have a title, and maybe a little summary as well, so I can decide to read it or not. If it is interesting, I will share it to my friends. It's self-contained.

  • A <section> is a section. It is a part of related things. Basically, you will need other sections to get the whole picture.

Why you put a <section> inside the <body>? Oh because it's part of the body; part of my website. I'm going to put my articles inside this part.

Why you put a <section> inside a <section>? Because it's part of that section.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top