Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Lists | Working with Semantic Elements, Multimedia Elements and Graphics
HTML for Beginners

book
Lists

There are three types of lists in HTML:

  • Unordered lists;
  • Ordered lists;
  • Descriptive lists.

Ordered list

Ordered lists are created with the <ol> tags. You use <li> tags to add items to an ordered list. These <li> tags should come between the opening <ol> tag and the closing <ol> tag.

html

index.html

copy
<!DOCTYPE html>
<html>
<head> </head>
<body>
<h2>Months of the year</h2>
<ol>
<li>January</li>
<li>February</li>
<li>March</li>
</ol>
</body>
</html>

As you can see browser will render the output with numbers before listing items. However, if you want to use letters instead of numbers, you can use the type attribute of the <ol> tag.

html

index.html

copy
<!DOCTYPE html>
<html>
<head> </head>
<body>
<h2>Months of the year</h2>
<ol type="A">
<li>January</li>
<li>February</li>
<li>March</li>
</ol>
</body>
</html>

Similarly, you can assign "a" and "i" to type attributes to get small letters or roman numbers before the list items.

Unordered list

Unordered lists are created the same way ordered lists are created. However, instead of <ol> tags, you use <ul> tags.

html

index.html

copy
<!DOCTYPE html>
<html>
<head> </head>
<body>
<h2>Months of the year</h2>
<ul>
<li>January</li>
<li>February</li>
<li>March</li>
</ul>
</body>
</html>

A mix of Ordered Lists and Unordered lists

You can mix ordered lists and unordered lists.

html

index.html

copy
<!DOCTYPE html>
<html>
<head> </head>
<body>
<h2>Even and Odd Numbers</h2>
<ul>
<li>Odd numbers</li>
<ol>
<li>1</li>
<li>3</li>
</ol>
<li>Even Numbers</li>
<ol>
<li>2</li>
<li>4</li>
</ol>
</ul>
</body>
</html>

So as you can see, we can use ordered lists under unordered lists.

Descriptive lists

Sometimes we want to create a list of items with descriptions for each item. We use the <dl> tag along with <dt> and <dd> tags to create a list.

html

index.html

copy
<!DOCTYPE html>
<html>
<head> </head>
<body>
<dl>
<dt>January</dt>
<dd>First month of the year</dd>
<dt>February</dt>
<dd>Second month of the year</dd>
</dl>
</body>
</html>

Here <dl> tag initiates a descriptive list. Then <dt> tag defines the term of the list item. Finally, the <dd> tag describes the term.

1. Which of the following tag is used to create an unordered list?

2. Which of the following attributes can be used with
    tags?

question mark

Which of the following tag is used to create an unordered list?

Select the correct answer

question mark

Which of the following attributes can be used with

    tags?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 2. Chapter 1
some-alt