HTML5 Mastery: The Complete Web Foundation
HomeInsightsCoursesHTMLContent Sections (section, article, aside)
Semantic HTML5

Content Sections (section, article, aside)

Master the semantic elements for organizing content. Learn when to use section vs article, how to structure complex layouts, and create accessible content hierarchies.

The <section> Element

A thematic grouping of content, typically with a heading. Use when content forms a distinct section.

HTML
<article>
    <h1>Complete Guide to HTML</h1>
    
    <section>
        <h2>Introduction</h2>
        <p>HTML is the foundation of web development...</p>
    </section>
    
    <section>
        <h2>Getting Started</h2>
        <p>To begin with HTML, you need...</p>
    </section>
    
    <section>
        <h2>Advanced Topics</h2>
        <p>Once you master the basics...</p>
    </section>
</article>

<!-- Each section is a themed part of the article --&gt;

When to Use <section>

  • ✅ Grouping related content with a common theme
  • ✅ When content would appear in document outline
  • ✅ Chapters of a book or tabs in a UI
  • ✅ Different areas of a news homepage
  • ❌ NOT for styling purposes (use div)
  • ❌ NOT when article or aside is more appropriate

The <article> Element

Self-contained, independently distributable content that makes sense on its own.

HTML
<main>
    <article>
        <header>
            <h2>Blog Post Title</h2>
            <p>Posted on <time datetime="2024-12-31">Dec 31, 2024</time></p>
            <p>By <a href="/author">John Doe</a></p>
        </header>
        
        <p>Article content goes here...</p>
        
        <footer>
            <p>Tags: <a href="/tag/html">HTML</a>, <a href="/tag/web">Web</a></p>
        </footer>
    </article>
    
    <article>
        <h2>Another Blog Post</h2>
        <p>More content...</p>
    </article>
</main>

<!-- Each article can stand alone independently --&gt;

When to Use <article>

  • ✅ Blog posts or news articles
  • ✅ Forum posts
  • ✅ User comments
  • ✅ Product cards
  • ✅ Social media posts
  • ✅ Widget or gadget

The "Syndication Test"

Ask: Would this content make sense if distributed via RSS or shown on another site?

  • ✅ Yes → Use <article>
  • ❌ No → Use <section> or <div>

Section vs Article

<section>

  • Purpose: Thematic grouping
  • Context: Part of something larger
  • Independent: No
  • Example: Chapter in a book

<article>

  • Purpose: Complete composition
  • Context: Standalone content
  • Independent: Yes
  • Example: Entire blog post
Section INSIDE Article
HTML
<article>
    <h1>Complete HTML Guide</h1>
    
    <section>
        <h2>Chapter 1: Basics</h2>
        <p>Content...</p>
    </section>
    
    <section>
        <h2>Chapter 2: Advanced</h2>
        <p>Content...</p>
    </section>
</article>

<!-- Article contains thematic sections --&gt;
Article INSIDE Section
HTML
<section>
    <h2>Latest News</h2>
    
    <article>
        <h3>News Story 1</h3>
        <p>Content...</p>
    </article>
    
    <article>
        <h3>News Story 2</h3>
        <p>Content...</p>
    </article>
</section>

<!-- Section groups related articles --&gt;

The <aside> Element

Content tangentially related to main content, like a sidebar or callout.

HTML
<main>
    <article>
        <h1>Main Article Content</h1>
        <p>Article text...</p>
        
        <!-- Aside within article --&gt;
        <aside>
            <h3>Related Info</h3>
            <p>Additional context...</p>
        </aside>
    </article>
    
    <!-- Page-level aside (sidebar) --&gt;
    <aside>
        <h2>About the Author</h2>
        <p>Author bio...</p>
        
        <h2>Related Articles</h2>
        <ul>
            <li><a href="/article1">Article 1</a></li>
            <li><a href="/article2">Article 2</a></li>
        </ul>
    </aside>
</main>

Common Uses for <aside>

  • Sidebars
  • Pull quotes
  • Glossary definitions
  • Related links
  • Advertisements (when related to content)
  • Author bios
  • "Fun facts" boxes

Complete Page Structure Example

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>News Website</title>
</head>
<body>
    <header>
        <h1>Tech News Daily</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/tech">Tech</a>
            <a href="/business">Business</a>
        </nav>
    </header>
    
    <main>
        <!-- Featured articles section --&gt;
        <section>
            <h2>Featured Stories</h2>
            
            <article>
                <header>
                    <h3>AI Breakthrough Announced</h3>
                    <p>By Jane Smith on <time datetime="2024-12-31">Dec 31, 2024</time></p>
                </header>
                
                <p>Scientists have announced...</p>
                
                <aside>
                    <h4>Key Terms</h4>
                    <dl>
                        <dt>Machine Learning</dt>
                        <dd>A subset of AI...</dd>
                    </dl>
                </aside>
                
                <footer>
                    <p>Filed under: <a href="/category/ai">AI</a></p>
                </footer>
            </article>
            
            <article>
                <h3>New Smartphone Released</h3>
                <p>Tech company XYZ...</p>
            </article>
        </section>
        
        <!-- Latest updates section --&gt;
        <section>
            <h2>Latest Updates</h2>
            
            <article>
                <h3>Quick Update 1</h3>
                <p>Short news item...</p>
            </article>
            
            <article>
                <h3>Quick Update 2</h3>
                <p>Another short item...</p>
            </article>
        </section>
        
        <!-- Sidebar --&gt;
        <aside>
            <section>
                <h2>Trending Topics</h2>
                <ul>
                    <li><a href="/topic/ai">Artificial Intelligence</a></li>
                    <li><a href="/topic/crypto">Cryptocurrency</a></li>
                </ul>
            </section>
            
            <section>
                <h2>Newsletter</h2>
                <form>
                    <input type="email" placeholder="Your email">
                    <button>Subscribe</button>
                </form>
            </section>
        </aside>
    </main>
    
    <footer>
        <p>&copy; 2024 Tech News Daily</p>
        <nav>
            <a href="/about">About</a>
            <a href="/contact">Contact</a>
            <a href="/privacy">Privacy</a>
        </nav>
    </footer>
</body>
</html>

Nested Articles

Articles can be nested when representing comments, replies, or related content.

HTML
<article>
    <h2>Blog Post Title</h2>
    <p>Main blog post content...</p>
    
    <section>
        <h3>Comments</h3>
        
        <!-- Comment as nested article --&gt;
        <article>
            <header>
                <h4>John Doe says:</h4>
                <time datetime="2024-12-31">Dec 31, 2024</time>
            </header>
            <p>Great article! I learned...</p>
            
            <!-- Reply as nested article --&gt;
            <article>
                <header>
                    <h5>Author replies:</h5>
                </header>
                <p>Thank you for the feedback...</p>
            </article>
        </article>
        
        <article>
            <header>
                <h4>Jane Smith says:</h4>
            </header>
            <p>Another comment...</p>
        </article>
    </section>
</article>

Accessibility Considerations

Always Include Headings

✅ Good: Section with Heading
HTML
<section>
    <h2>Related Products</h2>
    <ul>
        <li>Product 1</li>
        <li>Product 2</li>
    </ul>
</section>
❌ Bad: Section without Heading
HTML
<section>
    <!-- No heading! Screen readers struggle --&gt;
    <ul>
        <li>Product 1</li>
        <li>Product 2</li>
    </ul>
</section>

ARIA Labels for Regions

HTML
<!-- Label sections without visible headings --&gt;
<section aria-label="User profile">
    <!-- Content --&gt;
</section>

<!-- Or use aria-labelledby --&gt;
<section aria-labelledby="products-heading">
    <h2 id="products-heading">Our Products</h2>
    <!-- Content --&gt;
</section>

Common Patterns

Blog Layout

HTML
<main>
    <!-- Blog posts --&gt;
    <section>
        <h2>Recent Posts</h2>
        <article>Blog post 1</article>
        <article>Blog post 2</article>
        <article>Blog post 3</article>
    </section>
    
    <!-- Sidebar --&gt;
    <aside>
        <section>Categories</section>
        <section>Archives</section>
    </aside>
</main>

Product Catalog

HTML
<main>
    <section>
        <h2>Featured Products</h2>
        <article>Product 1</article>
        <article>Product 2</article>
    </section>
    
    <section>
        <h2>On Sale</h2>
        <article>Product 3</article>
        <article>Product 4</article>
    </section>
</main>

Dashboard

HTML
<main>
    <section>
        <h2>Statistics</h2>
        <!-- Stats widgets --&gt;
    </section>
    
    <section>
        <h2>Recent Activity</h2>
        <article>Activity 1</article>
        <article>Activity 2</article>
    </section>
    
    <aside>
        <h2>Quick Actions</h2>
        <!-- Action buttons --&gt;
    </aside>
</main>

Best Practices

✅ Do

  • Use section for thematic groupings
  • Use article for standalone content
  • Always include headings in sections
  • Nest appropriately (articles in sections, etc.)
  • Use aside for tangential content
  • Test with screen readers
  • Maintain logical heading hierarchy

❌ Don't

  • Use section/article for styling only
  • Create sections without headings
  • Use article for non-independent content
  • Overuse - sometimes div is fine
  • Forget accessibility
  • Confuse section and article
  • Nest excessively without reason

What's Next?

Learn about ARIA roles and attributes for enhanced accessibility.

Next: ARIA Basics →