Chapter 16 Beginner 7 min read Semantic HTML

Article, Section & Aside

These three semantic elements help organise page content clearly for browsers, search engines and screen readers.

🎯 What you'll learn

✓Use <article> for self-contained content

✓Use <section> to group thematic content

✓Use <aside> for sidebars

✓Know when to choose each element

Google Ad — 728×90 Leaderboard

Introduction to Article, Section & Aside

This chapter covers Article, Section & Aside in depth. Understanding this topic is essential for writing clean, modern HTML. Use the live editor below to experiment as you read.

💡 In This Chapter

You will see real code examples, clear explanations, and a live editor to practice immediately — no setup needed.

Article

Self-contained content.

HTML

<article>
  <h2>Blog Post Title</h2>
  <p>Blog post content here…</p>
</article>

Section & Aside

Grouped content.

HTML

<section>
  <h2>Services</h2>
  <p>Our services…</p>
</section>
<aside>
  <p>Related links</p>
</aside>

Try It Yourself

Edit the code below and click ▶ Run to see your changes live.

Live Editor

✎ Editor

👁 Preview

❓ Quick Check — Chapter 16

Which element is best for related content that is separate from the main content?

📄 Chapter Summary

Use <article> for self-contained content
Use <section> to group thematic content
Use <aside> for sidebars
Know when to choose each element

Google Ad — 300×250 Medium Rectangle

◀PreviousHeader, Nav, Footer Next ChapterAccessibility & ARIA▶