How to correctly use “section” tag in HTML5?

Question

I\'m trying to build a layout in HTML5 and after reading several different articles I\'m just confused. I\'m trying to get some input on how it should be used.

Below

Answer 1

In the W3 wiki page about structuring HTML5, it says:

: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article.

And then displays an image that I cleaned up:

It's also important to know how to use the

tag (from the same W3 link above):

is related to

, but is distinctly different. Whereas

is for grouping distinct sections of content or functionality,

is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. Think of it this way - if you have a number of items of content, each of which would be suitable for reading on their own, and would make sense to syndicate as separate items in an RSS feed, then

is suitable for marking them up.

In our example,

contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore

is perfect for them:

Simple huh? Be aware though that you can also nest sections inside articles, where it makes sense to do so. For example, if each one of these blog posts has a consistent structure of distinct sections, then you could put sections inside your articles as well. It could look something like this: