HTML5 section tag meanings?

Question

I know there are tons of questions about this topic but I can't find an authoritative source for the answer.

This is the official definition and the wiki page, and there there is more documentation, but there they don't explain the correct usage if not in a very simple examples or in different ways.

What I've "understood" so far:

<section> defines a part(section) of the page, like blogrolls, headlines news, blog entries list, comments list, and everything which can be with a common topic.

<article> defines a content which has sense estranged from the rest of the page (?) and which has a single topic (blog entry, comment, article, etc).

But, inside an <article>, we can split parts of it in sections using <section>, and in this case it has the function of container to mark chapters of a bigger text.

The doubt

If these sentences are correct (or partially correct) that means that <section> has two completly different usage cases.

We could have a page written in this way:

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset=utf-8>
        <title>Fruits</title>
    </head>

    <body>

        <h1>Fruits war blog</h1>

        <section id="headlineNews"> <!-- USED AS CONTAINER -->

            <h1>What's new about fruits?</h1>   
            <article><h1>Apples are the best</h1>Apples are better than bananas</article>
            <article><h1>Apple's cakes</h1>With apples you can prepare a cake</article>

        </section>

        <section id="blogEntries"> <!-- USED AS CONTAINER -->

            <h1>Articles about fruits</h1>

            <article>
                <h1>Apples vs Bananas</h1>
                <section>  <!-- USED AS CHAPTER -->
                    <h2>Introduction:</h2>
                    Bananas have always leaded the world but...
                </section>
                <section>  <!-- USED AS CHAPTER -->
                    <h2>The question:</h2>
                    Who is the best? We don't know so much about apples...
                </section>
            </article>

        </section>

    </body>
</html>

And this is how looks the Outline:

1. Fruits war blog
   1. What's new about fruits?
      1. Apples are the best
      2. Apple's cakes
   2. Articles about fruits
      1. Apples vs Bananas
         1. Introduction:
         2. The question:

So the <section> is thought with two completly different and not related semantic meanings?

Is it correct use:

<!-- MY DOUBT -->
<section> <!-- USED AS CONTAINER -->
  <article>
    <section></section> <!-- USED AS CHAPTER -->
  </article>
</section>

in this neasted way?
I've found that is possible to use in the inversed way:

<!-- FROM W3C -->
<article> <!-- BLOG ENTRY -->
  <section> <!-- USED AS CHAPTER ABOUT COMMENTS -->
    <article></article> <!-- COMMENT -->
  </section>
</article>

But I can't find an answer to the way I've written below.

I guess read the discussion where the W3C group has wrote the basis of the <section> tag could be useful but I can't find it.

N.B. I'm looking for replies documented with authorative sources

score 4 · Accepted Answer · edited May 23 '17 at 10:29

http://www.w3.org/wiki/HTML/Elements/section is not the official definition of section. section is defined in the HTML5 specification, which currently is a Candidate Recommendation (which is a snapshot of the Editor’s Draft).

In the CR, section is defined as:

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.

section is a sectioning content element (together with article, aside and nav). Those sectioning elements and the headings (h1-h6) create an outline.

The following three examples are semantically equivalent (same meaning, same outline):

<!-- example 1: using headings only -->
<h1>My first day</h1>
<p>…</p>
<h2>Waking up</h2>
<p>…</p>
<h2>The big moment!</h2>
<p>…</p>
<h2>Going to bed</h2>
<p>…</p>

<!-- example 1: using section elements with corresponding heading levels -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h2>Waking up</h2>
    <p>…</p>
  </section>
  <section>
    <h2>The big moment!</h2>
    <p>…</p>
  </section>
  <section>
    <h2>Going to bed</h2>
    <p>…</p>
  </section>
</section>

<!-- example 1: using section elements with h1 everywhere -->
<section>
  <h1>My first day</h1>
  <p>…</p>
  <section>
    <h1>Waking up</h1>
    <p>…</p>
  </section>
  <section>
    <h1>The big moment!</h1>
    <p>…</p>
  </section>
  <section>
    <h1>Going to bed</h1>
    <p>…</p>
  </section>
</section>

So you can use section whenever (*) you use h1-h6. And you use section when you need a separate entry in the outline but can’t (or don’t want to) use a heading.

Also note that header and footer always belong to its nearest ancestor sectioning content (or sectioning root, like body, if there is no sectioning element) element. In other words: each section/article/aside/nav element can have its own header/footer.

article, aside and nav are, so to say, more specific variants of the section element.

two completly different usage cases

These two use-cases are not that different at all. In the "container" case, you could say that section represents a chapter of the document, while in the "chapter" case section represents a chapter of the article/content (which, ouf course, is part of the document).

In the same way, some headings are used to title web page parts (like "Navigation", "User menu", "Comments", etc.), and some headings are used to title content ("My first day", "My favorite books", etc.).

"more specific", do you mean that `article` is a more specific **equivalent** of `section`? — Fez Vrasta, Sep 11 '13 at 13:20
@FezVrasta: Yes (ty, changed wording in my answer). In principle, you *could* start with `section` everywhere where an outline entry is appropriate (!), and then start to replace these `section` elements with `article`|`aside`|`nav`, *if* their correponding definition matches your content. — unor, Sep 11 '13 at 13:24
about your last edit: seems now we are surfing in the area of the old good DOM, thought as document (just like a Writer document) and now used to fit complex layout websites which are all but documents. Oh, the web! — Fez Vrasta, Sep 11 '13 at 13:42

Mariyan · Answer 2 · 2013-09-11T13:31:27.760

OK so here is what I've gathered from authorative sources.

MDN:

The HTML Section Element () represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.

Usage notes :

If it makes sense to separately syndicate the content of a element, use an element instead. Do not use the element as a generic container; this is what is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.

Shay Howe's guide:

A section is more likely to get confused with a div than an article. As a block level element, section is defined to represent a generic document or application section.

The best way to determine when to use a section versus a div is to look at the actual content at hand. If the block of content could exist as a record within a database and isn’t explicitly needed as a CSS styling hook then the section element is most applicable. Sections should be used to break a page up, providing a natural hierarchy, and most commonly will have a proper heading.

dev.opera.com

Basically, the article element is for standalone pieces of content that would make sense outside the context of the current page, and could be syndicated nicely. Such pieces of content include blog posts, a video and it's transcript, a news story, or a single part of a serial story.

The section element, on the other hand is for breaking the content of a page into different functions or subjects areas, or breaking an article or story up into different sections.

I've updated the page example and checked with HTML5 Outliner and it looks ok, so maybe it's correct to use them in this way — Fez Vrasta, Sep 11 '13 at 12:54
W3C uses `article` also for *comments*, but them don't make sense outside the context I think. — Fez Vrasta, Sep 11 '13 at 13:33
I agree with you on this one. Maybe if the comments are actually central piece of information, rather than below an actual news article. — Mariyan, Sep 11 '13 at 14:34

cHao · Answer 3 · 2013-09-11T13:15:08.390

<article> and <section> are both sectioning content. You can nest one sectioning element inside another to slice up the outer element into sections.

HTML Living Standard, 4.4.11:

... Sectioning content elements are always considered subsections of their nearest ancestor sectioning root or their nearest ancestor element of sectioning content, whichever is nearest, regardless of what implied sections other headings may have created. ...

You can consider a <section> as a generic sectioning element. It's like a <div> that defines a section within its closest sectioning parent (or the nearest sectioning root, which may be the <body>).

An <article> is also a section, but it does have some semantics. Namely, it represents content that is self-contained (that is, it could possibly be its own page and it'd still make sense).

It makes sense but, sources? – Fez Vrasta Sep 11 '13 at 13:00 — Fez Vrasta, Sep 11 '13 at 13:00
(Edited to include standard quote.) – cHao Sep 11 '13 at 13:17 — cHao, Sep 11 '13 at 13:17

score 1 · Answer 4 · answered Sep 11 '13 at 12:30

1

Here's the official w3c take on section:

http://www.w3.org/wiki/HTML/Elements/section

Quote: "The [section] element represents a generic section of a document or application."

I guess, in theory if you have an article within an article then your nested selections example might work. But, why would you have an article within an article ? Makes little semantic sense.

answered Sep 11 '13 at 12:30

Pat Dobson

3,249
2
19
32

The article within article is an example by W3C, mine is the one with a section contained in an article which is contained in another section. – Fez Vrasta Sep 11 '13 at 12:31

HTML5 section tag meanings?

The doubt

4 Answers4

Linked