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.

Next lesson: Challenge - Intermediate capstone

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies