Adding A list In HTML

When you want to add a list in your website content, there are three different ways of doing it:

  • Unordered List
  • Ordered List
  • Definition List

The list above this paragraph is an unordered list. Different browsers will display a list in HTML different ways but the main ones such as Internet Explorer and Firefox will put a left margin and add a marker before each list entry.

Unordered list

To add an unordered list in HTML, you need two different tags:

  • <ul> and </ul>
  • <li> and </li>

Start the list by opening it with the unordered list tag <ul>. This tag will be closed at the very end of the list. After the opening tag, insert <li>LIST ENTRY</li> where LIST ENTRY is one of the lines of your list. Here's an example of an unordered list in HTML:

<html>
<head>
<title>list in html</title>
</head>
<body>
<ul>
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
</ul>
</body>
</html>

Ordered list

Adding an ordered list in HTML is the same as an unordered list. The only difference is the tag used in opening and closing the list. The new tags to use are:

  1. <ol> and </ol>
  2. <li> and </li>

The above list is an ordered list. Every line will be numbered from 1 to infinity. Note that there is no marker at the start of list entries. The number will replace it. To my knowledge, it's impossible to have both a marker and a number without using an unordered list and adding the number manually to each <li> entry.

Definition lists.

Before I start explaining how to add a definition list in HTML, I will show you how it looks on screen:

Example 1
This is the definition of the example 1 element
Example 2
This is the definition of the example 2 element
Example 3
This is the definition of the example 3 element

This kind of list is usually used in creating either site indexes, dictionaries, etc. Where I put Example 1,2,3, you can put the title of your page for example. The paragraph under it would be the summary of the page. There are many different ways of using definition lists, use your imagination and they could be very useful. Beware that different browsers will display it in different ways but they will all look pretty much the same.

The tags used to add a definition list in html are:

  • <dl> and </dl>
  • <dt> and </dt>

Put the item to be defined between the two <dl> tags and the definition between the two <dt> tags. The difference between definition lists and the other two kind of lists is that definition lists don't need to be opened and closed. Each element of the list if independent of the rest.

Here's the example I used above but in HTML code:

<html>
<head>
<title>list in html</title>
</head>
<body>
<dt>Example 1</dt>
<dl>This is the definition of the example 1 element</dl>
<dt>Example 2</dt>
<dl>This is the definition of the example 2 element</dl>
<dt>Example 3</dt>
<dl>This is the definition of the example 3 element</dl>
</body>
</html>

Back
HTML Anchor Tags		Next
Nested Bullet Lists