<article>

[raae]

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