List Items in HTML
by Ron Kurtus (updated 21 December 2022)
You can define a list of items with HTML. There are three types of lists: unordered, ordered, and definition lists. An unordered list is essentially a bullet list. An ordered list is a numeric list. Coding them is relatively simple.
You can define bullet type for the whole unordered list or an individual item. You can define the type of numbering and staring point in ordered lists, as well as having nested lists. Definition lists have no bullets or numbers.
Questions you may have include:
- How do you code an unordered list in HTML?
- How do you code an ordered list?
- What is a definition list?
This lesson will answer those questions.
Unordered list
An unordered list is a series of items or "bullet points" that are in no apparent order. An example is:
- Apples
- Oranges
- Peaches
The coding for an unordered list is:
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Peaches</li>
</ul>
The default bullet type is "disc" and does not need to be defined.
Define bullet type
You can also define the bullet type as a circle or square:
- Apples
- Oranges
- Peaches
<ul type="circle">
<li>Apples</li>
<li>Oranges</li>
<li>Peaches</li>
</ul>
Define individual item
You can also define an individual item as a circle or square:
- Apples
- Oranges
- Peaches
<ul>
<li>Apples</li>
<li type="square">Oranges</li>
<li>Peaches</li>
</ul>
Note that the "square" is pretty puny.
Ordered list
An ordered list is a series of numbered items. An example is:
- Apples
- Oranges
- Peaches
The coding for an unordered list is:
<ol>
<li>Apples</li>
<li>Oranges</li>
<li>Peaches</li>
</ol>
Define the numeric type
You can define the numeric type as 1, A, a, etc:
- Apples
- Oranges
- Peaches
The HTML is:
<ol type="a">
<li>Apples</li>
<li>Oranges</li>
<li>Peaches</li>
</ol>
Define starting value
You can define the starting value:
- Apples
- Oranges
- Peaches
The HTML is:
<ol start="3">
<li>Apples</li>
<li>Oranges</li>
<li>Peaches</li>
</ol>
Nested lists
You can also create nested lists:
- Apples
- Oranges
- Big
- Small
- Peaches
The HTML is:
<ol>
<li>Apples</li>
<li>Oranges</li>
<ol type="a">
<li>Big</li>
<li>Small</li>
</ol>
<li>Peaches</li>
</ol>
Definition or descriptive list
You can define or describe items within a list:
- Term or phrase being defined
- Detailed Definition of term
For example:
- Apple
- Red fruit
- Orange
- Orange fruit
Note: The spacing between definition and paragraphs is large by default.
The HTML code is:
<dl>
<dt>Apple</dt>
<dd>Red fruit</dd>
<dt>Orange</dt>
<dd>Orange fruit</dd>
</dl>
The areas within <dt>...</dt> can contain full definitions, several sentences long.
Note: I have never used definition lists..
Summary
There are three types of lists in HTML: unordered, ordered, and definition lists. The coding for them is relatively simple.
Make things clear for the user
Resources and references
Websites
Books
(Notice: The School for Champions may earn commissions from book purchases)
Top-rated books on Webpage Design
Share this page
Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:
Students and researchers
The Web address of this page is:
www.school-for-champions.com/webpage/
html_lists.htm
Please include it as a link on your website or as a reference in your report, document, or thesis.
Where are you now?
HTML Lists