Introduction
List elements are part of a set of elements called grouping elements. HTML has 3 different list types: ordered, unordered, and description. An
ordered list is a list whose items are numbered. An unordered list is one whose
items have bullets. The description list is a list that has name/value pairs such as a term followed by a definition or times and events.
Unordered Lists:
The simplest of the three is the unordered list, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document. An unordered list is created using the
<ul> and </ul> tags.
For each item that you want in the list, you would add the tags
<li> and </li> The information for the item of the list goes in between the
tags.
Lets take a look at some code:
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<ul>
<li>Lions</li>
<li>Tigers</li>
<li>Bears</li>
</ul>
</body>
</html>
Click here to see the code run. To view the HTML code once the page loads in your Web browser, right-click the page and choose View Source.
Changing the Bullets
You may get bored using the same bullet each and every time
that you create an unordered list. For that reason, HTML gives you a few
choices. The bullet options are
- square
- circle
- disc (default value — meaning no styling required to use this bullet type)
You can change the bullet by using the style attribute and setting it's list-style-type property equal to one of the above values. The attribute needs to be added in the bracket of the opening <ul> tag when creating an inline style that you want applied to all list items. Otherwise you can add the list.style-property to an embedded or external CSS stylesheet (inline styles and CSS stylesheets will be covered in greater detail in Tutorial 3.
The example below demonstrates use of the inline method.
<!DOCTYPE html>
<html>
<head>
<title>UL Square Bullets</title>
</head>
<body>
<ul style="list-style-type:square">
<li>Lions</li>
<li>Tigers</li>
<li>Bears</li>
</ul>
</body>
</html>
Click here to see the code run. To view the HTML code once the page loads in your Web browser, right-click the page and choose View Source.
The above changed the bullet to a square. Can you change it to
a circle?
Of course it is possible to change the bullet on each line
like I have done above. To do this, you would set the attribute for each item in
the list.
<!DOCTYPE html>
<html>
<head>
<title>UL Varying Bullets</title>
</head>
<body>
<ul>
<li style="list-style-type:circle">Lions</li>
<li style="list-style-type:square">Tigers</li>
<li>Bears</li>
</ul>
</body>
</html>
Click here to see the code run. To view the HTML code once the page loads in your Web browser, right-click the page and choose View Source.
Ordered Lists:
Now that you have an idea about how to create an unordered list, lets look at what it takes to create an ordered list. The structure of an ordered list is very similar to an unordered list except that you use the <ol> and </ol> tags to encapsulate your list items, as shown in the example below.
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<ol>
<li>Lions</li>
<li>Tigers</li>
<li>Bears</li>
</ol>
</body>
</html>
Click here to see the code run. To view the HTML code once the page loads in your Web browser, right-click the page and choose View Source.
Numbers or Alphabetic
As with Unordered Lists, you can set the style attribute and the list-style-type property to change the way the list is ordered. In addition, the <ol> element also has a type attribute that can be used to specify the format of the list items. For instance, you can set the type so that the list items are numbered with Roman Numerals by setting the type attribute equal to I or i, or Alphabetic by setting the type attribute to A or a. Below is a chart which displays the values that can be used for the type attribute and the CSS list-style-type property. If you don't specify a type or a style the default is to format the list items beginning with a decimal value.
| Type Attribute Values |
CSS list-style-type Properties |
List Style Type |
| 1 (default) |
decimal |
Decimal Numbers |
| I |
upper-roman |
Capital Roman Numerals |
| i |
lower-roman |
Lower Case Roman Numerals |
| A |
upper-alpha |
Capital Letters |
| a |
lower-alpha |
Lower Case Letters |
The following code displays the list with capital Roman numerals using the style attribute and the list-style-type property.
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<ol style="list-style-type: upper-roman">
<li>Lions</li>
<li>Tigers</li>
<li>Bears</li>
</ol>
</body>
</html>
Click here to see the code run. To view the HTML code once the page loads in your Web browser, right-click the page and choose View Source.
The next code example displays the list with capital Roman numerals using the type attribute.
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<ol type="I">
<li>Lions</li>
<li>Tigers</li>
<li>Bears</li>
</ol>
</body>
</html>
Click here to see the code run. To view the HTML code once the page loads in your Web browser, right-click the page and choose View Source.
Let's look at one more example that displays the list using capital letters.
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<ol type="A">
<li>Lions</li>
<li>Tigers</li>
<li>Bears</li>
</ol>
</body>
</html>
Click here to see the code run. To view the HTML code once the page loads in your Web browser, right-click the page and choose View Source.
Try it for yourself. See if you can change the style to lowercase letters or lowercase Roman Numerals.
Note: You might be asking yourself which ordered list formatting method is the best to use. As always, it depends on the situation. However, HTML markup is partially about semantics — giving your document's content meaning. So, in cases where you want your list items to convey meaning, then the type attribute is the way to go.
Setting The Starting Number:
So what if you want to change the starting number from 1 to something else like 5 then you can simply use the start attribute as part of the opening <ol> tag. The following code sets the type to alphabetic, and the first item in the list to start with E.
<!DOCTYPE html>
<html>
<head>
<title>Ordered List</title>
</head>
<body>
<ol style="list-style-type: ;A" start="5">
<li>Lions</li>
<li>Tigers</li>
<li>Bears</li>
</ol>
</body>
</html>
Click here to see the code run. To view the HTML code once the page loads in your Web browser, right-click the page and choose View Source.
In the above example, notice that I have set the start to attribute to 5. This actually sets the start value to E. That is because E is the 5th letter of the alphabet. You can set the start for any type attribute. Just remember that the start value has to be a numeric value.
Description Lists:
A definition list is a list of terms and their corresponding definitions encapsulated by an opening <dl> tag and a closing </dl> tag
The terms are placed using the
<dt> and </dt> tags
and the corresponding definition is placed using the
<dd> and </dd> tags
Definition lists are typically formatted with the term on the left and the definition following to the right or on the next line. The definition text is typically indented with respect to the term. Below is an example of a definition list
<!DOCTYPE html>
<html>
<head>
<title>Description List</title>
</head>
<body>
<dl>
<dt>Dorothy's Friends:</dt>
<dd>Scarecrow</dd>
<dd>Tin Man</dd>
<dd>Cowardly Lion</dd>
</dl>
</body>
</html>
Click here to see the code run. To view the HTML code once the page loads in your Web browser, right-click the page and choose View Source.
Notice the above starts with an <lh> tag. This is the list header and it is optional and is not supported by all Web browsers.