Ordered lists, unordered lists, and definition lists
Updated on February 20, 2020
The HTML language supports three different types of list. By default, they use standard tags and render in standard ways, although a more elaborate styling for any of these elements generally requires a style sheet.
Three Types of Lists in HTML
HTML offers three use cases for listing content on a page.
- Ordered Lists:These are sometimes called numbered lists because, by default, the list items contained in that list have a specific numerical order or ranking. Ordered lists are appropriate where the exact ordering of items are important to the meaning of the content. For example, a recipe would likely use an ordered list because the steps occur in sequence. Any step-by-step process is best presented as an ordered list.
- Unordered Lists:These are sometimes called bulleted lists because the default visual appearance of an unordered list is to have small bullet icons in front of the list items. This type of list is best used when the order of the items isn't salient. The list items will appear in whatever order you code them in for the HTML, but you are determining that order and, unlike a recipe or step-by-step process, the order could be changed and the meaning of the content would not suffer.
- Definition Lists:These are lists of items that have two parts, a term to be defined and the definition. They are commonly used to display a definition/description pair like you would find in a dictionary, but definition lists can also be used for many other kinds of content.
Lists in General
With lists, all items are paired with opening and closing tags. These pairs govern both the list-type markers and the individual list-item elements.
Ordered Lists
Use the
- tag (the ending
The HTML looks like this:
- Step One
- Step Two
- Step Three
And the result looks like this:
- Step One
- Step Two
- Step Three
Unordered Lists
Use the
- tag (the ending tag is required) to create a list with bullets instead of numbers. Just like with the ordered list, the elements are created with the
- tag pair.
The HTML looks like this:
- Apples
- Oranges
- Pears
And the result looks like this:
- Apples
- Oranges
- Pears
Definition Lists
Definition lists create a list with two parts to each entry: the name or term to be defined and the definition. Use
to create the list and use to specify the term andThe HTML looks like this:
Cat
Cute four-legged animal.
Internet
Online community optimized for cat photos.
And the result looks like this: