HTML Sectioning Elements Section Element
Example
The <section> element represents a generic section to thematically group content. Every section, typically, should be able to be identified with a heading element as a child of the section.
- You can use the
<section>element within an<article>and vice-versa. - Every section should have a theme (a heading element identifying this region)
- Don't use the
<section>element as a general styling 'container'.
If you need a container to apply styling, use a<div>instead.
In the following example, we're displaying a single blog post with multiple chapters each chapter is a section (a set of thematically grouped content, which can be identified by the heading elements in each section).
<article>
<header>
<h2>Blog Post</h2>
</header>
<p>An introduction for the post.</p>
<section>
<h3>Chapter 1</h3>
<p>...</p>
</section>
<section>
<h3>Chapter 2</h3>
<p>...</p>
</section>
<section>
<h3>Comments</h3> ...
</section>
</article>
Notes:
Developers should use the article element when it makes sense to syndicate the contents of the element.
Click here to read the official HTML5 Specification for the <main> element
