Objectives
- Understand the purpose and significance of the <main> element in HTML.
- Learn how to properly implement the <main> element in a web document.
- Explore best practices for using the <main> element to improve accessibility and SEO.
- Practice identifying the appropriate content to include within the <main> element.
Introduction to the <main> Element
The <main> element in HTML5 is designed to represent the dominant content of the <body> of a document. It is intended to include content that is directly related to the central topic or purpose of the page. For example, in a blog post, the <main> element would wrap the blog content, excluding headers, footers, navigation links, and sidebars.
Purpose of the <main> Element
Using the <main> element helps search engines and assistive technologies like screen readers identify the primary content of a page. This is particularly important for accessibility, ensuring that users who rely on these tools can quickly navigate to the main content. By clearly defining the primary content with <main>, you also help improve the semantic structure of your webpage, which can positively impact SEO.
Basic Usage of the <main> Element
The <main> element should contain content that is unique to the document and directly relates to its main subject. It should not include repeated content across pages, such as navigation menus, sidebars, or footers.
Example:
<header>
<nav>
<!-- Navigation links go here -->
</nav>
</header>
<main>
<article>
<h1>Understanding HTML Semantic Elements</h1>
<p>This article explains the importance of semantic HTML elements like <header>, <main>, and <footer>.</p>
</article>
</main>
<footer>
<p>© 2024 Your Website</p>
</footer>In this example, the <main> element wraps the primary content of the page, ensuring it stands out to both search engines and assistive technologies.
Best Practices
- Use the <main> element only once per document, as there should only be one main content area per page.
- Avoid placing content that is common across multiple pages (like headers or navigation bars) within the <main> element.
- Ensure the <main> element is used to wrap only the primary content of the document.
Fun Question
Why do you think the <main> element was introduced in HTML5? What problem was it trying to solve, especially from an accessibility standpoint?
Exercises
1. Identify the main content on a web page of your choice and wrap it in a <main> element.
2. Create a simple webpage that includes a header, navigation, main content, and footer. Ensure the <main> element is used correctly.
3. Experiment with a screen reader and see how the presence or absence of the <main> element affects the navigation of the page.
4. Compare two web pages—one with and one without the <main> element. Analyze the difference in semantic structure and accessibility.
5. Modify an existing webpage by adding the <main> element around the central content and observe any changes in SEO performance over time.
Summary
- The <main> element is used to wrap the main content of a webpage, improving its semantic structure.
- Using <main> helps search engines and assistive technologies identify the primary content on the page, enhancing accessibility and SEO.
- The <main> element should be used only once per document and should not contain content that is repeated across multiple pages.
By understanding and implementing the <main> element correctly, you can create more accessible and SEO-friendly web pages that enhance the user experience for all visitors.