What’s the difference between
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
You writing IS an “article” and it has “sections.” The article itself seems like a section of your web page as well, apart from
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
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.
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?
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.
articlecan have nested
articlesshould refer to parent
sectioncan have nested
Articletags are perfect for Microdata info
Articleis similar to the
entryelement in ATOM