The <section> element represents a thematic grouping of content, while <aside> represents content tangentially related to the main content. Both help organize and structure your page semantically.
The Section Element
Use <section> to group related content together. Each section should typically have a heading.
Basic Section Usage
basic-section.html
<main>
<h1>Complete Guide to Web Development</h1>
<section>
<h2>Introduction</h2>
<p>Web development involves creating websites...</p>
</section>
<section>
<h2>Getting Started</h2>
<p>To begin web development, you need...</p>
</section>
<section>
<h2>Advanced Topics</h2>
<p>Once you master the basics...</p>
</section>
</main>When to Use Section
- Chapters or parts of a document
- Tabbed content sections
- Thematic groupings in articles
- Features on a homepage
Homepage Example
homepage-sections.html
<main>
<!-- Hero section -->
<section>
<h1>Welcome to Our Company</h1>
<p>We provide excellent services worldwide</p>
<button>Get Started</button>
</section>
<!-- Features section -->
<section>
<h2>Our Features</h2>
<div>
<h3>Fast</h3>
<p>Lightning-fast performance</p>
</div>
<div>
<h3>Secure</h3>
<p>Industry-leading security</p>
</div>
<div>
<h3>Reliable</h3>
<p>99.9% uptime guarantee</p>
</div>
</section>
<!-- Testimonials section -->
<section>
<h2>What Our Clients Say</h2>
<blockquote>
<p>"Amazing service!" - John Doe</p>
</blockquote>
</section>
</main>The Aside Element
Use <aside> for content that's indirectly related to the main content—like sidebars, callouts, or related links.
Sidebar Example
sidebar-aside.html
<body>
<main>
<article>
<h1>Understanding JavaScript</h1>
<p>JavaScript is a programming language...</p>
</article>
</main>
<aside>
<h2>Related Articles</h2>
<ul>
<li><a href="/html-basics">HTML Basics</a></li>
<li><a href="/css-guide">CSS Guide</a></li>
<li><a href="/web-dev-tips">Web Dev Tips</a></li>
</ul>
<h2>Popular Tags</h2>
<ul>
<li><a href="/tag/javascript">JavaScript</a></li>
<li><a href="/tag/web-dev">Web Development</a></li>
</ul>
</aside>
</body>Aside Within Article
Aside can also be used for tangential information within an article:
aside-in-article.html
<article>
<h1>The History of the Internet</h1>
<p>The internet began in the 1960s...</p>
<aside>
<h3>Did You Know?</h3>
<p>The first email was sent in 1971 by Ray Tomlinson.</p>
</aside>
<p>As the internet evolved...</p>
</article>Section vs Div
Use section when the content has semantic meaning, div for styling:
section-vs-div.html
<!-- Good: Semantic sections -->
<section>
<h2>About Us</h2>
<p>We are a company...</p>
</section>
<section>
<h2>Our Services</h2>
<p>We offer...</p>
</section>
<!-- Good: Div for layout/styling -->
<div class="container">
<div class="row">
<div class="col">Content</div>
</div>
</div>
<!-- Avoid: Div when section is appropriate -->
<div>
<h2>Products</h2>
<p>Product description...</p>
</div>Complete Page Structure
complete-structure.html
<!DOCTYPE html>
<html lang="en">
<body>
<header>
<h1>Tech Blog</h1>
<nav>
<a href="/">Home</a>
<a href="/blog">Blog</a>
</nav>
</header>
<main>
<article>
<h2>Web Development Best Practices</h2>
<section>
<h3>Clean Code</h3>
<p>Writing clean code is essential...</p>
</section>
<section>
<h3>Performance</h3>
<p>Optimize your website for speed...</p>
<aside>
<p><strong>Tip:</strong> Use lazy loading for images!</p>
</aside>
</section>
<section>
<h3>Accessibility</h3>
<p>Make your site accessible to everyone...</p>
</section>
</article>
</main>
<aside>
<h2>Recent Posts</h2>
<ul>
<li><a href="/post/1">Getting Started with HTML</a></li>
<li><a href="/post/2">CSS Flexbox Guide</a></li>
<li><a href="/post/3">JavaScript Tips</a></li>
</ul>
<section>
<h2>Newsletter</h2>
<p>Subscribe for updates</p>
<form>
<input type="email" placeholder="Your email">
<button type="submit">Subscribe</button>
</form>
</section>
</aside>
<footer>
<p>© 2024 Tech Blog</p>
</footer>
</body>
</html>Best Practices
Always Include Headings in Sections
section-headings.html
<!-- Good: Section with heading -->
<section>
<h2>About Us</h2>
<p>Content...</p>
</section>
<!-- Poor: Section without heading -->
<section>
<p>Content without a heading...</p>
</section>
<!-- If no heading needed, consider using div -->
<div class="content-wrapper">
<p>Content...</p>
</div>Use Aside Appropriately
aside-usage.html
<!-- Good: Related but separate content -->
<article>
<h1>Main Article</h1>
<p>Main content...</p>
<aside>
<h3>Fun Fact</h3>
<p>Additional interesting information...</p>
</aside>
</article>
<!-- Wrong: Using aside for essential content -->
<aside>
<h1>Main Article Title</h1>
<p>This is the primary content...</p>
</aside>Common Patterns
Blog Post Layout
blog-layout.html
<main>
<article>
<h1>Blog Post Title</h1>
<section>
<h2>Introduction</h2>
<p>Post introduction...</p>
</section>
<section>
<h2>Main Content</h2>
<p>Main discussion...</p>
</section>
<section>
<h2>Conclusion</h2>
<p>Summary and wrap-up...</p>
</section>
</article>
</main>
<aside>
<section>
<h2>About the Author</h2>
<p>John Doe is a web developer...</p>
</section>
<section>
<h2>Related Posts</h2>
<ul>
<li><a href="#">Post 1</a></li>
<li><a href="#">Post 2</a></li>
</ul>
</section>
</aside>Key Takeaways
- Use
<section>for thematic groupings of content - Each section should typically have a heading
- Use
<aside>for tangentially related content - Aside is perfect for sidebars and callouts
- Section has semantic meaning, div is for styling
- Aside can be used at page level or within articles
- Don't use section just to wrap content—it should have meaning
- Both elements improve document structure and accessibility
What's Next?
Now that you understand section and aside elements, the next lesson will compare div vs semantic elements, helping you decide when to use generic containers versus semantic markup.