Web Development
GUIDE

Creating Lists In HTML

Description: Do you need a numbered list or a list of bullet points to break up an article on a web page and make it easier to read? Maybe you simply want to draw attention to some specific points? Read on to find out how HTML can make this a reality.

Once you start looking into how HTML works, you'll realize that most of it relies on simple abbreviations contained within tags. This is no different when it comes to creating lists.

All you need to do is select the type of list you want to create, and then make sure your tags are in the right places. You also need to ensure you get your listed items in the right order, if they have a specific sequence to follow.

When you create a list in HTML, the first step is to decide whether you want an ordered list or an unordered one. Ordered is another word for numbered in this case. These are the basic tags for creating a list:

Starting and ending tags for an ordered list = <ol> and </ol>

Starting and ending tags for an unordered list = <ul> and </ul>

To list the actual items themselves, you would need to use the listing tag, which as you might guess is also an abbreviation:

<li> and </li>

The forward slash in the second tag of each pair indicates that the tag is closed properly and nothing else follows it.

So if you wanted to list your top three favorite cities to visit in the world, for example, here's how it would look:

<ol>
<li>New York</li>
<li>London</li>
<li>Sydney</li>
</ol>

This would then appear as a numbered list on your web page, because you have used the ordered list tags which refer to numbered lists.

If you wanted a bullet pointed list instead you would simply change the beginning and ending tags to the unordered ones:

<ul>
<li>New York</li>
<li>London</li>
<li>Sydney</li>
</ul>

The HTML also lets you substitute squares or circles instead of using bullet points; all you would do is change the first tag. So instead of having <ul> to start off the HTML for the list, you would use this instead to see a square bullet point:

<ul type="square">

The rest of the HTML would be the same, including the closing tag. For a list which is displayed using circles, again you would only need to change the opening tag, as follows:

<ul type="circle">

The default for an unordered list is the standard bullet point, which doesn't need to be indicated within the opening tag.