HTML <main> Tag
The <main> tag specifies the main content of an HTML document. It's designed to contain the dominant content that is central to the topic of your page, excluding elements that are common across multiple pages like navigation, sidebars, footers, headers, and logos. Using the <main> tag enhances the semantic structure of your HTML, which is beneficial for search engines, accessibility tools, and developers.
Syntax
<main>
Content of main area
</main>
Attributes
| Attribute | Value | Description |
|---|---|---|
class |
classnames | Specifies one or more class names for styling via CSS. |
id |
id | Specifies a unique id for the main element, for linking or scripting. |
style |
inline styles | Applies inline CSS styles directly to the main element. |
title |
text | Specifies extra information about the element. |
lang |
language_code | Specifies the language of the element's content. |
dir |
ltr or rtl | Specifies the text direction for the element's content. |
accesskey |
character | Defines a keyboard shortcut to activate or focus the element. |
contenteditable |
true or false | Specifies whether the element's content is editable by the user. |
contextmenu |
menu_id | Specifies a context menu for the element. |
draggable |
true or false or auto | Specifies whether the element is draggable. |
dropzone |
copy or move or link | Specifies what happens when an item is dragged and dropped on the element. |
hidden |
hidden | Specifies that the element should be hidden. |
spellcheck |
true or false | Specifies whether the element should have its spelling checked. |
tabindex |
number | Specifies the tab order of the element. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Main Article Title</h2>
<p>This is the primary content of the web page.</p>
<p>It might include text, images, and other relevant elements.</p>
</article>
<section>
<h3>Important Section</h3>
<p> Additional important information</p>
</section>
</main>
<footer>
<p>© 2024 My Website</p>
</footer>
</body>
</html>
More Examples
Example 1: Using <main> with different content types
<main>
<section>
<h2>Blog Post</h2>
<article>
<h3>Article title</h3>
<p>Content of the article </p>
<img src="article.jpg" alt="article image">
</article>
</section>
<aside>
<h3>Related posts</h3>
<ul>
<li><a href="#">Related 1</a></li>
<li><a href="#">Related 2</a></li>
</ul>
</aside>
</main>
In this example, the <main> tag contains a primary section with blog content and a sidebar with related links, demonstrating flexibility in the types of content it can hold.
Example 2: Using id attribute for navigation and scripting
<main id="main-content">
<p>This is my main content.</p>
<a href="#section1">Go to section 1</a>
<section id="section1">
<p>Content of section 1</p>
</section>
</main>
The id attribute can be useful for internal page navigation or for targeting via javascript.
Example 3: Using <main> with multiple semantic elements
<main>
<article>
<h1>Article title</h1>
<p>Article content here.</p>
<figure>
<img src="image.jpg" alt="article image">
<figcaption>Image description</figcaption>
</figure>
<section>
<h2>Section Title</h2>
<p>Section Content</p>
</section>
</article>
</main>
This demonstrates the use of <main> with other semantic elements to structure a full article.
Browser Support
The <main> tag is supported by all modern browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- There should be only one
<main>element in an HTML document. If you need distinct sections use<article>or<section>inside main tag. - Do not include content inside the
<main>tag that is repeated across the site like navigation, headers and footers. - The
<main>element is not intended to be a container for all page content, but specifically for the main content unique to the current page. - Using the
<main>tag improves the accessibility of your webpage by allowing assistive technologies to quickly identify and navigate to the main content. - When combined with other semantic elements, the
<main>tag will significantly improve your site's structure and SEO. - Avoid adding
role="main"to<main>tags as it is implicitly defined.
