How to use the HTML <section> Element

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).


Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊

Kofi

Share & Discuss on