Challenge - Semantic layout
Write a news home page with semantic landmarks.
Semantic landmarks
Semantic tags define page regions. <header> carries the banner, <nav> the menu, <main> the primary content, and <footer> the footer. <article> is self-contained, <section> is a thematic group, and <aside> is side content.
Each <article> and <section> should begin with a heading, forming a document outline. <address> carries contact information.
Exercise Write a news home page
Write a news home page. Inside <header> put an <h1> and a <nav> with aria-label. Inside <main> put at least two <article> elements, each with its own <h2> heading. Add an <aside> and a <footer>; the <footer> must contain an <address>.
Show example solution
<header>
<h1>Daily News</h1>
<nav aria-label="Main menu">
<a href="/home">Home</a>
<a href="/posts">Articles</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<article>
<h2>City bike network expands</h2>
<p>The council will add 40 km of new paths.</p>
</article>
<article>
<h2>Library goes 24/7</h2>
<p>The new schedule starts in March.</p>
</article>
</main>
<aside>
<h2>Subscribe to the newsletter</h2>
<p>Sign up for the weekly digest.</p>
</aside>
<footer>
<address>Contact: info@dailynews.example</address>
</footer>Test yourself
-
Landmark and its role
- header
- banner
- nav
- navigation
- main
- main content
- aside
- complementary
- footer
- contentinfo
-
Accessible menu
<____ aria-label="Main menu"> <a href="/home">Home</a> </nav>Show answer
<nav aria-label="Main menu"> <a href="/home">Home</a> </nav> -
Which tag wraps the primary content?
- section
- article
- aside
- main
Show answer
main — Correct. main carries the primary content of the page.