section element

Intro

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

Steps

Create section element

Here is the code from the last lesson. The only difference is I added 2 blank lines underneath the <h1> element.

<main>
  <h1>Business Name</h1>


</main>

On the 2nd blank line, type section and press Tab to create the section element. Then press Enter to create a blank line in between the tags.

<main>
  <h1>Business Name</h1>

  <section>

  </section>
</main>

Add other elements

The first section will be an About section (I know this is a bit redundant since there’s also an About page, but we can think of this as a shorter version of the About page).

Remember, usually the first element in a <section> element is a heading element. So type h2 inside the <section> element and press Tab. Then type About inside the tags.

<section>
  <h2>About</h2>
</section>

If you check the preview, you should see the heading appear.

After the <h2> element, type p and press Tab. Then type lorem inside the <p> element and press Tab to generate a sample paragraph (I shortened it here to make the snippet easier to read).

<section>
  <h2>About</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</section>

If you check the preview, you should see the paragraph appear.

Create another section

Try creating another section underneath the first one following the steps from above. I made the second one a Services section.

<section>
  <h2>About</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</section>

<section>
  <h2>Services</h2>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
</section>

Please note that the <main> and <section> elements won’t change how the content inside them looks. It’s just used to group related elements together.

Final code

If you’ve followed all of the steps so far, this is the code that should be in between the body tags.

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

<main>
  <h1>Business Name</h1>

  <section>
    <h2>About</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
  </section>

  <section>
    <h2>Services</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
  </section>
</main>