<section>

The HTML <section> element is a container used to group related content together, typically with a heading. It is a HTML5 semantic (descriptive) element used to create a generic section of content. It helps organize a page into meaningful parts, making it easier for users and search engines to understand the structure of your content.

💡 Tip: Use <section> when the content forms a self-contained block that could have it's own heading.

Syntax

<h2>Learn Web Development</h2>
<section>
  <h2>HTML <section> element</h2>
  <p>The HTML5 `section` element is used to create a section of related content.</p>
</section>

When to use <section>

• To group together related sections of content (e.g. Chapter, Introduction, Reviews, Features).
• When you would typically add a heading to a section of content.
• For grouping content that shares a common subject or theme.

Basic usage

Here's a simple example of using <section> in a web page:

<main>
  <section>
    <h2>Why choose learn-webdevelopment.com?</h2>
    <p>Huge catalog of free, structured content to learn web development at your own pace.</p>
  </section>
  <section>
    <h2>Our Courses</h2>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Vue.js</li>
      <li>Markdown</li>
    </ul>
  </section>
</main>

<section> vs <div>

The HTML <section> element is designed to be a semantic/descriptive element. It describes the content as a grouped section of related content. The <div> element can also be used to group content, but the element itself has no meaning. It is a non-semantic element and used for layout and styling purposes.

Use <section> when the content is a standalone, meaningful part of your web page.

Accessibility and best practices

• Use a heading (<h1>–<h6>) as the first child element of a <section>. This helps users and screen reader software to understand the content.
• Avoid using <section> just to add styling, instead choose a <div>.
• Only use <section> when the content is related rather than as a generic container.

Styling

The <section> element has no default styling, but you can style it with CSS:

section {
  margin: 2rem 0;
  padding: 1rem;
  background: #ccc;
  border-radius: 5px;
}

Conclusion

The <section> element is ideal for providing struture to a web page. Allowing related content to be grouped together in a logical way. Use it to group related content, along with improving user experience and SEO.