Section Vs Article HTML5

Section vs Article HTML5

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:

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>

What is the difference between <article> and <section> in html5

The <section> tag:

The section tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

The <article> tag:

The article tag specifies independent, self-contained content.

An article should make sense on its own and it should be possible to
distribute it independently from the rest of the site.

Potential sources for the article element:

• Forum post
• Blog post
• News story
• Comment

Basically these tags are semantic elements and the only real difference between them are readability and design preference.

You can read more about them here if you wish:

• http://www.w3schools.com/html/html5_semantic_elements.asp
• http://www.w3schools.com/tags/tag_article.asp
• http://www.w3schools.com/tags/tag_section.asp

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

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?

How to use <section> and <article> tags in HTML5?

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>

Should <sections> have <articles> or should <articles> have <sections>?

It's entirely acceptable to nest them either way. Although the document outline does not distinguish between a <section> and an <article>, from a semantic point of view they are two different things. That's the whole point of introducing them as two distinct semantic elements.

Use the first snippet if your page consists of multiple articles.

Use the second snippet when you have an article that's comprehensive enough to contain multiple sections.

You can even combine them both if using both fits your content, such that your markup looks like this:

<section><h1>section article?</h1>
  <article><h1>art 1</h1>
    <section><h1>sec 1.1</h1></section>
    <section><h1>sec 1.2</h1></section>
    <section><h1>sec 1.3</h1></section>
  </article>
  <article><h1>art 2</h1>
    <section><h1>sec 2.1</h1></section>
    <section><h1>sec 2.2</h1></section>
    <section><h1>sec 2.3</h1></section>
  </article>
  <article><h1>art 3</h1>
    <section><h1>sec 3.1</h1></section>
    <section><h1>sec 3.2</h1></section>
    <section><h1>sec 3.3</h1></section>
  </article>
</section>

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

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.

The right way to use <section> and <article> for SEO

Read more about the HTML element article of Mozilla:

The HTML element represents a self-contained composition in
a document, page, application, or site, which is intended to be
independently distributable or reusable (e.g., in syndication)... each
post would be contained in an element, possibly with one or
more s within.

Unlike the article element, the section element:

The HTML element represents a generic standalone section of
a document, which doesn't have a more specific semantic element to
represent it.

Thus, the article element can contain section elements. But the section element cannot contain any other semantic elements.

Accordingly, your example can be presented like this:

<header>
 <h1>The article News from Valinor of Gandalf</h1>
</header>
<article>
  <h2>News from Valinor</h2>
  <p>A short introduction to the content of the article.</p>
  <section>
    <h3>The name of section</h3>
    <p>The content of section.</p>
  </section>
  <section>
    <h3>The name of section</h3>
    <p>The content of section.</p>
  </section>
  ...
</article>
<footer>
 <h2>Publisher and copyright holder</h2>
 <p>Publisher and © 2021 Gandalf</p>
</footer>

---

Related Topics