A Brief Introduction

Unordered lists are something you’ve probably seen used more on web pages than you’re aware. Commonly, an “unordered list” is used to create the navigation for websites and applications. They are extremely simple to use, and getting the hang of them will help you to create more accessible, cleaner navigation. Let’s take a look at how to use an unordered list in HTML.

Step 1: The Setup

What is an unordered list? Well, it’s a list that doesn’t associate list items with a numerical value, or any type linear order. Normally, an unordered list will simply use bullets (or other small icon image) to denote individual items. In HTML, you’ll see bullets when you first create list items, but you can change these to whatever you prefer with CSS. The tags for an HTML unordered list are <ul> and</ul>. 

Let’s see what it looks like in practice:

Step 2: The items

Now we have a container for our list items to exist inside of. The ul tags let HTML know that we are about to start listing out a group items. The next step is, of course, to add a few items. Let’s add 3 items to our list now. The tags for each item entry is <li> and </li>.

Here’s what the list should look like in the HTML now:

If you open the page up in a browser, you’ll see that we now have list of items, each have a bullet next to them. This is basically all there is to creating an unordered list in HTML. If you wanted to remove the bullets, you would simply create a CSS file and link it to your page, and apply the list-style-type:none declaration to your list.

Here’s how this would appear in the CSS file:

The List items will now no longer have bullets next to them when viewed in the browser.

If you are creating a list to serve as a type of site navigation, you may want to display the list horizontally as opposed to the default vertically. This too can be accomplished in CSS by displaying the list as a block element, and then floating them to the left.

Here’s how that would look in the CSS file:

Now when you view the file in a browser, you’ll see your items displayed as a horizontal row.

A Few Last Words

Creating lists in HTML can help to keep your menus and navigation elements more organized and easily maintainable. It also attributes the proper list semantics to your HTML document. Of course, there is another type of list in HTML called the “Ordered List”, and the only difference is that you’ll use the ordered list tags<ol> and </ol>, to open and close the lists, and each entry will have an ordered value attributed to it. 

Download Source Files