main element

Intro

The <main> element wraps around the main content of a web page. The main content of a web page means the content that is unique on the page that isn’t shared with other pages.

Elements that are repeated across multiple web pages, such as navigation menus and footers, should not be included inside the <main> element.

Generally speaking, you should only have one <main> element per web page.

Steps

Create main element

To create the <main> element, type main and then press Tab. Then press Enter to create a blank line in between the tags.

<main>

</main>

Create heading element

Inside the <main> element, type h1 and press Tab to create the heading element. Inside the <h1> tags you can type Business Name.

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

The <h1> element is usually unique on each page, so that’s why it goes inside the <main> element.

If you check the preview, you should see a heading appear with big and bold letters. There are other elements we can put inside the <main> element, but before we create them, we need to learn about the <section> element in our next lesson.

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>
</main>