- Element of
- HTML Document Structure Before And After HTML5 – Here’s What Changed
- What does
<main> HTML Tagdo?
- 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.
- semantic | structural
Structuring Your HTML Document
<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.
<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
<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
<body> has a broader scope, and encapsulates the navigation, content, sidebars and footer. As such, it has different styling implications.
Browser Support for main