Skip to Content
Learn
Site Structure
Create an Unordered List

Impressive! With just five page elements, you’ve already created an interesting website!

Another essential HTML element is the unordered list. Items in an unordered list are referred to as list items. Each item is bulleted, not numbered. For example:

  • A list item
  • A second list item
  • A third list item

The HTML code for the list above:

<ul> <li>A list item</li> <li>A second list item</li> <li>A third list item</li> </ul>

About unordered lists:

  1. ul tags create the unordered list.

  2. li tags contain each list item.

Unordered list elements can be used to organize content on a webpage in a number of ways. Below we will use one to organize our website’s navigation menu, sometimes called a navbar.

Instructions

1.

Our navbar will go above the company heading h1 element, so first we will need to create some new lines. In index.html, press enter to create several new lines between <body> and <h1>.

First, we will create an h2 element to serve as the heading for the navbar. The text can read “Ollie”.

<h2>Ollie</h2>

Run your code to continue.

2.

Below the navbar h2, create an unordered list element. The list items will be different pages a site user can visit:

<ul> <li>sign up</li> <li>search bikes</li> <li>reserve a bike</li> <li>about us</li> </ul>

After you insert all the list items, don’t forget to close the unordered list with a closing </ul> tag.

Run your code to view the results in the web browser.

Folder Icon

Take this course for free

Already have an account?