HTML <main> Tag
The <main> tag is used to define the main content of a web page. The main content includes the central content of the page which is specific to that page only. The main content does not include the navigation links, sidebars, footers or headers. The main content should be unique to the page and should not be a part of the common structure of the page.
Syntax
The syntax of the <main> tag is:
1<main> 2 <!-- Main content of the page --> 3</main>
Examples
Let's take a look at some examples of using the <main> tag.
Example 1: Basic usage
1<!DOCTYPE html> 2<html> 3<head> 4 <title>Example of the main tag</title> 5</head> 6<body> 7 <header> 8 <h1>My Website</h1> 9 <nav> 10 <ul> 11 <li><a href="#">Home</a></li> 12 <li><a href="#">About</a></li> 13 <li><a href="#">Contact</a></li> 14 </ul> 15 </nav> 16 </header> 17 <main> 18 <h2>Welcome to my website</h2> 19 <p>This is the main content of my website.</p> 20 </main> 21 <footer> 22 <p>© 2030 My Website. All rights reserved.</p> 23 </footer> 24</body> 25</html>
In the above example, we have a basic HTML structure with a header, main content and a footer. The main content is enclosed in the <main> tag.
Example 2: Nested tags
1<main> 2 <section> 3 <h2>Section 1</h2> 4 <p>This is the first section of the main content.</p> 5 </section> 6 <section> 7 <h2>Section 2</h2> 8 <p>This is the second section of the main content.</p> 9 </section> 10</main>
In this example, we have used the <section> tag inside the <main> tag. The <section> tag is used to group related content together. The main content is divided into two sections.