A semantic page layout uses meaningful HTML elements to clearly define each part of a webpage.
Instead of relying on generic containers, modern websites combine semantic elements to create clean, readable, and accessible layouts.
Typical Semantic Page Structure
A standard semantic webpage usually includes:
- header for top content
- nav for navigation links
- main for primary content
- section and article for content grouping
- aside for related information
- footer for bottom content
In this layout:
- header introduces the website
- nav contains navigation links
- main holds the primary content
- section groups related articles
- article represents independent content
- aside shows supporting information
- footer contains footer details
Why Semantic Layouts Are Important
Semantic layouts make code easier to read and maintain.
They help search engines understand content hierarchy and improve accessibility for assistive technologies.
Semantic Layout vs Div-Based Layout
A semantic layout clearly explains content purpose.
A div-based layout relies on class names and comments.
Professional projects always prefer semantic layouts.
Common Beginner Mistakes
- Overusing div instead of semantic elements
- Placing content outside main
- Using semantic tags incorrectly
Why This Matters for Jobs
Most modern companies expect semantic HTML in production code.
Frameworks like React and Vue also encourage semantic structure.
Practice Task
Build a simple webpage layout using header, nav, main, section, article, aside, and footer.
What You Will Learn Next
In the next lesson, you will learn best practices for writing clean and professional semantic HTML.