HTML5 tutorial - Section element

The section element tag

The <section> element and the elements we have covered in the last five pages are examples of what are known as semantic HTML. These elements add meaning to content the search engines can use to better understand a page. This page has more on web semantics.

The W3C says: "The <section> element represents a generic section of a document or application."

It goes on to say: "The <section> element is not a generic container element."

I too was confused; however there is a difference.

  1. If all you want to do is have something look different use a div tag (a generic container) and CSS styles.
  2. If you want a particular part of a page separated from the rest of the page due to the information in it - its "content", use section elements (a generic section). Use the section element if there is what W3C calls a "semantic" distinction.

I am still not clear why one is a "container" and the other a "section" – but whatever. Ours is not to wonder why... What's important is that you know when to use one or the other.

You can apply CSS to the section element just as you would a div, however the search engines ignore div tags – they are semantically neutral.

The section element shouldn't be used save as a last resort and then usually it should have a header (h1 to h6). It's like that extra room in the house you never use except when you can't think of any place better. Some working with W3C in the development of HTML5 thought the section element wasn't necessary – they thought it better to just use article tags and at first I was inclined to agree. Then I found the perfect use for it.

On the bottom of this page I have a definition of "Semantic HTML". If you look in the source code (line 111) you will see I have it in section tags. I don't want to lose SEO weight with the aside element, but nor do I want it to detract from what is in the main article tags. The section element fits the bill perfectly.

All these new tags: header, nav, article, footer, aside and section are as a group called section elements. This does not mean the the section element is anything more than just one of them, though you can be excused for assuming otherwise. It took me a while to figure that one out.

Throughout this tutorial I have repeatedly mentioned that you should always be designing for two audiences, one human the other bots. The header, nav, article, footer, aside and section elements are for that latter audience.

These elements give meaning to content the search engines could not ascertain without them. At this point most web designers use them, and they should. They have broad browser support and they make good sense. The better the search engines can "see" and analyze a site the better.

Semantic HTML

Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation.