Problem Statement
When should you use <section> instead of <div>?
Explanation
Use the section element for thematic groupings of content that typically have a heading. A section represents a standalone section of content with a common theme. If you cannot identify a clear theme or heading, use div instead. Sections are appropriate for chapters, tabbed content areas, or distinct portions of an article. They help structure documents semantically. Each section should ideally have a heading that describes its theme. If you are using section just for styling or JavaScript hooks without semantic meaning, use div instead. The section element improves document outline and helps assistive technologies understand content structure. It is more specific than div but more general than article.
Code Solution
SolutionRead Only
<!-- Appropriate section usage -->
<article>
<h1>Complete Guide to HTML</h1>
<section>
<h2>Introduction</h2>
<p>HTML is...</p>
</section>
<section>
<h2>Basic Tags</h2>
<p>The basic tags include...</p>
</section>
<section>
<h2>Advanced Concepts</h2>
<p>Advanced HTML includes...</p>
</section>
</article>
<!-- Use div when no semantic meaning -->
<div class="container">
<!-- Just for styling/layout -->
<div class="row">
<div class="column">Content</div>
</div>
</div>
<!-- Sections with clear themes -->
<main>
<section>
<h2>Features</h2>
<p>Our product features...</p>
</section>
<section>
<h2>Pricing</h2>
<p>Our pricing plans...</p>
</section>
<section>
<h2>Testimonials</h2>
<p>What customers say...</p>
</section>
</main>