join: new@juude

get alerts for new articles

CLOSE WINDOW

html5

Structural, Layout and More

<article></article> (w3c)

The article element specifies independent, self-contained content. It should be possible to distribute it independently and it still make sense. A blog post, news article, etc. Its content can be divided by sections, <section> and have its own heading, it can also contain its own header footer.

ARIA role attribute value: depends on content

The article element represents 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.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

Author information associated with an article element (q.v. the address element) does not apply to nested article elements.

When used specifically with content to be redistributed in syndication, the article element is similar in purpose to the entry element in Atom. [ATOM]

The schema.org microdata vocabulary can be used to provide the publication date for an article element, using one of the CreativeWork subtypes.

When the main content of the page (i.e. excluding footers, headers, navigation blocks, and sidebars) is all one single self-contained composition, the content should be marked up with a main element and the content may also be marked with an article, butit is technically redundant in this case (since it's self-evident that the page is a single composition, as it is a single document). HTML 5.1 Nightly

Attributes: All Global

DON'T USE FOR STYLING
An article should not be used to wrap information for styling only, in that case you need to use a div.

MAKE SURE IT DISPLAYS IN AND PRINTS CORRECTLY FROM ALL VERSIONS OF EACH BROWSER
In your CSS you need to make sure that this element is a block:
article{
display: block;
}

Include the javaScript (info on this page) so that it works in all IE versions 9 down which will also allow it to print correctly from older versions of IE

ARTICLE

An article should make sense on its own. It should be possible to distribute it independently, without including any of the rest of the content and it still make sense.

An Article

Must be able to stand alone and still make sense
It could be in the form of a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment etc.
Can be divided into sections by the section element.
Can also be included with a section element.
Should have an heading
Can have its own header but this is not required
Can have its own footer for author information etc.
It cannot be a decendant of an address element.

Examples

<article>
<h1></h1>
content
</article >

<article>
<header><h1></h1></header>
content
<footer></footer
</article >

<article>
<h1></h1>
<section id="left"><h2></h2>content</section
<section id="right"><h2></h2>content</section
</article >