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!) see the Styles Usage tab.

Horizontal Lists

To make a horizontal navigation area (like I did for this guide) 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; just google "tab generators."

Graphics Credits

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

Last updated:

Back to kathyamen.net