HTML `<main>` Element: Structuring the Primary Content of Your Web Pages

Learn how to use the HTML `<main>` element to semantically define the primary content of your web pages. This tutorial explains its purpose, usage guidelines, and benefits for SEO and accessibility, emphasizing its importance for creating well-structured and user-friendly websites.

Using the HTML `<main>` Element to Define Main Content

Understanding the `<main>` Element

The HTML `<main>` element is a semantic element that specifies the main content of an HTML document. This helps to improve both the structure and accessibility of your HTML. It's a container for the dominant content of the page—the central information the user is looking for. While the `<main>` element itself doesn't directly impact the visual appearance of the content, it’s crucial for organizing your content logically and clarifying the page's primary focus. Search engines and assistive technologies benefit from the improved structure that results from the use of semantic elements.

Using the `<main>` Element

The `<main>` element should contain the page's core content, excluding elements such as headers, footers, navigation, sidebars, etc. There should only be one `<main>` element per page.

<main>
  <h1>Main Heading</h1>
  <p>Main content of the page.</p>
</main>

Browser Support for `<main>`

The `<main>` element is widely supported by all major modern browsers.

Styling the `<main>` Element with CSS

You can use CSS (Cascading Style Sheets) to control the `<main>` element's visual appearance. For instance:

main {
  padding: 20px;
  background-color: #f0f0f0;
}

Most browsers render the `<main>` element as a block-level element by default.