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.

[gouri]

I would appreciate if you guys could help me with the following:

Earlier on in the thread, JD_Toims mentioned putting <p>Text here</p>, <h1>Text here</h1> and <p>Few words to describe what body text is about </p> into a <header> tag. I was reading some things on the Internet, and I think that this might be a good idea. What is making me hesitate a little bit is in the template that I am using, when you look at the source code, you see words like header, heading, body, and footer. These are probably there to represent the different blocks of the template. The title or <header> of the site (represented here by <p>Text here</p>) would be placed in the header box, the <h1>Text here</h1> would be placed in the heading box, and <p>Few words to describe what body text is about</p> would be placed in the body text box, but in the source code <p>Text here</p>, <h1>Text here</h1> and <p>Few words to describe what body text is about</p> would be inside the <header> tag.

I have two questions:

(1) Would the fact that an HTML5 element such as <header>, for example, appears as a tag in addition to header being a descriptive word used by the template in the source code cause confusion to the search engines?

(2) Also, would there be any confusion to the search engines with <h1>Text here</h1> and <p>Few words to describe what body text is about </p> appearing inside the <header> tag in the source code when in the template, <h1>Text here</h1> appears in the heading box and the source code contains the word heading as a descriptive word for this box and <p>Few words to describe what body text is about </p> appears in the body text box and the source code contains the word body as a descriptive word for this box?

I was also thinking about using display:block with <header> and <footer> because I read that this may help the search engines and browsers to better interpret that the <header> and <footer> on a page are in fact that. Maybe give them more semantic meaning, the way that the <section> tag has semantic meaning? Would you guys recommend doing this?

I appreciate your help.

[drhowarddrfine]

1) No because an element is not treated as text.
2) No because an element is not treated as text.

Header and footer elements are already block level elements but search engines do not consider how they are displayed as far as semantics go.

[lucy24]

I was also thinking about using display:block with <header> and <footer>

Sometimes it's useful to take a belt-and-suspenders approach by putting something in CSS that's already the default for the element, like {font-size: 100%;} or {color: inherit;}. But here there's no reason. The chances that "header" or "footer" will change to something other than block-level elements within the next few decades are, let's say, minimal.

Besides, I kinda suspect that search engines mainly read CSS negatively. They look for things like {display: none;}, or {color: #00FF00; background-color: #01FE01;}. Other than that they don't really care.

Try not to think too hard about words like "header". There are simply too many of them. There's the <head> part of your html, and the <h1-6 headers, and "heading" as a concept, and <header> as a new HTML tag, and <th> as a table element ... You'll just wind up with a headache. Haha.

[gouri]

drhowarddrfine,

Thank you for those responses. I now have a better idea of how I can approach coding the page.

lucy24,

Try not to think too hard about words like "header". There are simply too many of them. There's the <head> part of your html, and the <h1-6 headers, and "heading" as a concept, and <header> as a new HTML tag, and <th> as a table element ... You'll just wind up with a headache. Haha.

Definitely true. And funny!

[gouri]

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

In the template, I am going to have the navigation links under <p>Text here</p>, so it would look like the following:

- <header>
-- <p>Text here</p>
--<ul><li>Link 1</li><li>Link 2</li><li>Link 3</li><li>Link 4</li></ul>
-- <h1>Text here</h1>
-- <p>Few words to describe what body text is about</p>
- </header>

Is it okay to have the website's navigation links in the <header> element?

Also, instead of <ul><li>Link 1</li><li>Link 2</li><li>Link 3</li><li>Link 4</li></ul>, can I use <nav><ul><li>Link 1</li><li>Link 2</li><li>Link 3</li><li>Link 4</li></ul></nav>

I appreciate your help.

[drhowarddrfine]

Header elements can contain navigational elements. How you use the nav element is also appropriate.

[gouri]

Thank you.

I appreciate it.