Creating a Main Content Container in HTML

Introduction

In HTML, the <main> tag is used to represent the main or dominant content of the document. It is a newly introduced tag in HTML5 and is typically written within the <body> tag. The content of the <main> tag should be unique and directly related to the central topic of the document. It is a similar concept to a landmark, which quickly identifies and makes navigation easier in a large document.

In this lab, we will learn how to use the <main> tag to create a main content container in HTML.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/para_br("`Paragraphs and Line Breaks`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") html/LayoutandSectioningGroup -.-> html/layout("`Layout Elements`") html/LayoutandSectioningGroup -.-> html/nav_links("`Navigation and Links`") subgraph Lab Skills html/basic_elems -.-> lab-70792{{"`HTML Main Content`"}} html/head_elems -.-> lab-70792{{"`HTML Main Content`"}} html/text_head -.-> lab-70792{{"`HTML Main Content`"}} html/para_br -.-> lab-70792{{"`HTML Main Content`"}} html/lists_desc -.-> lab-70792{{"`HTML Main Content`"}} html/layout -.-> lab-70792{{"`HTML Main Content`"}} html/nav_links -.-> lab-70792{{"`HTML Main Content`"}} end

Setting up the HTML file

Create a new file and name it index.html. Open it in your preferred code editor.

In the <head> section of the HTML file, add the following code:

<!doctype html>
<html>
  <head>
    <title>Creating a Main Content Container in HTML</title>
  </head>
  <body></body>
</html>

To make our web page look complete, we'll add a header and footer.

Add the following code between the <body> tags of your HTML file:

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</header>

<main>
  <p>Welcome to my website. This is the main content area.</p>
</main>

<footer>
  <p>&copy;2021 My Website. All rights reserved.</p>
</footer>

The above code defines a header with a navigation menu, a <main> tag, and a footer.

Adding Content to the Main Tag

Now that we have set up our header and footer, we can add content to the main tag.

Add the following code in between the <main> tags:

<main>
  <h2>About Us</h2>
  <p>
    We are a company that specializes in web development services. Our team
    consists of experienced web developers who can help you create a website
    that will help your business grow.
  </p>
  <h2>Our Services</h2>
  <ul>
    <li>Web Design</li>
    <li>Web Development</li>
    <li>Search Engine Optimization</li>
    <li>Social Media Marketing</li>
  </ul>
  <h2>Our Portfolio</h2>
  <p>Here are some of the websites we have created:</p>
  <ul>
    <li><a href="#">Website 1</a></li>
    <li><a href="#">Website 2</a></li>
    <li><a href="#">Website 3</a></li>
  </ul>
</main>

Reviewing the Final HTML Code

After adding the main content area, your HTML code should look like this:

<!doctype html>
<html>
  <head>
    <title>Creating a Main Content Container in HTML</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h2>About Us</h2>
      <p>
        We are a company that specializes in web development services. Our team
        consists of experienced web developers who can help you create a website
        that will help your business grow.
      </p>
      <h2>Our Services</h2>
      <ul>
        <li>Web Design</li>
        <li>Web Development</li>
        <li>Search Engine Optimization</li>
        <li>Social Media Marketing</li>
      </ul>
      <h2>Our Portfolio</h2>
      <p>Here are some of the websites we have created:</p>
      <ul>
        <li><a href="#">Website 1</a></li>
        <li><a href="#">Website 2</a></li>
        <li><a href="#">Website 3</a></li>
      </ul>
    </main>

    <footer>
      <p>&copy;2021 My Website. All rights reserved.</p>
    </footer>
  </body>
</html>

Summary

In this lab, we learned how to use the <main> tag to create a main content container in an HTML document. We created a header, main content area, and footer with sample contents. Remember that the content of the <main> tag should be unique and directly related to the central topic of the document. By using the <main> tag, we can create an easily identifiable section of the website that will help users navigate with ease.

HTML Main Content