Free HTML course. Sign Up for tracking progress →

HTML: Menu

Let's go back to an example from previous lessons:

<header>
  <img src="/logo.png" alt="Logo"> <!-- Site Logo -->
  <div id="menu"> <!-- Menu -->
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contacts">Contacts</a></li>
    </ul>
  </div>
</header>

Here the site menu is marked up with the usual <div> tag with the menu identifier. As you know, this designation works for developers, but not for browsers. They don't realize that it's a menu, not just a wrapper for a list.

To create a complete menu, we use a paired <nav> tag, whose job is to mark up an area of the page with the main menu. Also, the various screen readers used by visually impaired people use this tag to determine if it's worth displaying on the page.

Replace <div id="menu"></div> with the <nav> tag that we studied:

<header>
  <img src="/logo.png" alt="Logo"> <!-- Site Logo -->
  <nav> <!-- Menu -->
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contacts">Contacts</a></li>
    </ul>
  </nav>
</header>

The nav element, like header, don't have to be unique for a page. It can be used for any menu on the page, but there are a few recommendations:

There is no need to wrap each menu in a nav element. Only main menus should be indicated using this tag. Extras, such as the footer menu, are generally not wrapped in the <nav> tag, though it's not forbidden
A good example of additional use for nav is to navigate to the current page
nav can contain not only links but also the text containing the link. Use common sense. If the navigation menu is the main menu for the page or the whole site, then wrap it in the <nav> tag

Instructions

Mark up a site header. Place a picture and a menu with two elements inside. Use the <nav> tag and a bulleted list

The exercise doesn't pass checking. What to do? 😶

If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:

Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.

In my environment the code works, but not here 🤨

Tests are designed so that they test the solution in different ways and against different data. Often the solution works with one kind of input data but doesn't work with others. Check the «Tests» tab to figure this out, you can find hints at the error output.

My code is different from the teacher's one 🤔

It's fine. 🙆 One task in programming can be solved in many different ways. If your code passed all tests, it complies with the task conditions.

In some rare cases, the solution may be adjusted to the tests, but this can be seen immediately.

I've read the lessons but nothing is clear 🙄

It's hard to make educational materials that will suit everyone. We do our best but there is always something to improve. If you see a material that is not clear to you, describe the problem in “Discussions”. It will be great if you'll write unclear points in the question form. Usually, we need a few days for corrections.

By the way, you can participate in courses improvement. There is a link below to the lessons course code which you can edit right in your browser.

Tips

Only wrap the main menus of the site or an individual page in the navigation element. Additional menus do not need to be wrapped in the <nav> tag
Navigation can be in any area of the page, not just in the site header

←Previous

Issues https://github.com/hexlet-basics