HTML Lists

There are three methods of creating lists in HTML: ordered (numbered), unordered (bullets) and definition lists (dictionary style). Each one is also customizable . You can use numbers, roman numerals, bullet points or even images for the list.

• <ol> - Ordered lists
• <ul> - Unordered lists
• <dl> - Definition lists

Also each line within the list (i.e list item) must contain a <li> tag.

Ordered Lists

<ol>
<li>Potatoes</li>
<li>Prime Rib</li>
<li>Soda</li>
</ol>

Outputs:

Potatoes
Prime Rib
Soda

You can also change what the first number will start at by using the 'start' attribute:

<ol start="3">
<li>Potatoes</li>
<li>Prime Rib</li>
<li>Soda</li>
</ol>

Outputs:

Potatoes
Prime Rib
Soda

Popular Values for Ordered Lists

• start="a" - a, b, c, d, etc...
• start="A" - A, B , C, D, etc...
• start="i" - i, ii, iii, iv, etc...
• start="I" I, II, III, IV, etc...

Unordered Lists

<ul>
<li>Dogs</li>
<li>Cats</li>
<li>Snakes</li>
</ul>

Outputs:

Dogs
Cats
Snakes

Popular Values for Unordered Lists

• type="disc" - Makes the bullet point into a circle.
• type="circle" - Similar to 'disc' except the circle is not filled in.
• type="square" - Creates a filled in square as the bullet point.

Note: You can also change unordered list types by using the "list-style-type" property in CSS.

Definition Lists

Definition lists allow you to create lists in the same way as dictionaries create definitions for words. They work differently from the list above and definition lists use their own tags.

• <dl> - Defines the beginning of a definition list
• <dt> - Marks a definition term
• <dd> - Marks the definition of the term above it

<dl>
<dt>Sushi</dt>
<dd>Raw fish over rice<dd>
<dt>Sashimi<dt>
<dd>Thinly sliced raw fish<dd>
</dl>

Outputs:

Sushi
Raw fish over rice
Sashimi
Thinly sliced raw fish

Permalink