HTML <main> Element
The HTML <main> element represents the primary content of a document's <body>. It contains the content that is directly related to the page's main purpose and generally excludes repeated content such as site-wide navigation, headers, sidebars, and footers.
Syntax
<main>
<h1>HTML Tutorial</h1>
<p>Learn how to create web pages using HTML.</p>
</main>The <main> element requires both an opening and closing tag. Its contents should represent the central topic or primary functionality of the page.
Attributes
The <main> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses <main> to contain the primary content of a web page while the site header and footer remain outside the element.
Usage Notes
Use the <main> element for content that is unique to the page and directly related to its primary purpose. Examples include an article, tutorial, product information, search results, or the central functionality of a web application.
Content repeated across multiple pages, such as a site logo, primary navigation, copyright information, and other site-wide material, generally belongs outside <main>.
A document should not have more than one visible <main> element at the same time. Multiple <main> elements can exist when all except one are hidden, such as when different application views are stored in the same document.
The <main> element must not be a descendant of <article>, <aside>, <footer>, <header>, or <nav>.
The <main> element does not create a visible layout by itself. Use CSS when the main content requires specific widths, spacing, positioning, or other visual presentation.
Accessibility
The <main> element identifies the page's primary content as a main landmark, allowing users of assistive technologies to navigate directly to the central content without moving through repeated site-wide material first.
Use a single visible <main> landmark for the page's primary content so its purpose remains clear when navigating by landmarks.
A skip link near the beginning of a page can point to an id on the <main> element, allowing keyboard users to bypass repeated navigation and move directly to the primary content.
Use headings within the main content to provide a clear content hierarchy. The <main> element identifies the primary region, while headings describe and organize the information within it.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <main> Element .
Related Elements
<body> - Contains the document content displayed in the browser.
<header> - Represents introductory content for a page or section.
<nav> - Represents a section containing major navigation links.
<article> - Represents a self-contained composition within a document.
<section> - Represents a thematic section of content.
<aside> - Represents content indirectly related to the surrounding content.
<footer> - Represents footer information for a page or section.