Modern web pages usually have one main content area and some secondary content.
HTML provides semantic elements to clearly separate main content from supporting or side content.
The Main Element
The main element represents the primary content of a webpage.
It contains the most important information that is unique to the page.
Rules for Using Main
- Only one main element should be used per page
- Main should not be placed inside header, footer, nav, or aside
- Main should contain the core content of the page
The Aside Element
The aside element represents secondary content related to the main content.
It is commonly used for sidebars, advertisements, related links, or author information.
Aside content should be related to the main content but not essential.
If removed, the main content should still make sense.
Main vs Aside
Main contains primary content.
Aside contains supporting or additional content.
This clear separation improves readability and accessibility.
Common Mistakes
- Using multiple main elements
- Putting main inside nav or footer
- Using aside for main content
Why Main and Aside Matter for Jobs
Search engines and screen readers rely on main and aside to understand content importance.
Professional developers are expected to use these elements correctly.
Practice Task
Create a page layout with one main content area and one aside section showing related information.
What You Will Learn Next
In the next lesson, you will learn how to build a complete semantic page layout using all semantic elements together.