Lesson · Beginner
Semantic page layout
Choose landmarks and sectioning elements by their role so navigation and content remain understandable without visual styling.
- Author
- Editorial team
- Reviewer
- Publication review pending
- Review tier
- annual
Start with page responsibilities
Most pages need a site header, navigation, one main content region, and a
footer. Add article, section, or aside only when the content has that
meaning.
<body>
<header>Site identity and primary navigation</header>
<main>
<article>
<h1>How community solar works</h1>
<section>
<h2>Who can join</h2>
<p>Eligibility depends on the local program.</p>
</section>
</article>
</main>
<footer>Contact and policy links</footer>
</body>A div is not wrong
Use a generic div when you need a styling or scripting hook and no semantic
element matches. Semantic HTML is not about eliminating every generic container;
it is about choosing meaning when meaning exists.
Accessibility implication
Landmarks let assistive-technology users jump between page regions. Repeated landmarks need labels that distinguish them.
Exercise
Remove CSS from a page layout. Confirm that the remaining document order and headings still tell a coherent story.