<article>
By raae for Semantic Advent |
Did you know it most often makes sense to use <article>
many times over on the same page?
The
<article>
HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).
MDN Docs
I like to ask myself, "Does this block of content make sense alone without any added context?" If the answer is "yes" I'll consider wrapping it in an <article>
and the examples from from the MDN Docs are plenty:
- a forum post
- a magazine or newspaper article
- a blog entry
- a product card
- a user-submitted comment
- an interactive widget or gadget
Take note of that last one, as it's not your standard text content that you might expect from something named article ðĪŠ
Within an <article>
element, you should include a heading (<h1> - <h6>
element) that identifies the content. Later, we'll look at some elements that will help you identify the author and publishing time of the <article>
.
You may even nest <article>
elements! However, the only example I've seen is comments to a blog post being nested as <article>
s inside the blog post's <article>
. Let me know if you've seen a better example in the wild ð
All in all, this means that most of your typical website pages should be littered with <article>
elements, and some great example of that is your local newspaper (hopefully), Twitter (each tweet and reply), and Instagram (each post).
But one thing that surprised me the first time I came over it is that:
When the main content of the page (i.e. excluding footers, headers, navigation blocks, and sidebars) is all one single self-contained composition, that content may be marked with an article, but it is technically redundant in that case (since it's self-evident that the page is a single composition, as it is a single document).
HTML Spec
However, I liked how they use the phrase "technically redundant", which means you'll be OK with a single <article>
element wrapping all the main content on a page even if a random pedantic internet person tells you otherwise.
I hope this inspired you to sprinkle <article>
liberally in your projects