HTM-000090 | The <article> Element
It’s helpful to think of <header>, <footer>, <nav>,
and <aside>
as being specialized forms of the <section>
element.
A <section>
element is a generic chunk of related content, while <header>, <footer>, <nav>
, and <aside>
are chunks of specific kinds of related content.
The <article>
element is another specialized kind of section. Use it for self-contained related content. Now the tricky part is deciding what constitutes “self-contained.”Ask yourself if you would syndicate the content in an RSS or Atom feed. If the content still makes sense in that context, then article is probably the right element to use.
In fact, the <article>
element is specifically designed for syndication. If you use a time element within an <article>
element, you can add an optional pubdate Boolean attribute to indicate that it contains the date of publication:
Click here to view the <article>
example.
The <article>
element is useful for blog posts, news stories, comments, reviews, and forum posts.
The HTML5 specification goes further than that. It also declares that the article element should be used for self-contained widgets: stock tickers, calculators, clocks, weather widgets, and the like. Now the <article>
element is trying to cover the same use cases as Microsoft’s Web Slices.
It seems very unintuitive to me that an element named “article” should apply to the construct known as “widget.” Then again, both articles and widgets are self-contained kinds of content.
What’s more problematic is that <article>
and <section>
are so very similar. All that separates them is the word “self-contained.”Deciding which element to use would be easy if there were some hard and fast rules. Instead, it’s a matter of interpretation. You can have multiple <article>
elements within a <section>
, you can have multiple <section> elements within an <article>
element. You can nest <section>
elements within <section>
elements and <article>
elements within articles. It’s up to you to decide which element is the most semantically appropriate in any given situation.
Tasks to Complete
- Complete all available resources found in lesson resources.
- Read all content on this page.
- Follow any links and review their contents.
- There are no assignments associated with this section of the lesson that must be submitted