Semantics
HTML Main
Defining Main Content
HTML main element wraps primary page content, excluding headers or footers.
What is the HTML <main> Element?
The HTML <main> element is a semantic element used to designate the primary content of a webpage. It is intended to encapsulate content that is directly related to the central topic or functionality of the page. Importantly, the <main> element excludes content that is repeated across multiple pages, such as headers, footers, and sidebars.
Using the <main> element helps search engines and assistive technologies understand the structure and importance of different sections of your webpage. This element should be unique per page and should not be nested within other sections like <header>, <footer>, or <article>.
Basic Example of the <main> Element
Best Practices for Using <main>
- Ensure that there is only one <main> element per page. This maintains clarity for users and search engines.
- Avoid placing the <main> element inside other elements like <article>, <section>, <aside>, <footer>, or <header>.
- Use <main> to wrap the core content of your page, which should be unique and not repeated across other pages.
Accessibility Considerations
The <main> element is beneficial for accessibility. Screen readers and other assistive technologies can quickly navigate to the <main> content, allowing users to bypass repetitive navigation links and headers. This feature significantly improves the browsing experience for users who rely on such technologies.
Moreover, using the <main> element correctly enhances the semantic structure of your HTML, which is not only beneficial for accessibility but also for SEO.
- Previous
- Aside
- Next
- Accessibility
