New in HTML5.

<main> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
HTML Document Structure Before And After HTML5 – Here’s What Changed
What does <main> HTML Tag do?
The <main> element is used to denote the content of a webpage that relates to the central topic of that page or application. It should include content that is unique to that page and should not include content that is duplicated across multiple webpages, such as headers, footers, and primary navigation elements.
Display
inline
Usage
semantic | structural

Structuring Your HTML Document

The <main> element is a structural and semantic element that defines the main section of a page where the content appears. Similar elements include <article>, which denotes an article within an HTML file, and <aside>, which describes a note or comment. The <main> section is also useful when non-standard devices, such as screen readers, interpret the content of your page. It allows the screen reading device to detect and find the important content rapidly, while it skips over the code at the top of the file. <main> is one of 9 structural tags that were introduced in the HTML 5 specification.

Usage

The <main> element can only be used once in each HTML file. It is followed by a closing tag, </main>, which should be placed at the end of the content. Both tags must be used outside other structural elements such as <head> and its closing tag, and <footer> and its closing tag. They cannot overlap them, or sit within them.

Correct Definitions Within Your Page

<main> was preceded by a similar element, <body>. These two elements have distinct purposes in HTML. To get the usage right, refer back to the original definitions as provided by W3C. <main> “represents the main content of the body of a document or application”, while <body> “represents the content of the document”

. For a clearer understanding, consider the way you’ll style <main> and <body> using CSS. <main> should encapsulate all of the substance of the page – like your blog posts or other content. Think of it as a direct replacement for <div id="content">. <body> has a broader scope, and encapsulates the navigation, content, sidebars and footer. As such, it has different styling implications.

Claire is seasoned technical writer, editor, and HTML enthusiast. She writes for HTML.com and runs a content agency, Red Robot Media.

Browser Support for main

iefirefoxchromeedgesafariopera
12212613716