Basics of HTML

Organization: Lists

Lists Basics

There are three kinds of lists you can make in HTML: unordered, ordered and description (formerly called "definition").

An unordered list displays bullets to mark each list item:

An ordered list numbers the items for you:

  1. Item 1
  2. Item 2
  3. Item 3

A description list allows you to organize information in a "term/definition"-type format, but it can be used to organize any listing of information where each unit comes in two parts:

Spain
2010 World Cup winner
Italy
2006 World Cup winner

All types of lists do their own indenting automatically for you!

The coding for lists requires a conveniently mnemonic paired set of tags at the beginning and end of the list which identify its type:

<ul></ul> for an unordered list
<ol></ol> for an ordered list
<dl></dl> for a description list

Then, within the lists, each list item in an unordered and ordered list is enclosed in list item tags: <li></li> (In "old" HTML this tag didn't need a closing pair, and current browsers still support this usage. Current standards, however, require that all tags be closed.) 

For a description list, the term part of the item is enclosed by this tag: <dt></dt>  and the definition part by this: <dd></dd>.

line

So the coding for my unordered list above is:

<ul>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ul>

For the ordered list:

<ol>
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
</ol>

And for the description list:

<dl>
<dt>Spain</dt>
<dd>2010 World Cup winner</dd>
<dt>Italy</dt>
<dd>2006 World Cup winner</dd>
</dl>

Customization

You can make the numbers in ordered lists and the bullets in unordered lists conform to different styles if you want. Just add a style attribute to the <ol> or <ul> tag.

Ordered Lists

Ordered lists don't have to be numbered 1-2-3.

You can use a style attribute to change them to letters, Roman numerals, and even Greek letters! (See the list of possibilities here.)  

To make your ordering A-B-C, type this: <ol style="list-style-type:upper-alpha">

You can even make the first number something other than 1, A or I, by adding the attribute start= and giving it another value. For example: <ol style="list-style-type:upper-roman" start="II">.

Non-standard, but still widely-accepted HTML changes ordered list types with a type attribute. For example, you might see <ol type="I"> to make a Roman numeral list or<ol type="A"> for capital letters.

Unordered Lists

With <ul>'s you can really get customized!

First, you can specify another shape, other than the filled-in-circle bullet that's the default, for your bullets.

<ul style="list-style-type:circle"> makes the bullets open circles and <ul style="list-style-type:square"> makes them squares.

You can even have no bullet, just an indented listing of items, by saying <ul style="list-style-type:none">. This would make a list like this:

Spurs championships (so far):

line

For even more customization (any small image can be a bullet!) s

Horizontal Lists

To make a horizontal navigation area (like I did for this section of my personal website) you add a style statement with the display:inline value to either your list tag (and it would normally be an unordered list) or your list item <li> tags.

line

For more details on making these attractive tab-like features, check out this page from W3Schools. You can even get some free software that will help you generate a variety of these tab sets, like the one I downloaded from OverZone Software (look under downloads—it is free) to make the tabbed index you can see here.

Graphics Credits

The cute little train graphic line on this page came from Realm Graphics, a nice free graphics site.