Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Podia.

section element – HTML

Demo

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>

Exercises

Recreate the embedded CodePen demo by typing out the HTML code in your index.html file.

References

section element on MDN

Lesson tags: Open Lesson
Back to: HTML Reference > HTML Body Elements