Skip to main content

HTML5 Main Element (Live Playground)

Introduction​

The <main> element in HTML5 is a semantic element used to define the main content area of a web page, which contains the primary content that is unique to the page. In this tutorial, you will learn how to use the <main> element to create well-structured and accessible web pages, including common use cases and best practices.

Using the <main> Element​

The <main> element should be used to wrap the primary content of a web page, excluding content that is repeated across multiple pages, such as headers, footers, and navigation menus. By using the <main> element, you help search engines and assistive technologies like screen readers to identify the main content of the page.

Here's an example of using the <main> element to create a simple web page structure:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTML5 Main Example</title>
  </head>
  <body>
    <header>
      <h1>My Website</h1>
      <nav>
        <!-- Navigation menu -->
      </nav>
    </header>
    <main>
      <h2>Welcome to My Website</h2>
      <p>This is the main content area of the page.</p>
      <!-- More content -->
    </main>
    <footer>
      <!-- Footer content -->
    </footer>
  </body>
</html>

In this example, the <main> element is used to wrap the primary content of the page, which includes an <h2> heading and a paragraph. The header, navigation, and footer are placed outside the <main> element.

Live Playground, Try it Yourself

Best Practices​

When using the <main> element, consider the following best practices:

  1. Use the <main> element to define the primary content area of a web page, excluding content that is repeated across multiple pages, such as headers, footers, and navigation menus.

  2. Use the <main> element only once per page to clearly indicate the main content area.

  3. Use the <main> element in combination with other semantic elements to create a well-structured and accessible web page. For example, use the <header> and <footer> elements for the header and footer, and the <section>, <article>, and <aside> elements for content sections and sidebars.

  4. Make your content accessible by providing meaningful and descriptive headings within the <main> element. This helps screen reader users and search engines understand the structure of your content.

Conclusion​

The <main> element is an essential part of HTML5, allowing you to create well-structured and accessible web pages by defining the primary content area. By understanding its purpose and how to use it effectively, you can create websites that are both user-friendly and optimized for search engines.

Remember that the key to mastering HTML5 and semantic elements is practice and patience. Keep building web pages, incorporating these semantic elements, and experimenting with different layouts and designs. As you gain experience, you'll develop a better understanding of how and when to use each element to create accessible and well-structured web content.