The section element




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.

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.
If all you want to do is have something look different use a div tag (a genericcontainer) and CSS styles.
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.

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 right of this page I have a definition of "Semantic HTML". If you look in the source code (line 133) 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.

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 (Jan. 2012) few web designers use them, but 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