What is the difference between <article> and <section>?

Use <article> for content that stands on its own and could be lifted out whole; use <section> to group related content thematically within a larger whole.

This is one of the most confused pairs in HTML, so anchor it on the test of independence. An <article> represents a self-contained unit — picture a newspaper article that still makes sense if you tear it out and hand it to someone:

• Blog posts
• News articles
• Forum posts
• Product cards

A <section> is a thematic grouping, usually introduced by a heading, that exists as part of a bigger context rather than on its own:

• Chapters of a document
• Tabs in a tabbed interface
• Distinct parts of a homepage

The key question to ask: would this still make sense extracted from the page? If yes, it's an article; if it only makes sense in context, it's a section. The two also nest — an article can be divided into sections:

<article>
    <h1>Blog Post Title</h1>
    <section>
        <h2>Introduction</h2>
        <p>...</p>
    </section>
    <section>
        <h2>Main Points</h2>
        <p>...</p>
    </section>
</article>