What is the appropriate use of the Article element?

by

The important thing to understand about articles and sections is that they are sectioning elements. Each follows a common pattern:

<sectioning_element>
    <heading_or_header>
    ... the body text and markup of the section
    <footer>
</sectioning_element>

The footer is optional. Sectioning elements should have a “natural” heading. That is, it should be easy to write an <h?> element at the start of the section/article, that describes and summarises the entire content of the section/article, such that other things on the page not inside the section/article would not be described by the heading.

It’s not necessary to explicitly include the natural heading on the page, if for example, it was self evident what the heading would be and for stylistic reasons you didn’t want to display it, but you should be able to say easily what it would have been had you chosen to include it.*

For example, a section might have a natural heading “cars for sale”. It’s extremely likely that from the content contained within the section, it would be patently obvious that the section was about cars being for sale, and that including the heading would be redundant information.

<section> tends to be used for grouping things. Their natural headers are typically plural. e.g. “Cars for Sale”

<article> is for units of content. Their natural headers are usually a title for the whole of the text that follows. e.g. “My New Car”

So, if you’re not grouping some things, then there’s no need, and it’s not correct, to use another sectioning element in between the header and footer of the section and your correct mark-up would be

<article class="tweet">
  <header>...</header>
  <p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</article>

assuming you can find a natural heading to go inside the <header> element. If you can’t, then the correct mark-up is simply

<p class="tweet">This is a tweet preview. You can... <em>6 Hours ago</em></p>

or

<div class="tweet">
     <p>This is a tweet preview. You can... <em>6 Hours ago</em></p>
</div>

* There’s a case for including the natural heading anyway, and making it “display:none”. Doing so will allow the section/article to be referenced cleanly by the document outline.

Leave a Comment