Choosing between <article> and <section> is a common challenge when learning semantic HTML. Both elements help developers organise webpage content, but they serve different purposes. Using them interchangeably can make a document harder to understand, maintain and navigate. The distinction becomes clearer when you consider the purpose of the content rather than its visual appearance. An <article> represents a self-contained composition, whereas a <section> groups related content around a particular theme.

Understanding the difference between article vs section HTML helps you build meaningful document structures that support accessibility, maintainability and effective search engine optimisation (SEO).

This guide explains how each element works, when to use article or section, and how to apply them to real-world website layouts.

The Fundamental Distinction: Self-Contained vs Thematic Grouping

The essential difference between these HTML5 sectioning elements is their relationship with the surrounding page.

An <article> contains content that can make sense independently. Examples include a blog post, a news report or a user-submitted forum discussion.

A <section>, by contrast, represents a thematic grouping of related content. It might introduce a topic, explain a particular concept or organise a long article into logical chapters.

Consider this example:

<article>
  <h1>How to Improve Website Security</h1>

  <section>
    <h2>Choose Strong Passwords</h2>
    <p>Use unique passwords for every account.</p>
  </section>

  <section>
    <h2>Enable Two-Factor Authentication</h2>
    <p>Add another layer of protection to your accounts.</p>
  </section>
</article>

The entire blog post is an <article> because it forms a complete piece of content. The two <section> elements divide that post into related topics.

Notice that the elements are not competing alternatives. They can work together to create a clear and meaningful document structure.

The Syndication Test: Can This Content Stand Alone?

A useful way to decide whether content belongs inside an <article> is to ask whether it would still make sense if published independently, such as in a news feed, content aggregator or another website.

For instance, a complete tutorial about HTML forms can stand alone. It has its own subject, purpose and explanatory content, making <article> a suitable choice.

However, a paragraph explaining one step within that tutorial would usually belong in a <section> or another appropriate content element, depending on its context.

This is a practical test rather than an absolute technical rule. The HTML specification describes an article as a self-contained composition intended to be independently distributable or reusable, but not every valid article must actually be syndicated.

The key is to assess the content's independence, not its length or appearance.

Mastering the <article> Element

The <article> element identifies a complete composition that can be understood as a distinct item within a webpage.

It is particularly useful for websites that publish multiple pieces of content, including blogs, online magazines, educational platforms and community forums.

Typical Use Cases: Blog Posts, News Stories, Forum Posts and Comments

A blog post is a straightforward example:

<article>
  <h1>Understanding Semantic HTML</h1>
  <p>Published on 29 October 2026</p>

  <p>
    Semantic HTML gives meaning to the structure
    of a webpage through descriptive elements.
  </p>
</article>

The article has a clear title and a complete subject. It can be displayed on its own page or included in a listing of recent posts.

News reports are another natural application because each report represents an identifiable story. Forum posts and individual comments may also use <article> when each contribution forms a distinct, self-contained item.

For example, a discussion thread might contain a main post followed by several comments. Each contribution can be marked up as an article if that reflects its role in the document.

The important consideration is meaning. Do not use <article> merely because an element needs a border, card layout or background colour. CSS can provide those visual effects without determining the semantic element.

Nesting Articles within Articles (e.g., Blog Comment Threads)

HTML allows an <article> to contain other <article> elements. This is useful when a larger composition includes independently meaningful contributions.

<article>
  <h1>How Do You Learn HTML?</h1>
  <p>Original forum discussion.</p>

  <article>
    <h2>Comment by Alex</h2>
    <p>I started with small projects and tutorials.</p>
  </article>

  <article>
    <h2>Comment by Jamie</h2>
    <p>Building a personal website helped me most.</p>
  </article>
</article>

The outer article represents the discussion topic, while the nested articles represent individual comments.

Nesting should reflect a genuine content relationship rather than being added automatically. A comment that is merely a minor note may not require its own article element.

When implementing this pattern, consider including author information, publication dates and suitable headings where they help readers understand each contribution.

Demystifying the <section> Element

The <section> element represents a thematic grouping of content within a document or application. It is appropriate when several pieces of information belong together under a shared subject.

For example, a guide to website accessibility might include sections about keyboard navigation, alternative text and colour contrast. Each section addresses a distinct aspect of the broader topic.

Unlike <article>, <section> does not imply that its contents form an independently distributable composition. Its main purpose is to establish a meaningful division within a larger document.

Defining Thematic Continuity

A section should have a clear relationship with the content around it. Rather than grouping unrelated elements simply because they appear next to one another, use it to establish a logical subject or stage in the reader's journey.

Consider a product guide:

<main>
  <h1>Choosing a Laptop for University</h1>

  <section>
    <h2>Performance Requirements</h2>
    <p>Consider the processor, memory and storage.</p>
  </section>

  <section>
    <h2>Battery Life</h2>
    <p>Look for a laptop that lasts through lectures.</p>
  </section>
</main>

Both sections contribute to the main guide, but each covers a separate topic. This structure makes the content easier to scan and maintain.

However, not every group of elements needs a <section>. If you only need a wrapper for styling or layout, a generic <div> is often more appropriate. If the content represents a complete composition, consider <article> instead.

The distinction is important: semantic HTML describes the purpose of content, not simply the way it is displayed.

The Golden Rule: Every <section> Must Have a Distinct Heading

A section should generally have a heading that identifies its subject. Headings help readers understand the purpose of each content group and improve the document's navigability.

For example:

<section>
  <h2>Understanding HTML Forms</h2>
  <p>Forms allow users to submit information.</p>
</section>

Here, the heading clearly identifies the section's topic.

The HTML standard does not impose an absolute requirement for every <section> to contain a heading. Nevertheless, a heading is strongly recommended in ordinary content structures. If a group has no meaningful heading or thematic purpose, reconsider whether a <div> or another element would be more suitable.

Choose heading levels according to the document hierarchy. A major topic might use <h2>, while a subsection beneath it might use <h3>. Do not select heading levels merely to achieve a particular font size; use CSS for visual presentation.

Also remember that <section> and <article> do not automatically generate a visible heading or impose a special visual design. Their appearance depends on the browser's default styles and your CSS.

Comparing Side-by-Side: Common Scenarios

Understanding the theory is useful, but practical examples make the choice easier. The following scenarios show how to apply article vs section HTML in common website projects.

Product Listings in E-Commerce

An online shop might display several products on a category page. Each product card contains its own name, image, price and description.

If each card represents a distinct, self-contained product composition, an <article> may be appropriate. A surrounding <section> can group the products under a category heading.

<section>
  <h2>Popular Laptops</h2>

  <article>
    <h3>Laptop A</h3>
    <p>Lightweight laptop for everyday study.</p>
    <p>Price: £599</p>
  </article>

  <article>
    <h3>Laptop B</h3>
    <p>Performance-focused laptop for creative work.</p>
    <p>Price: £899</p>
  </article>
</section>

This is a useful pattern when the products have independent identities. However, semantic HTML does not require every product card to be an <article>. A <div> may be sufficient for simple interface components, particularly when they are not meaningful as standalone compositions.

The decision should reflect the content rather than the e-commerce design alone.

Multi-Chapter Documentation

Documentation often benefits from sections because its content is organised around related subjects.

<article>
  <h1>Getting Started with HTML</h1>

  <section>
    <h2>Installation and Tools</h2>
    <p>Prepare your editor and browser.</p>
  </section>

  <section>
    <h2>Your First HTML Document</h2>
    <p>Create a basic page structure.</p>
  </section>

  <section>
    <h2>Testing Your Page</h2>
    <p>Open the document in a browser.</p>
  </section>
</article>

The article represents the complete tutorial, while each section covers a chapter or stage. If individual chapters are published as independent tutorials, they may instead be marked up as separate articles.

This approach makes it easier to reorganise documentation without losing the relationship between the main subject and its supporting topics.

Marketing Landing Pages

Landing pages typically combine several thematic areas: a hero introduction, product benefits, customer testimonials, pricing and frequently asked questions.

Sections are often suitable because each area contributes to one overall marketing objective.

<main>
  <h1>Improve Your Team's Productivity</h1>

  <section>
    <h2>Key Benefits</h2>
    <p>Discover how the platform supports your team.</p>
  </section>

  <section>
    <h2>Customer Testimonials</h2>
    <p>Read about customers' experiences.</p>
  </section>

  <section>
    <h2>Pricing Plans</h2>
    <p>Compare available subscription options.</p>
  </section>
</main>

Individual testimonials could use <blockquote> when they are quotations, while a substantial, independently meaningful customer story might warrant <article>. A pricing layout, meanwhile, may need only ordinary structural containers.

For a related explanation of how quotations and supporting visual content fit into semantic HTML, see the site's companion guide, Aside and Figure.

Decision Tree: Which Element Should You Pick?

When deciding between <article> and <section>, work through the following questions.

<box border radius="lg" padding={4} gap={3}>
  <box background="surface-secondary" radius="md" padding={3} align="center">
    <title size="md">What is the purpose of this content?</title>
  </box>
  <row align="start" gap={3}>
    <box background="surface" border radius="md" padding={3} flex="1" gap={1}> 

 **A distinct, self-contained composition?**
 <badge color="success">Consider `<article>`</badge>
  <text size="sm">Examples: a blog post, news story or meaningful forum contribution.</text>
</box>
<box background="surface" border radius="md" padding={3} flex="1" gap={1}>
  **A thematic part of a larger document?**

  <badge color="info">Consider `<section>`</badge>
  <text size="sm">Examples: a chapter, a group of related topics or a landing-page content area.</text>
</box>
</row>
  <divider color="subtle"/>
  <box gap={1}>  **Neither description fits?**
<text size="sm">Use `<div>` when you need a generic container for styling or layout, or choose a more specific semantic element when one better describes the content.</text>
</box>
</box>

Before finalising your markup, ask yourself three questions:

1. Can the content stand alone? If it forms a complete, independently meaningful composition, <article> may be suitable.

2. Does the content have a distinct theme? If it organises a larger document around a specific topic, <section> may be appropriate.

3. Does the wrapper communicate meaningful structure? If it exists only to support CSS or JavaScript, a <div> is usually sufficient.

These questions are practical guidelines, not rigid rules. HTML elements should be chosen according to their intended meaning and the context in which they appear.

Key Takeaways

The difference between article vs section HTML becomes straightforward once you focus on the purpose of each element.

• Use <article> for self-contained compositions that can be understood independently, such as blog posts, news stories and meaningful user contributions.

• Use <section> to group related content around a particular theme, usually with a descriptive heading.

• Combine both elements when a complete article contains multiple thematic sections.

• Use nested articles thoughtfully when a larger composition contains independent contributions, such as a discussion with comments.

• Choose <div> for generic grouping when no more meaningful semantic element is appropriate.

Correct semantic content grouping helps developers maintain consistent markup and gives browsers and assistive technologies a more meaningful document structure. It can also support search engines in interpreting the relationships between content, although using <article> or <section> alone does not guarantee better rankings.

For a deeper understanding of how semantic markup contributes to accessibility and discoverability, continue with Search Engine Optimisation Benefits. Together, these guides provide a practical foundation for writing cleaner, more meaningful HTML5.

The ultimate rule is simple: choose HTML elements for what your content means, not merely for how you want it to look.