Give a page meaningful structure
Use semantic regions to make a page easier to navigate and understand.
- Identify common page regions
- Use main for the central content
- Group navigation links in nav
Semantic elements say what a region is for. A page can have a <header> for introductory content, a <nav> for key navigation, a <main> for its central content and a <footer> for closing information. These elements help people and assistive technology understand the page.
1<header><p>Northstar Garden Club</p></header>
2<nav aria-label="Main navigation">
3 <a href="/events">Events</a>
4 <a href="/join">Join</a>
5</nav>
6<main>
7 <h1>Grow together</h1>
8 <p>Learn, plant and share with your neighbors.</p>
9</main>
10<footer><p>Meeting monthly since 2012.</p></footer>Northstar Garden Club Events Join Grow together Learn, plant and share with your neighbors. Meeting monthly since 2012.
Use <article> for a self-contained item such as a news story, and <section> for a named thematic group. A generic <div> has no built-in meaning, so keep it for grouping that does not fit a semantic element. Use one main element for the central content of a page.
Key takeaways
Semantic elements describe the purpose of content regions.
Use nav for key navigation and main for central content.
Choose div only when a more meaningful element does not fit.
Lesson quiz
5 questions · pass with 4 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write HTML
Write the markup, preview it in a sandboxed browser frame, and check the visible text against the requirements.
Club homepage structure
Create a page with a header that says City Garden Club, a nav link whose text is Upcoming events, a main area with the heading Grow with us and a paragraph Garden together., and a footer that says All neighbors welcome.
- Homepage text
Your markup is previewed in a sandboxed frame. Run tests to check the visible page text.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…