HTML Lists: Creating Lists with HTML

Creating lists is easy, but first you need to determine what kind of list you want to make. In the tables below you'll see different kinds of HTML 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. Gleeblebottom, here we go...

Unordered Lists - Uses Bullets
If you want this style of list...	Here's the code to make it...
First things first. Second things not first. Add an <LI> for each list item.	<ul> <li>First things first.</li> <li>Second things not first.</li> <li>Add an <li> for each list item.</li> </ul>
Smiles... increase your face value!	<ul style="list-style-type: circle;"> <li>Smiles...</li> <li>increase your face value!</li> </ul>
Friends are... family we choose!	<ul style="list-style-type: square;"> <li>Friends are...</li> <li>family we choose!</li> </ul>

Ordered Lists - Uses numbers, letters, or Roman numerals
If you want this style of list...	Here's the code to make it...
First things first. Second things not first. Add an <LI> for each item.	<ol> <li>First things first.</li> <li>Second things not first.</li> <li>Add an <LI> for each item.</li> </ol>
Everybody is somebody. Be somebody nice!	<ol style="list-style-type: upper-alpha;"> <li>Everybody is somebody.</li> <li>Be somebody nice!</li> </ol>
A life of ease... is a difficult pursuit.	<ol style="list-style-type: lower-alpha;"> <li>A life of ease...</li> <li>is a difficult pursuit.</li> </ol>
Learn from others... or learn the hard way.	<ol style="list-style-type: upper-roman;"> <li>Learn from others...</li> <li>or learn the hard way.</li> </ol>
I'm running out... of witty sayings.	<ol style="list-style-type: lower-roman;"> <li>I'm running out...</li> <li>of witty sayings.</li> </ol>
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. Learn all this and more in the members area. I can't put everything on the public site, but the member site is bulging with great tutorials, over 30 reference charts, free software, fonts, computer tips and much more.

Definition of Terms
<ul>	Creates an Unordered List. Uses bullets for each list item.
<ol>	Creates an Ordered List. Uses numbers, letters, Roman numerals, or images for list markers (bullets).
<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.

Good Things to Know

Lists are handier to use than creating simulated lists by coding your own numbers because you can insert a list item at any point and the browser automatically renumbers all items.
Using a list means all your text for each list item is indented. Coding list by hand means long sentences or paragraphs will wrap under the number instead of remaining indented.
You can interrupt your list at any point by canceling it, add commentary, then restart the list at the number or letter you left off with using CSS. This can also be done with HTML, but that method is deprecated.
You can use other HTML tags within a list, such as paragraphs, bold and italic text for emphasis, or other elements.
You can also create lists...
1. ...within lists using the list-style-type property and value
  1. to create the desired
  2. list marker variations.
2. As you cancel each list the indentation stops and
3. the list items continue from the previous list.
If you know what I mean. :)

Now go make a list Mr. Gleeblebottom, and for goodness sakes, please loosen your girdle. Your face is turning blue and your eyes are starting to bulge.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]