Navigation Menus with List Styles

This is our 3^rd installment for our HTML 101 series. Today we will be adding the navigation menu for our website. We will accomplish this by creating a list menu. We will also create a placeholder page to link to from the navigation menu. Let’s get started.

HTML List Styles

There are three list elements.

1. Ordered List
2. Unordered List
3. Definition List

Ordered List

The above example is an ordered list. These are typically used when there is a sequence that needs to be spelled out such as Step 1, Step 2 and so on.

The HTML for the above example would be:

<ol>
 <li>Ordered List</li>
 <li>Unordered List</li>
 <li>Definition List</li>
</ol>

Note the <ol> and the <li>. The <ol> designates Ordered List while the <li> designates List Item.

Unordered List

These are usually used when displaying information that doesn’t require a certain sequence. These are usually identified with a bullet point instead of a number. Here is an example of an unordered list.

I wish this guy would:

• Get to the navigation already
• Stop boring me with this information
• Did I mention navigation?

The HTML for this example would be:

<ul>
  <li>Get to the navigation already</li>
  <li>Stop boring me with this information</li>
  <li>Did I mention navigation?</li>
</ul>

Instead of <ol> we used <ul> this time. I bet you can guess that the <ul> stands for Unordered List.

Definition List

These kinds of lists are used commonly for definitions of words but they do have other uses such as descriptions of products and other various uses.

Here is an example of a Definition List

Time

Something I do not have a lot of

Patience

Something else I do not have a lot of

The HTML for this example would be:

<dl>
<dt>Time</dt>
  <dd>Something I do not have a lot of</dd>
<dt>Patience</dt>
  <dd>Something else I do not have a lot of</dd>
</dl>

Note that <dl> is used to define the Definition List. Then, <dt> is used to define the Definition Term while the <dd> is used to describe the Definition.

Using Lists for Navigation Menus

Creating a Navigation List

Let’s begin adding our navigation menu to our site. We will use an Unordered List to achieve this.

Our website consists of three pages. Home, About, and Contact. This will be a quick list to create.

Below our header image we will place the following lines of code:

…. alt=”My Very First Web Design Logo”></a>
<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>
<h1> Welcome to My Very First….

This should give us something that looks like this. Click on the image to see a larger version. The navigation is vertical for the moment. This will be addressed when we add the CSS stylesheet to our website.

Linking the List Items to Pages

Now that we have our navigation list, let’s link them to their respective pages. Since we haven’t created any additional pages let’s make those now.

Create a file named about.html and contact.html and save it in the same folder as your index.html file. These pages will be blank but you can add some text to them if you like. The main thing is to see how to link to those pages from our navigation menu.

Once you have those created, we can point our pages list items to them. This will be the same method we used in our previous lesson, HTML 101 Links.

Here is what the list items will look like with them linked to the proper pages.  I also added the Title attribute which is very similar to the Alt tag but is primarily used for things like links.

<ul>
  <li><a href=”index.html” title=”Home Page”>Home</a></li>
  <li><a href=”about.html” title=”About Us”>About</a></li>
  <li><a href=”contact.html” title=”Contact Us”>Contact</a></li>
</ul>

Now we are finished with our navigation except for styling it.

Conclusion

We now have added our navigation menu to our site. It isn’t pretty but we will make it look special once we start adding some CSS formatting to it. I think the next lesson would be a good time to start adding some basic CSS Styles to our site.

Download the Files

You will notice I went ahead and added the remainder of the text to the main content area. Feel free to remove it and add it in for practice.

Please Leave a Comment or Suggestion

To help us help you, let us know how we are doing. Did you find this useful? What else would you like to see added?

Lesson 1 – HTML Codes
Lesson 2 – HTML Links
Lesson 4 – HTML Div Tags