Learn HTML and CSS: A menu

A menu for several pages

One long page isn't enough any more. Hilary wants a page for the dogs, one for the cats and one about adopting, and a menu at the top so nobody gets lost.

A site is a folder of pages

Each page is an HTML file of its own. index.html is the home page: it opens when you go to the site's address. Next to it come dogs.html, cats.html and adopt.html.

The menu is a list of links in a <nav>. A list, because it's a series of similar things: a screen reader says straight away how many choices there are.

The menu is on every page, so you can get anywhere from any page. The items sit side by side without bullets here because of the shelter's CSS. You'll learn how that works in the flexbox module.

index.html

1<header>2  <h1>The Cosy Basket</h1>3  <nav>4    <ul>5      <li><a href="index.html">Home</a></li>6      <li><a href="dogs.html">Dogs</a></li>7      <li><a href="cats.html">Cats</a></li>8      <li><a href="adopt.html">Adopt</a></li>9    </ul>10  </nav>11</header>12<main>13  <h2>Welcome</h2>14  <p>Every animal deserves a cosy basket.</p>15</main>

asiel.example

Folders and paths

A big site puts pages in folders, like an animals folder with a page per animal. A relative path always starts from the folder of the page you're on.

cats.html is in the same folder. animals/misty.html goes one folder down, into the animals folder. And ../index.html goes one folder up: .. means "the folder above".

This is the page animals/misty.html. A link to index.html won't take you to the home page from here: the browser then looks for animals/index.html.

index.html

1<main>2  <h1>Misty</h1>3  <p>Playful cat, 2 years old, mad about cardboard boxes.</p>4  <p><a href="../cats.html">All cats</a> · <a href="../index.html">Back to home</a></p>5</main>

asiel.example

Try it yourself

Under the name, add a menu with four links: Home to index.html, Dogs to dogs.html, Cats to cats.html and Adopt to adopt.html.

1<header>2  <h1>The Cosy Basket</h1>3</header>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.card {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.card h3 {51  margin: 4px 0;52}53.box {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.breed {59  color: #b5541c;60}61.closed {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example

Ready for more?

The full lesson has 5 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

A site is a folder of pages

Each page is an HTML file of its own. index.html is the home page: it opens when you go to the site's address. Next to it come dogs.html, cats.html and adopt.html.

The menu is a list of links in a <nav>. A list, because it's a series of similar things: a screen reader says straight away how many choices there are.

The menu is on every page, so you can get anywhere from any page. The items sit side by side without bullets here because of the shelter's CSS. You'll learn how that works in the flexbox module.

index.html

1<header>2  <h1>The Cosy Basket</h1>3  <nav>4    <ul>5      <li><a href="index.html">Home</a></li>6      <li><a href="dogs.html">Dogs</a></li>7      <li><a href="cats.html">Cats</a></li>8      <li><a href="adopt.html">Adopt</a></li>9    </ul>10  </nav>11</header>12<main>13  <h2>Welcome</h2>14  <p>Every animal deserves a cosy basket.</p>15</main>

asiel.example

Folders and paths

A big site puts pages in folders, like an animals folder with a page per animal. A relative path always starts from the folder of the page you're on.

cats.html is in the same folder. animals/misty.html goes one folder down, into the animals folder. And ../index.html goes one folder up: .. means "the folder above".

This is the page animals/misty.html. A link to index.html won't take you to the home page from here: the browser then looks for animals/index.html.

index.html

1<main>2  <h1>Misty</h1>3  <p>Playful cat, 2 years old, mad about cardboard boxes.</p>4  <p><a href="../cats.html">All cats</a> · <a href="../index.html">Back to home</a></p>5</main>

asiel.example

Try it yourself

Under the name, add a menu with four links: Home to index.html, Dogs to dogs.html, Cats to cats.html and Adopt to adopt.html.

1<header>2  <h1>The Cosy Basket</h1>3</header>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fffaf3;5  color: #3d2b1f;6}7header {8  padding: 20px 16px 14px;9  background: #f6c88f;10}11header h1 {12  margin: 4px 0 0;13}14.slogan {15  margin: 4px 0 10px;16}17nav ul {18  display: flex;19  flex-wrap: wrap;20  gap: 4px 18px;21  margin: 0;22  padding: 0;23  list-style: none;24}25nav a {26  color: #7a3e12;27  font-weight: bold;28}29main {30  padding: 8px 16px 24px;31}32table {33  border-collapse: collapse;34}35th,36td {37  padding: 6px 12px;38  border: 1px solid #e3c9a8;39  text-align: left;40}41th {42  background: #fbe3c4;43}44.card {45  margin: 12px 0;46  padding: 12px 16px;47  border-radius: 16px;48  background: #ffffff;49}50.card h3 {51  margin: 4px 0;52}53.box {54  padding: 4px 16px;55  border-radius: 16px;56  background: #fde9d4;57}58.breed {59  color: #b5541c;60}61.closed {62  color: #b42318;63  font-weight: bold;64}65footer {66  padding: 12px 16px;67  background: #f6c88f;68}

asiel.example