The article element
We’ve discussed a lot of new elements here at HTML5Doctor, but the article element has somehow escaped the microscope… until now! article is one of the new sectioning elements. It is often confused with section and div but don’t worry we’ll explain the difference between them.
What the spec says
Thankfully, the spec is short and sweet:
The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be 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.
W3C Specification
In addition to it’s content, an
The smell test for going independent
An independent piece of content, one suitable for putting in an We only have a title and some content, but it’s enough to make sense on it’s own (assume there’s a lot more content about apples The apple is the pomaceous fruit of the apple tree… … A weblog-style A published date leads us to add a Published: The apple is the pomaceous fruit of the apple tree… … An This example shows a weblog entry with comments. Each comment can be marked up as an Published: The apple is the pomaceous fruit of the apple tree… … I love apples, my favourite kind are Granny Smiths Urgh, apples!? you should write about ORANGES instead!!1! An You can use the The apple is the pomaceous fruit of the apple tree… These bright red apples are the most common found in many supermarkets… These juicy, green apples make a great filling for apple pies… A Where appropriate a The apple is the pomaceous fruit of the apple tree… The orange is a hybrid of ancient cultivated origin, possibly between pomelo and tangerine… Bananas come in a variety of sizes and colors when ripe, including yellow, purple, and red… Using The specification also mentions that an interactive widget can also be an The pubdate attribute You may have noticed the pubdate attribute in these examples. pubdate is an optional boolean attribute that may be added to one time element within the pubdate You could think of these as HTML and XHTML-style — the end result is the same so use the style you like. Note that pubdate applies only to the parent There’s been a lot of confusion over the difference (or perceived lack of a difference) between the By contrast 1. Would the content would make sense on it’s own in a feed reader? If so use Dr Bruce has written HTML5 Hopefully this post has given you some insight into the correct use of the I’m also keen to hear your thoughts on the confusion between the This article was first submitted on www.html5doctor.com
Examples of
A bare-bones
Apple
Apple
Apple
Comments
Posted by: Apple Lover
Posted by: Oranges are king
Apple varieties
Red Delicious
Granny Smith
Articles on: Fruit
Apple
Orange
Banana
My Fruit Spinner
pubdate=”pubdate”
The difference between
Summary