HTML First Steps - Lesson 9 - Creating a Menu

The main element of a website is the menu (navigation). It allows users to move between pages on the site. A menu is also important for search engine indexing—without links connecting the pages, a search engine won't be able to crawl the entire site. Let's take a look at what a menu is made of.

Menus are typically created using an unordered list (the ul and li tags), where each menu item is a list element:

...
<ul>
  <li></li>
  <li></li>
</ul>
...

Inside the li tag, links to pages are usually inserted:

...
<ul>
  <li>
    <a href="page1.html">First Page</a>
  </li>
  <li>
    <a href="page2.html">Second Page</a>
  </li>
</ul>
...

It's also common to assign classes and IDs to the menu and its items:

...
<ul id="menu-1" class="menu">
  <li class="item-1">
    <a href="page1.html">First Page</a>
  </li>
  <li class="item-2">
    <a href="page2.html">Second Page</a>
  </li>
</ul>
...

Note that the pages you're linking to (page1.html, page2.html) must actually exist, otherwise the browser won't know where to navigate.