section element – HTML

Summary

<h1>My Business</h1>

<section>
  <h2>About Us</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>

Details

The section element is used to wrap around a distinct section of HTML code in your web page. It generally includes a heading element as the first child, as in the example above. It does not change the way your page looks, but is used to help search engines understand your HTML code better and help people who use screen readers navigate your site.

If there is a more specific element that can be used to wrap around a portion of your code (like a nav element), then you don’t have to use the section element in that case.

In the example below, the first section element is used to wrap around an About section. A second section element is used to wrap around around a Contact section.

  <main>
    <h1>ACME Inc.</h1>

    <section>
      <h2>About Us</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </section>

    <section>
      <h2>Contact Us</h2>
      <address>
        <a href="mailto:john@example.com">john@example.com</a><br>
        <a href="tel:+15555551234">(555) 555-1234</a><br>
        ACME Inc.<br>
        5555 Main St<br>
        Los Angeles, CA 55555<br>
      </address>
    </section>
  </main>

Demo

References

section element on MDN