Lists and Navigation

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

Build a semantic navigation bar using nav > ul > li > a with hash links. Use CSS :target to show only one section at a time without JavaScript, and ensure the Home section is visible by default when no hash is present.

Solution

Overview

Use an unordered list for the nav links and anchor each link to a section id. The CSS :target selector controls visibility: the targeted section is shown while others are hidden. Ordering matters so the default Home section remains visible when no hash exists, and becomes hidden when another section is targeted.

Approach 1 – CSS-only navigation with :target

Create <nav aria-label="Primary"> with a <ul> of links to #home, #about, #contact, etc. Give each <section> the matching id. Keep the Home section last in the DOM so a general sibling selector can hide it when another section is targeted. With no hash, Home stays visible by default.

<html>

<!DOCTYPE html>
  <html lang='en'>
    <head>
      <meta charset='UTF-8'>
      <title>
        Lists and Navigation
      </title>
    </head>
    <body>
      <nav aria-label='Primary'>
        <ul>
          <li>
            <a href='#home'>
              Home
            </a>
          </li>
          <li>
            <a href='#about'>
              About
            </a>
          </li>
          <li>
            <a href='#contact'>
              Contact
            </a>
          </li>
        </ul>
      </nav>
      <section id='about'>
        <h2>
          About
        </h2>
        <p>
          This section becomes visible when the URL hash is #about.
        </p>
      </section>
      <section id='contact'>
        <h2>
          Contact
        </h2>
        <p>
          This section becomes visible when the URL hash is #contact.
        </p>
      </section>
      <section id='home'>
        <h2>
          Home
        </h2>
        <p>
          Home is visible by default (when there is no hash).
        </p>
      </section>
    </body>
  </html>

# CSS

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 2rem;
}
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
nav a {
  text-decoration: none;
  color: #007acc;
}
nav a:hover {
  text-decoration: underline;
}
section {
  margin-top: 1rem;
  display: none;
}
section:target {
  display: block;
}
section#home {
  display: block;
}
section:target ~ section#home {
  display: none;
}

Notes & Pitfalls

Pitfalls

Forgetting to match each link href to a real section id.
Not keeping #home last (the sibling selector relies on document order).
Trying to toggle the HTML hidden attribute with CSS (it won't work as intended here).

Techniques

Use <nav> + list markup for semantic navigation.
Use :target to react to URL fragments without JavaScript.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse HTML interview questions Open HTML/CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep