The <article> element

Represents part of a page which is a self-contained article, which in principle could be taken out of the rest of the page's content and understood on its own.

What it means

In the context of this element, an article is defined as meaning a self-contained composition. That is, it's part of the page which could be taken out and would still be a complete, meaningful piece of content on its own. It might be divided into sections with <section>, and individual paragraphs with <p>, but looking at just one of those in isolation wouldn't make sense in many cases.

One of the consequences of this definition is that <article> elements can be usefully nested. Take a blog post as an example. The blob article itself should be marked up as an <article>, including its title, time of posting, etc. Other parts of the page, like navigation menus for accessing the rest of the site, should be left outside the <article> because they could be left out and the article would still be understandable on its own (although it might be less useful without some of that context). The comments posted on the blog would also be contained in their own <article> elements, even though many people wouldn't normally describe a comment as an ‘article’, because each comment is its own composition. Again, this would include contextual information such as the name of the comment's author.

Example

<header>
 <h1>My Blog</h1>
 <h2>Catchy slogan...</h2>
</header>

<article>
 <header>
  <h2>First blog post</h2>
  <p>By Joe Blogger, published September 19, 2012</p>
 </header>

 <p>Welcome to my new blog...</p>

 <h3>Comments</h3>
 <article>
  <h4>Comment from user biggles23</h4>
  <p>Cool blog dude :-)</p>
 </article>
</article>

Full list of attributes

All the usual HTML global attributes are available

Further information

The Web Design Academy Contact us

By form

By Phone

+44 (0)113 234 4611

By email

enquiries@thewebdesign.academy

By snail mail

Suite 3 15 South Parade Leeds LS1 5PQ United Kingdom