HTML Free Codes<main>
Specifies the main content of a document
✨ HTML5Definition and Usage
The <main> element specifies the main content of a document.
The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
<main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
<main> element provides a landmark role that helps screen reader users navigate directly to the main content of the page.
Browser Support
The numbers in the table specify the first browser version that fully supports the element:
Attributes
The <main> tag supports the Global Attributes in HTML.
The <main> tag also supports the Event Attributes in HTML.
Examples
Basic Main Element
A simple example using the <main> element:
Example
<body>
<header>
<h1>My Website</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<h2>Welcome to Our Website</h2>
<p>This is the main content of the page.</p>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>Main with Article and Section
Combine <main> with other semantic elements:
Example
<main>
<article>
<h2>Blog Post Title</h2>
<p>Published on January 15, 2025</p>
<section>
<h3>Introduction</h3>
<p>This is the introduction to the blog post...</p>
</section>
<section>
<h3>Main Content</h3>
<p>This is the main content of the blog post...</p>
</section>
</article>
</main>Skip Navigation Links
Use <main> as a skip link target for accessibility:
Example
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<nav>
<!-- Navigation with many links -->
</nav>
</header>
<main id="main-content">
<h1>Main Content Starts Here</h1>
<p>Users can jump directly to this content.</p>
</main>
</body>Main with Aside
Proper structure with main content and sidebar:
Example
<body>
<header>
<h1>My Blog</h1>
</header>
<div class="container">
<main>
<article>
<h2>Latest Post</h2>
<p>This is the main content...</p>
</article>
</main>
<aside>
<h3>Popular Posts</h3>
<ul>
<li><a href="#">Post 1</a></li>
<li><a href="#">Post 2</a></li>
</ul>
</aside>
</div>
</body>Complete Page Structure
Full semantic HTML5 page structure:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML Page</title>
</head>
<body>
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>Welcome</h2>
<p>Welcome to our website!</p>
</section>
<section id="about">
<h2>About Us</h2>
<p>Learn more about our company.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<p>We offer various services.</p>
</section>
</main>
<footer>
<p>© 2025 Company Name. All rights reserved.</p>
</footer>
</body>
</html>Main with Multiple Articles
Blog listing page structure:
Example
<main>
<h1>Recent Blog Posts</h1>
<article>
<h2>Understanding HTML5 Semantic Elements</h2>
<p>Learn about semantic HTML...</p>
<a href="post1.html">Read more</a>
</article>
<article>
<h2>CSS Grid Layout Guide</h2>
<p>Master CSS Grid layout...</p>
<a href="post2.html">Read more</a>
</article>
<article>
<h2>JavaScript ES6 Features</h2>
<p>Explore modern JavaScript...</p>
<a href="post3.html">Read more</a>
</article>
</main>Semantic HTML Structure
The <main> element is part of HTML5's semantic structure that improves document organization:
- <header>: Introductory content or navigation
- <nav>: Navigation links
- <main>: Main content (unique to the document)
- <aside>: Sidebar content related to main content
- <footer>: Footer information
Accessibility Benefits
The <main> element provides significant accessibility improvements:
- Landmark Role: Automatically provides a
role="main"landmark for assistive technologies - Screen Readers: Users can quickly navigate to the main content using keyboard shortcuts
- Skip Navigation: Enables "skip to main content" functionality for keyboard users
- Document Structure: Helps assistive technologies understand page organization
- Better UX: Improves navigation for users with disabilities
<main> element helps meet Web Content Accessibility Guidelines (WCAG) 2.1 success criteria for page structure.
Main vs Article vs Section
| Element | Purpose | Usage | Multiple Allowed? |
|---|---|---|---|
| <main> | Dominant content of the page | Main content unique to the document | No - Only one per page |
| <article> | Self-contained content | Blog posts, news articles, forum posts | Yes - Multiple allowed |
| <section> | Thematic grouping | Chapters, tabbed content, sections | Yes - Multiple allowed |
Best Practices
- One Per Page: Use only one
<main>element per document - Direct Child of Body: The
<main>element should typically be a direct child of<body> - Not Nested: Don't place
<main>inside<article>,<aside>,<footer>,<header>, or<nav> - Unique Content: Only include content that is unique to the page (not repeated on other pages)
- Skip Links: Use an id attribute to create skip navigation links
- No Repeated Content: Don't include site-wide navigation, logos, search forms, or copyright information inside
<main> - SEO Benefits: Search engines better understand your page structure and main content
<main> elements on the same page. If you need to group multiple pieces of content, use <article> or <section> inside a single <main> element.
Try it Yourself
Interactive Example
This page itself uses the <main> element! The content you're reading right now is inside the <main> tag, while the header, sidebar, and footer are outside of it.
<main id="main-content">
<article class="lesson-content">
<!-- This content you're reading -->
</article>
</main>
Default CSS Settings
Most browsers will display the <main> element with the following default values:
Default CSS
main {
display: block;
}