HTML5 Article VS Section tags

What’s the difference between article and section? Here, I will show you when to choose one HTML5 tag over another.

If you are a blogger who writes articles and you want to properly write semantic markup, then you definitely don’t want to be confused about the difference between the section and article tags.

You writing IS an “article” and it has “sections.” The article itself seems like a section of your web page as well, apart from header, footer, aside, etc.

The Section Element

The W3C describes section as a generic container. But that also describes a div element. They elaborate:

When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

The section corresponds to some nodes in the original DOM tree. Each section can have one heading associated with it, and can contain any number of further nested sections. So far, it sounds pretty generic.

The Article Element

Thankfully, article is much clearer. The important aspect of article is that it can stand on its own.

A properly marked up article could be removed from its context and would still make sense when shown elsewhere (syndicated).

Article is a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

How to Choose

First, use common sense. There could always be debate over semantics, just as in real life.

Use an article tag to contain content that could be shared and obviously for actual articles. Wrap your blog posts in them. Does the material have a date listed? an author listed? article tag.

Use the section tag like a div (read: generic container), but only when it describes what your document outline would include. For example, an article that contains a recipe would have section tags for ingredients, prep, and cooking instructions.

Bonus Footage!

• An article can have nested articles
• Nested articles should refer to parent article
• A section can have nested sections
• Article tags are perfect for Microdata info
• Article is similar to the entry element in ATOM