HTML5 introduced a variety of new semantic elements to improve the structure and readability of web pages. One such element is the <main> tag. In this blog post, we’ll explore the purpose of the HTML <main> tag, its usage, and best practices to ensure your web pages are well-structured and accessible.
The Purpose and Functionality of the <main> Tag
What is the <main> Tag?
The <main> tag in HTML is a semantic element that represents the main content of a web page. It should be used to wrap the primary content of your web page, excluding headers, footers, sidebars, and other elements that appear on multiple pages of your website. The purpose of the <main> tag is to help search engines and assistive technologies, such as screen readers, understand the structure of your web page and easily identify its primary content.
As a semantic element, the <main> tag does not have any default styling associated with it. However, you can apply custom styles using CSS to improve the visual appearance of your main content.
How to Use the <main> Tag
To use the <main> tag, simply wrap your main content with the <main> element. Here’s a basic example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
<h2>Main Content</h2>
<p>This is the main content of my web page.</p>
</main>
<footer>
<p>Copyright © 2023 My Website</p>
</footer>
</body>
</html>
In this example, the <main> tag wraps the primary content of the web page, while the <header> and <footer> elements define the header and footer sections, respectively.
Best Practices for Using the <main> Tag
When using the <main> tag, it’s essential to follow these best practices to ensure your web pages are well-structured and accessible:
- Use only one <main> element per page: Each web page should have only one <main> element to avoid confusion for search engines and assistive technologies.
- Exclude repeated content: The <main> tag should only contain the primary content of your web page. Elements like headers, footers, and sidebars should not be included within the <main> element.
- Add the “main” ARIA role: To enhance accessibility for screen readers, you can add the “main” ARIA (Accessible Rich Internet Applications) role to the <main> element. This provides additional information for assistive technologies about the purpose of the <main> tag:
<main role="main">
<h2>Main Content</h2>
<p>This is the main content of my web page.</p>
</main>
By following these best practices, you’ll ensure that your web pages are well-structured, accessible, and easily understood by search engines and assistive technologies.
Internal and External Resources for Further Reading
To learn more about HTML semantic elements, accessibility, and best practices, consider exploring the following resources:
- Mastering JavaScript: A Comprehensive Guide to DOM Manipulation and Event Handling for Interactive Websites
- Powerful Python Tips: Web Scraping
- Codabase.io HTML Category
- MDN Web Docs: <main>: The Main Content Element
- W3C HTML5.2 Specification: The <main> element
By understanding the purpose and functionality of the <main> tag and following the best practices outlined in this blog post, you’ll be able to create well-structured, accessible web pages that are easy to navigate and provide a great user experience.
