Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Ordered and Unordered Lists
An ordered list has list items prefaced by a form of enumeration (e.g. 1, 2... | A, B...). These are often called numbered lists by those outside of web design. An unordered list has list items that are preceded by some type of bullet (e.g. ■ | ○).
Creating lists is easy, but first you need to determine what kind of list you want to make. Below you’ll see different kinds of lists in the left column and the code that makes ’em go in the right column. At the end you’ll find definitions and some good-to-know key points.
Tighten your girdle, Mr. Honkingbottom, here we go…
List Style Examples
| Unordered Lists – Uses Bullets | |
|---|---|
| If you want this style of list… | Here’s the code to make it… |
|
<ul> <li>First things first.</li> <li>Second things not first.</li> <li>Add an <li> for each list item.</li> </ul> |
|
<ul style=”list-style-type: circle;”> <li>Smiles…</li> <li>increase your face value!</li> </ul> |
|
<ul style=”list-style-type: square;”> <li>Friends are…</li> <li>family we choose!</li> </ul> |
Types of Bullets for Unordered Lists
disc | circle | square | none
Note: These are the standard HTML bullets. You can also use images and markers for bullets. Please see the other HTML list tutorials for more.
| Ordered Lists – Uses numbers, letters, or Roman numerals | |
|---|---|
| If you want this style of list… | Here’s the code to make it… |
|
<ol> <li>First things first.</li> <li>Second things not first.</li> <li>Add an <LI> for each item.</li> </ol> |
|
<ol style=”list-style-type: upper-alpha;”> <li>Everybody is somebody.</li> <li>Be somebody nice!</li> </ol> |
|
<ol style=”list-style-type: lower-alpha;”> <li>A life of ease…</li> <li>is a difficult pursuit.</li> </ol> |
|
<ol style=”list-style-type: upper-roman;”> <li>Learn from others…</li> <li>or learn the hard way.</li> </ol> |
|
<ol style=”list-style-type: lower-roman;”> <li>I’m running out…</li> <li>of witty sayings.</li> </ol> |
Types of Ordinals for Ordered Lists
1 (number) | A (upper alpha) | a (lower alpha) | I (upper roman) | i (lower roman)
Note: There are other types of list markers, including images. You can also have one list start up where another ended, change marker position and more. Please see the other HTML list tutorials for more.
| Definition of Terms | |
|---|---|
| <ul> | Creates an Unordered List. Uses bullets (or images in place of bullers via CSS) to mark each list item. |
| <ol> | Creates an Ordered List. Uses numbers, upper and lower case letters, or upper or lower case Roman numerals for list markers. |
| <li> | Creates a List Item for both ordered and unordered lists. Add a new <li> tag for each list item. |
| list-style-type | This style property allows you to designate which type of list marker should be used. |
| </li> | Closes a list item. |
| </ul> | Closes an unordered list. |
| </ol> | Closes an ordered list. |
Now go make a shopping list Mr. Honkingbottom, and for goodness sakes, make darn sure your list includes several expensive things for me.
