Learn how to use the HTML <section> element.
The HTML <section> element is used as a container element to represent individual content sections in a document.
You might have a web page that has multiple sections that show different info about your company. For example:
- Hero section
- Services section
- Team section
- Sponsors section
- Contact us section
Each section can then be encapsulated into self-contained sections, like this:
<section>
<h2>A section 1</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>A section 2</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>A section 3</h2>
<p>...</p>
<img src="" alt="" />
</section>Another use case for the <section> element is inside <article> elements.
Let’s say you have a long form article that discusses multiple topics. For that purpose you can use the <section> element to break your article into different topic sections:
<article>
<h1>Main post title</h1>
<section>
<h2>Topic 1</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>Topic 2</h2>
<p>...</p>
<img src="" alt="" />
</section>
<section>
<h2>Topic 3</h2>
<p>...</p>
<img src="" alt="" />
</section>
</article>You can also put <article> elements inside <section> elements.
Let’s say you have section on your front page where you display a list of article cards that each contain a link to individual posts:
<section>
<h2>Check out our latest blog posts</h2>
<article>
<a href="/path-to-blog-post-1">
<h3>Blog post 1</h3>
</a>
</article>
<article>
<a href="/path-to-blog-post-2">
<h3>Blog post 2</h3>
</a>
</article>
<article>
<a href="/path-to-blog-post-3">
<h3>Blog post 3</h3>
</a>
</article>
</section>The <section> tag is one of many HTML tags used to define container elements. Some of the most commonly used HTML container elements are:
<article> , <main> , <header>, <footer>,<form>, and <div> , (which is a generic tag that we use if none of the other tags apply).
