<section>
A thematic grouping of content with a heading — a chapter of the current page.
Baseline: Widely available · Sectioning & landmarks
When to use it
When content forms a titled chunk of a larger whole; bind it to its heading with aria-labelledby.
When not to
A section without a heading is a smell — use div for pure grouping, or restructure.
Key attributes
aria-labelledby- points at the section's heading id
Example
Method
Mix, rest, bake.
<section aria-labelledby='method-h'>
<h2 id='method-h'>Method</h2>
<p>Mix, rest, bake.</p>
</section>