HTML <main> Tag Tutorial - Usage, Syntax, Attributes and Example

Introduction
Attributes
Frequently Asked Questions(FAQ)

INTRODUCTION

The HTML <main> element represents the dominant content of the <body> of a document. The main content area includes information that is directly relevant to or builds upon the core subject of a document or the primary function of an application.

The content within <main> element should be unique to the document. Elements that are commonly repeated across multiple documents or sections, such as sidebars, navigation menus, copyright details, site logos, and search forms, should be excluded.

Example:


<header>
  <h1>Website Header</h1>
</header>
                        
<main>
  <h2>Welcome to My Website</h2>
  <p>This is the main content area of the webpage.</p>
</main>

Usage Guidelines

Role - The <main> element functions as a main landmark role, allowing assistive technology to quickly recognize and navigate to key sections of a document.
Can Not Include - The <main> element cannot be a descendant of <article>, <aside>, <footer>, <header>, or <nav>.
Unique - You should only have one <main> element per page. Multiple <main> elements can confuse browsers and assistive technologies.
Skip navigation, or "skipnav," is a method that enables assistive technology users to swiftly bypass repetitive content, such as main navigation menus and informational banners. This helps them reach the main content of a webpage more quickly.
The browser's reader mode functionality detects the <main> element, when it transforms content into a streamlined reader view.

Attributes

The <main> element only includes global attribute.

Tag Omission

The HTML <main> element must have both start tag and end tag.

Frequently Asked Questions(FAQ)

What is the use of the <main> tag in HTML?

The <main> element is a semantic HTML5 tag that designates the primary content of a webpage. It encapsulates content that is directly related to or expands upon the central topic of the document or the main functionality of an application.

How many <main> tag can be used in a html document?

You should only have one <main> element per page. Multiple <main> elements can confuse browsers and assistive technologies.

What happens if <main> isn't nested inside <body>?

According to the HTML5 specification, the main element must be a descendant of the body element. Browsers are not designed to expect main outside body. The HTML specification treats this as an error. Different browsers might handle the misplaced main differently. This could lead to inconsistent page layouts or errors.