Home › Code Snippets › HTML Snippets › Reference › <section> & <article>

HTML Reference

<section> & <article> — Semantic Content

Two elements that replace the div soup. One for independent content, one for thematic groups.

Last updated: October 2026

Definition: The <article> element is for self-contained content that would make sense on its own — a blog post, forum thread, or product review. The <section> element is for thematic groupings of content that have a heading. Both convey structure to search engines and screen readers.

🎬 Live Example

A section containing three articles — a typical blog layout.

Latest Posts

Understanding HTML Semantics

Why semantic HTML matters more than ever in 2026.

CSS Grid vs Flexbox

When to use each layout system.

💡 The <section> groups the blog list. Each post is an <article> — self-contained content.

📝

Basic Syntax

<!-- Article: self-contained content -->
<article>
    <header>
        <h2>Blog Post Title</h2>
        <p>Published on <time datetime="2026-10-11">Oct 11, 2026</time></p>
    </header>
    <p>Post content...</p>
    <footer>
        <p>Author: Jane Doe</p>
    </footer>
</article>

<!-- Section: thematic group -->
<section>
    <h2>Features</h2>
    <p>Description of features...</p>
</section>

⚙️ Attributes Reference

Both elements have no specific attributes. They use the standard global attributes:

Attribute	Purpose
`id`	Unique identifier. Useful for anchor links.
`class`	Class names for styling.
`aria-labelledby`	Point to the heading ID for landmark navigation.
`role`	Override the default landmark role. Rarely needed.

article — Self-Contained Content

Use <article> when the content would make sense on its own — syndicated via RSS, shared on social media, or moved to another page.

<article>
    <header>
        <h1>How to Learn Python in 2026</h1>
        <p>By Jane Doe on <time datetime="2026-10-11">Oct 11, 2026</time></p>
    </header>

    <p>Python is a versatile language...</p>

    <section>
        <h2>Installation</h2>
        <p>Download Python from python.org...</p>
    </section>

    <section>
        <h2>Your First Script</h2>
        <p>Create a file called hello.py...</p>
    </section>

    <footer>
        <p>Tags: <a href="/tags/python">Python</a>, <a href="/tags/beginner">Beginner</a></p>
    </footer>
</article>

Blog posts, forum threads, product reviews, news articles, and comments are all articles.

section — Thematic Groups

Use <section> for a thematic grouping of content that has a heading.

<section id="features">
    <h2>Features</h2>
    <p>What makes our product different...</p>
</section>

<section id="pricing">
    <h2>Pricing</h2>
    <p>Simple, transparent pricing...</p>
</section>

<section id="faq">
    <h2>Frequently Asked Questions</h2>
    <details>
        <summary>How do I install?</summary>
        <p>Download the installer from...</p>
    </details>
</section>

Important: A section without a heading is probably just a <div>. The heading is what makes it a thematic group.

section vs article — The Test

The simplest way to decide:

Question	article	section
Could it be syndicated on its own?	Yes	No
Does it have its own heading?	Usually yes	Yes (required)
Example	Blog post, review, comment	Features, Pricing, FAQ
RSS feeds pick it up?	Yes	No

💡 Rule of thumb: If you could take it out of the page and put it in a magazine, it's an article. If it's a labeled section of a page, it's a section.

Nesting Patterns

Common nesting patterns in real pages:

<!-- Blog list: section with articles -->
<section>
    <h2>Latest Posts</h2>
    <article>...</article>
    <article>...</article>
    <article>...</article>
</section>

<!-- Blog post: article with sections -->
<article>
    <h1>Post Title</h1>
    <section>
        <h2>Introduction</h2>
    </section>
    <section>
        <h2>Main Content</h2>
    </section>
</article>

<!-- Landing page: sections on sections -->
<section id="hero">...</section>
<section id="features">...</section>
<section id="pricing">...</section>
<section id="faq">...</section>

🎯 semantic vs div

Content	Element
Blog post, product review, comment	`<article>`
Features, Pricing, FAQ, About	`<section>`
Page header or footer	`<header>` / `<footer>`
Navigation	`<nav>`
Main content area	`<main>`
Sidebar, related posts	`<aside>`
Nothing fits	`<div>`

⚠️ Common Mistakes

Using <section> without a heading. A section without a heading is a <div>. Add an h2 or use div.
Using <article> for content that isn't independent. A "features" list is not an article. It's a section.
Using <div> everywhere out of habit. Semantic elements improve accessibility and SEO. Use them.
Nesting articles inside articles for unrelated content. Nested articles should be logically related (like a comment inside a blog post).
Removing <header> and <footer> from articles. Each article can have its own header and footer for title, date, and author.
Using semantic elements only for styling. The point is meaning. Style with CSS classes, choose elements by meaning.

♿ Accessibility Notes

screen readers announce landmarks. Users can jump to <main>, <nav>, and other landmark regions.
Each <article> is announced as a separate item. Users can navigate from article to article.
Use aria-labelledby to associate sections with their headings. Example: <section aria-labelledby="features-heading"><h2 id="features-heading">.
Headings define the outline. Screen reader users navigate by heading, so every section and article needs proper heading levels.
Do not skip heading levels inside nested structures. An h3 inside an article should be a subheading of the article's h2.

❓ Frequently Asked Questions

What is the difference between section and article?

article is for self-contained content that makes sense on its own (blog post, product review). section is for thematic groupings within a page that usually have a heading. If you could syndicate it via RSS, use article. Otherwise, use section.

When should I use a section?

Use section for a thematic group of content that has a heading — like 'Features', 'Pricing', or 'FAQ'. If the group has no heading, use a div instead.

When should I use an article?

Use article for content that would make sense independently — a blog post, a forum thread, a product review, a news story. Each article should have its own heading.

Can I nest articles inside sections?

Yes. A common pattern is a section containing multiple articles (like a blog list). You can also nest sections inside articles (like sub-sections of a blog post).

Does section and article help SEO?

Yes. These elements help search engines understand content structure. Google can identify the main content, independent articles, and thematic groups. This improves featured snippet eligibility and content indexing.