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