Proper Use of the <section> Tag

[gouri]

I currently have a page on a website that covers two topics. As an example, let us say that the topics are anaerobic and aerobic exercise. I am using a template and there is a block for the header, the h1, the body text (in my example, this includes all <p>, <h2>, and <ul> & <li> content) , and then the footer.

The page is structured in the following way:

<header>Text here</header>
<h1>Text here</h1>
<p>Few words to describe what body text is about</p>
<p>Several sentences about both topics</p>
<p>Several sentences about both topics</p>
<p>Several sentences about both topics</p>
<h2>Text about anaerobic exercise</h2>
<ul>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
</ul>
<h2>Text about aerobic exercise</h2>
<ul>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
</ul>
<p>Text including link to another page</p>
<footer>Text here</footer>

In the above, I think that it might be good to include <section> tags, and I am trying to determine where I should place those tags?

Example 1

<header>Text here</header>
<h1>Text here</h1>
<section>
<p>Few words to describe what body text is about</p>
<p>Several sentences about both topics</p>
<p>Several sentences about both topics</p>
<p>Several sentences about both topics</p>
</section>
<section>
<h2>Text about anaerobic exercise</h2>
<ul>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
</ul>
</section>
<section>
<h2>Text about aerobic exercise</h2>
<ul>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
</ul>
</section>
<section>
<p>Text including link to another page</p>
</section>
<footer>Text here</footer>

Example 2

<header>Text here</header>
<h1>Text here</h1>
<p>Few words to describe what body text is about</p>
<section>
<p>Several sentences about both topics</p>
<p>Several sentences about both topics</p>
<p>Several sentences about both topics</p>
</section>
<section>
<h2>Text about anaerobic exercise</h2>
<ul>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
</ul>
</section>
<section>
<h2>Text about aerobic exercise</h2>
<ul>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
</ul>
</section>
<p>Text including link to another page</p>
<footer>Text here</footer>

Example 3

<header>Text here</header>
<h1>Text here</h1>
<p>Few words to describe what body text is about</p>
<p>Several sentences about both topics</p>
<p>Several sentences about both topics</p>
<p>Several sentences about both topics</p>
<section>
<h2>Text about anaerobic exercise</h2>
<ul>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
</ul>
</section>
<section>
<h2>Text about aerobic exercise</h2>
<ul>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
</ul>
</section>
<p>Text including link to another page</p>
<footer>Text here</footer>

The above are a few possibilities that I thought of. I think it might also be possible to put the header in a <section> tag, the h1 tag in a <section> tag, and the footer in a <section> tag. Would you recommend doing any or all of these things?

Also, any other suggestions as to where the section tags should be placed are welcome. I just wrote out a couple of examples that I feel are possible and made a few more suggestions that I didn’t write out as examples but are possibilities, but I think that you guys may have more suggestions.

Do you think that adding the <sections> may help the search engines to interpret the contents of a page better and send more targeted traffic?

I appreciate your help.

[lucy24]

I'll throw in a comment just so that someone, somewhere will be forced to follow-up in order to disagree with me ;)

Search engines already recognize headings. h1, h2, h3 ... Don't know if they lend any particular weight all the way down to h6, but three layers is enough to start. If the page's subject areas correspond to a header hierarchy that already exists, what are you adding with <section>? Other than 21 bytes* of filesize, that is.

Now, I've got some pages where I have one or more <div class = "maintext">** purely for formatting. If I replace those with <section>-- no class needed-- I'd be saving a few bytes...


* Assuming \n alone rather than \r\n.
** The name is a legacy from ebooks (contents, intro, maintext, index, endnotes, advert and so on).

[swa66]

The trick is NOT to think about search engines: they'll figure it out eventually.

The trick is to adhere to standards (those are the ones search engine engineers read and know quite well) and to keep your documents in good health structure wise.

<section> in my mind is a way to keep paragraphs and headings together as opposed to throwing them all out there at the same level.
<article> is more or less it's sibling.

I think of them as both having a place:
- <article> I'd use if I'd have the main page of a blog and there you have your different entries with a heading, a summary, a picture, ...
- <section> I'd use it to create structure in a longer document e.g. a technical manual to make sure the headings and subheadings are properly grouped into a tree structure so that not only the h1,h2, h3 etc make a tree but that also the <section> elements show that structure.

I think it's important to understand there is NO one correct use of section, header, nav, footer, article ... If it's well structured and appropriate for the content, then it'll have to be ok.

Ref: [w3.org...]

[gouri]

lucy24,

Thank you for that response.

swa66,

Thanks for the explanation and the link. They have some good examples.

In what I have written, I am thinking that it might be good to use sections. Anaerobic and aerobic exercise are not the same, so I think that it might be better for each type to appear in its own section. Do you think coding with sections would be better?

I looked at the examples on the W3 page, but I have not used the <section> tag before, so I am not sure where I should place the tags. Can you look at my examples and tell me which one would be the better one to use? Also, do you think that I would need the <article> tag on this page?

I appreciate your help.

[swa66]

headings (h1-h6) goe inside the sections they are relevant to, so for me examples 1 and 2 are out.

example3 is something i'm in doubt about.
I'd probably try something like this:

  <section>
    <header>
      <h1>Text here</h1> 
      <p>anything else needed</p>
      <p>Few words to describe what body text is about</p> 
    </header> 
    <p>Several sentences about both topics</p> 
    <p>Several sentences about both topics</p> 
    <p>Several sentences about both topics</p> 
    <section>
      <h2>Text about anaerobic exercise</h2> 
      <ul> 
        <li>Several sentence bullet point.</li> 
        <li>Several sentence bullet point.</li> 
        <li>Several sentence bullet point.</li> 
      </ul> 
    </section>
    <section>
      <h2>Text about aerobic exercise</h2> 
      <ul> 
        <li>Several sentence bullet point.</li> 
        <li>Several sentence bullet point.</li> 
        <li>Several sentence bullet point.</li> 
      </ul> 
    </section>
    <footer>
       <p>Text including link to another page</p> 
       <p>anything else needed</p>
    </footer> 
  </section>

[gouri]

swa66,

Thanks for the explanation about the heading tags going inside a <section> tag and your example of how you would code this page. I think that this is a good way to use the <section> tag.

In both instances, after the <h2> tag and before the list begins, I have a couple of sentences about the particular topic. I don't think that this affects the placement of the section tag before the <h2>, but I just wanted to mention it in case it does? I apologize that I didn't mention it in my OP examples.

Also, on the website, there is a footer that appears on every page of the site that contains the title of the website, a link to the home page, and some other information. Would this footer go in a separate <footer> tag after the <footer> tag in your example?

In your example,did you mean to put a <section> tag before the <footer> tag and a <section> tag after the last <p>Several sentences about both topics</p>?

[swa66]

More elements in a section would of course not make much difference.

Would this footer go in a separate <footer> tag after the <footer> tag in your example?

To quote the standard:

Mostly the real answer is "it depends on author intent".

Another is to keep in mind what <footer> is supposed to be used for:

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

So it al depends on how you embed it all together, how much else is there on the page and how you think of it as being organized. Essentially the section/article/header/footer/... allow you to express how you see it being related.

[gouri]

I probably posted the following as you were writing your response.

Can you please tell me:

In your example,did you mean to put a <section> tag before the <footer> tag and a </section> tag after the last <p>Several sentences about both topics</p>?

[swa66]

How I wrote it above the footer goes with the outer section (as does the header). Since I don't know you actual content ... the footer might logically and content-wise belong with the 2nd <h2> section, in which case it should move in there. The footer might also belong to a more global scope than this outer section, in which case it should be moved outside of it. : it's all about that belongs with what: the header and footer go in the section they belong to.

[gouri]

How I wrote it above the footer goes with the outer section (as does the header).

I understand how you wrote it now. I think that is the right way.

the footer might logically and content-wise belong with the 2nd <h2> section, in which case it should move in there.

I agree with you. I am going to take a look at what is written and then try to determine if it should be with the 2nd <h2> section or the way that you have written it. At the moment, I am thinking the way that you have written it.

The footer might also belong to a more global scope than this outer section, in which case it should be moved outside of it.

I am thinking that maybe I could have the footer the way that you have it, as it is sort of page specific, and another one that is more global. I am thinking of coding it in the following way:

What you wrote

<footer>
<p>Text including link to another page</p>
<p>anything else needed</p>
</footer>
</section>


and then below it

<section>
<footer>
<ul>
<li>Some information here</li>
<li>Some more information here</li>
</ul>
<p>A sentence here</p>
</footer>
</section>

This second footer will appear in its own section because it is global. Does this seem like the right way to code all the information on the page?

[lucy24]

Looking at collected posts from swa66:

<section> elements can be nested (like <div>, unlike <p> elements)

a <footer> can belong either to the page-as-a-whole or to a section, hence the business about immediate ancestors (much like <address> in this respect)

Have I got that right?

[JD_Toims]

<section>
<header>
<h1>Text here</h1>
<p>anything else needed</p>
<p>Few words to describe what body text is about</p>
</header>
<p>Several sentences about both topics</p>
<p>Several sentences about both topics</p>
<p>Several sentences about both topics</p>
<section>
<h2>Text about anaerobic exercise</h2>
<ul>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
</ul>
</section>
<section>
<h2>Text about aerobic exercise</h2>
<ul>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
</ul>
</section>
<footer>
<p>Text including link to another page</p>
<p>anything else needed</p>
</footer>
</section>

Could create a situation similar to the below.

The <body> is a section and the <h1> cannot "rise above" the <section> it's contained in, so by placing an explicit section after the <body> and before the content, the <h1> applies to the <section> not the <body> -- Of course if there's no other content following <body> and preceding the main <section> and there's no other content following the close of the main </section> and before the closed </body> it will likely be interpreted in an essentially the same way as if the <section></section> wasn't present, because it just "creates an empty level".

If there is content in the places I noted, then it will likely, imo, be interpreted as below -- IOW: <section>ing immediately after the <body> is at best unnecessary and at less-than-best could have unintended consequences in the interpretation of page hierarchy.

Headings never rise above other sections. Thus, in the following example, the first h1 does not actually describe the page header; it describes the header for the second half of the page:

<!DOCTYPE HTML>
<title>Feathers on The Site of Encyclopedic Knowledge</title>
<section>
<h1>A plea from our caretakers</h1>
<p>Please, we beg of you, send help! We're stuck in the server room!</p>
</section>
<h1>Feathers</h1>
<p>Epidermal growths.</p>

The resulting outline would be:

-- (untitled page)
---- A plea from our caretakers
-- Feathers

The preceding interpretation of content inside the <body></body> and outside the <section></section> would be due to the 1st example given in the fragment I linked -- Notice which section the final <p> is attributed to:

For the following fragment:

<body>
<h1>Foo</h1>
<h2>Bar</h2>
<blockquote>
<h3>Bla</h3>
</blockquote>
<p>Baz</p>
<h2>Quux</h2>
<section>
<h3>Thud</h3>
</section>
<p>Grunt</p>
</body>

...the structure would be:

-- Foo (heading of explicit body section, containing the "Grunt" paragraph)
Bar (heading starting implied section, containing a block quote and the ---- "Baz" paragraph)
---- Quux (heading starting implied section with no content other than the heading itself)
---- Thud (heading of explicit section section)

Notice how the section ends the earlier implicit section so that a later paragraph ("Grunt") is back at the top level.

---

The best place to really dig into this stuff, imo, is with the documentation on the sections page, but within headings and sections explanations:

http://www.w3.org/TR/html5/sections.html#headings-and-sections
[Meaning *way* down the page linked above]

[swa66]

As indicated by JD, I agree it's best not to write

<section>
<footer>
<ul>
<li>Some information here</li>
<li>Some more information here</li>
</ul>
<p>A sentence here</p>
</footer>
</section>

I'd leave that section off of the global footer. A section just to contain the global footer makes little sense to me. I think it's better to let it have the global scope of the body.

But again I'm speaking and thinking about my typical pages/fragments of code. You need to make sense of it on a specific page and how *you* as the author see the structure/outline.

The w3 document has plenty of examples (not all the most well structured code - but that's unfortunately true with nearly all the html5 standard)

[JD_Toims]

a <footer> can belong either to the page-as-a-whole or to a section, hence the business about immediate ancestors (much like <address> in this respect)

Have I got that right?

Yes, look at the example <article> section of the usage summary:
http://www.w3.org/TR/html5/sections.html#usage-summary-0

---

The easiest way I can think of to code the OP's question with the correct semantics is almost what's in the OP's example for the structure:

<header>Text here</header>
<h1>Text here</h1>
<p>Few words to describe what body text is about</p>
<p>Several sentences about both topics</p>
<p>Several sentences about both topics</p>
<p>Several sentences about both topics</p>
<h2>Text about anaerobic exercise</h2>
<ul>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
</ul>
<h2>Text about aerobic exercise</h2>
<ul>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
<li>Several sentence bullet point.</li>
</ul>
<p>Text including link to another page</p>
<footer>Text here</footer>

<body>
- <header>
-- <p>Text here</p>
-- <h1>Text here</h1>
-- <p>Few words to describe what body text is about</p>
- </header>
- <p>Several sentences about both topics</p>
- <p>Several sentences about both topics</p>
- <p>Several sentences about both topics</p>
-- <section>
--- <h2>Text about anaerobic exercise</h2>
--- <ul>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
--- </ul>
-- </section>
-- <section>
--- <h2>Text about aerobic exercise</h2>
--- <ul>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
--- </ul>
-- <section>
-- <aside>
--- <p>Text including link to another page</p>
-- <aside>
- <footer>Text here</footer>
</body>

[gouri]

Thanks for those responses. They help me to better understand how to use the <section> tag.

JD_Toims,

Thanks for the link to the W3 page. They have some good examples.

In your example of how to code the page, I think that you are saying that only the h2 tag and the content below it that is related to the h2 tag should be put in a <section> tag?

Since I have this twice on the page, I should use the <section> tag twice.

[JD_Toims]

You got it! -- In the example you gave that's all you need to use <section> for.

[drhowarddrfine]

Well ... actually ... no.

A section is a new section with its own headings. Using a h2 element inside a section because the body has a h1 is the wrong reason. Any section is its own content and can have its own h1 heading.

iow, a h2 inside a section is a second level heading of that section and not the body.

[JD_Toims]

Well, actually, according to the documentation, yes the post I made is correct.
[Pay careful attention to the example following: "However, the same document would be more clearly expressed as:" below]

For example, the following is correct:

<body>
- <h4>Apples</h4>
- <p>Apples are fruit.</p>
- <section>
-- <h2>Taste</h2>
-- <p>They taste lovely.</p>
-- <h6>Sweet</h6>
-- <p>Red apples are sweeter than green ones.</p>
-- <h1>Color</h1>
-- <p>Apples come in various colors.</p>
- </section>
</body>

However, the same document would be more clearly expressed as:

<body>
- <h1>Apples</h1>
- <p>Apples are fruit.</p>
- <section>
-- <h2>Taste</h2>
-- <p>They taste lovely.</p>
-- <section>
--- <h3>Sweet</h3>
--- <p>Red apples are sweeter than green ones.</p>
-- </section>
- </section>
- <section>
-- <h2>Color</h2>
-- <p>Apples come in various colors.</p>
- </section>
</body>

Both of the documents above are semantically identical and would produce the same outline in compliant user agents.

This third example is also semantically identical, and might be easier to maintain (e.g. if sections are often moved around in editing):

<body>
- <h1>Apples</h1>
- <p>Apples are fruit.</p>
- <section>
-- <h1>Taste</h1>
-- <p>They taste lovely.</p>
-- <section>
--- <h1>Sweet</h1>
--- <p>Red apples are sweeter than green ones.</p>
-- </section>
- </section>
- <section>
-- <h1>Color</h1>
-- <p>Apples come in various colors.</p>
- </section>
</body>

[drhowarddrfine]

I'm not saying your example is wrong. I'm replying to the notion that a h2 MUST be used in the section because the body has a h1.

[JD_Toims]

That's not what anyone was saying -- All that was being said was given the current coding the H2s should be enclosed in a <section>

Question:

I think that you are saying that only the h2 tag and the content below it that is related to the h2 tag should be put in a <section> tag?

Reply:

You got it! -- In the example you gave that's all you need to use <section> for.

Nothing at all in there about "must use an H2 because the body uses an H1" that would need to be corrected.

[lucy24]

Any section is its own content and can have its own h1 heading.

Does google know this?

[tangor]

I have a different question:

What is the BENEFIT of using <section>? How does that benefit either the user or the search engines?

This is a serious question.

Just because you "can" doesn't mean you "should".

[JD_Toims]

Without being able to set a <section> or <aside> [different type of section] like the bold below, the last <p> would be considered part of the second <section>, rather than an <aside> to the <body> [which has 2 subsections] of the page.

<body>
- <header>
-- <p>Text here</p>
-- <h1>Text here</h1>
-- <p>Few words to describe what body text is about</p>
- </header>
- <p>Several sentences about both topics</p>
- <p>Several sentences about both topics</p>
- <p>Several sentences about both topics</p>
-- <section>
--- <h2>Text about anaerobic exercise</h2>
--- <ul>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
--- </ul>
-- </section>
-- <section>
--- <h2>Text about aerobic exercise</h2>
--- <ul>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
--- </ul>
-- <section>
-- <aside>
--- <p>Text including link to another page</p>
-- <aside>
- <footer>Text here</footer>
</body>

---

If the last <p> was a summary of the <body> [page as a whole] it could be coded as below, without the aside, and search engines would be able to attribute the <p> correctly to the <body>, but without the <section>s the last <p> would again be part of the second section:

<body>
- <header>
-- <p>Text here</p>
-- <h1>Text here</h1>
-- <p>Few words to describe what body text is about</p>
- </header>
- <p>Several sentences about both topics</p>
- <p>Several sentences about both topics</p>
- <p>Several sentences about both topics</p>
-- <section>
--- <h2>Text about anaerobic exercise</h2>
--- <ul>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
--- </ul>
-- </section>
-- <section>
--- <h2>Text about aerobic exercise</h2>
--- <ul>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
--- </ul>
-- <section>
- <p>Text including link to another page</p>
- <footer>Text here</footer>
</body>

[swa66]

What is the BENEFIT of using <section>?

It allows to give structure to an html document beyond what you can do without it.
Consider a technical manual e.g.: it allows you to tie the paragraphs, bullet lists, pictures etc. that belong with a subtitle into one "group" indicating they all belong together.
Even for e.g. a front page of a typical blog it allows you to tie together all parts of an entry into an article (a "group") and at the same time still have inside the individual articles addition structure by having paragraphs, pictures etc. and subtitles linked into their own groups.

How much of it is recognized by search engines: nobody will know but those coding them. But this level of structure is what's in html5 ... and then IMHO the question should be reversed: what have you to lose ? Or even what will you lose if and when the search engines start to like the additional structure in the document (and/or dislike the lack of structure) ?
Moreover if you read the standards, there's a lot of talk about outlines of the document, and that sounds an awful like knowing what the different parts of the document are talking about. something a search engine might well be interested in...

To the end user there's in the short term little to no advantage but in the long run they'll benefit from a better maintainability of the document. E.g. that you can use h1 in every section as the title is heralded in the standard itself as a means of making it easier to maintain should you move about sections in a document.

[gouri]

JD_Toims,

- <header>
-- <p>Text here</p>
-- <h1>Text here</h1>
-- <p>Few words to describe what body text is about</p>
- </header>
- <p>Several sentences about both topics</p>
- <p>Several sentences about both topics</p>
- <p>Several sentences about both topics</p>
-- <section>

Instead of writing

<header>
-- <p>Text here</p>
-- <h1>Text here</h1>
-- <p>Few words to describe what body text is about</p>
- </header>

can I write

<header>
-- <p>Text here</p>
</header>
<h1>Text here</h1>
-- <p>Few words to describe what body text is about</p>
- <p>Several sentences about both topics</p>
- <p>Several sentences about both topics</p>
- <p>Several sentences about both topics</p>
-- <section>
--- <h2>Text about anaerobic exercise</h2>
--- <ul>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
---- <li>Several sentence bullet point.</li>
--- </ul>
-- </section>

[JD_Toims]

Technically, yes, but I'm really not sure why you would if the example you gave in the OP is accurate for your situation.

[gouri]

JD_Toims,

The reason that I am considering doing this is because I am using a template and in the template, there is a block for the header, the h1, the body text, and the footer. So I am thinking that I'll put the title of the site in the header (do you think that I need to put the title within <p> tags if I use <header>?) and because of this layout, I won't put

-- <h1>Text here</h1>
-- <p>Few words to describe what body text is about</p>

in the <header> tag. Does this way of coding based on the layout seem okay or do you think that putting

-- <h1>Text here</h1>
-- <p>Few words to describe what body text is about</p>

in the header would be better?

[lucy24]

do you think that I need to put the title within <p> tags if I use <header>?

It is perfectly OK to have text inside nested containers. Honest. Now, if you have the kind of css that says

div#something div#otherthing ul li ul li .special ul li.foobar p {some-style-here}

people will protest. But it is absolutely normal to have a <p> or <h1> inside one or more other elements.

[JD_Toims]

Technically what you're wanting to do is alright -- It's not "completely ideal" imo, but it's definitely acceptable according to the spec.

One thing I would likely do differently though is rather than putting the title in the header section, which would be repeating it, I would put the <p>Few words to describe what body text is about</p> in the header as a "lede" rather than under the H1.

[gouri]

JD_Toims,

I know that this is from a few posts ago, but I wanted to say thank you for explaining the <aside> tag. I think that I will need this tag because if I don't use it, the sentence will be attributed to the section above it, instead of more to the page as a whole. I may have something like this on more than one page.

One thing I would likely do differently though is rather than putting the title in the header section, which would be repeating it, I would put the <p>Few words to describe what body text is about</p> in the header as a "lede" rather than under the H1.

I will see if I can do this. If this flows better than putting <p>Few words to describe what body text is about</p> under the h1, then I'll do it this way.