HTML Tutorials

Making Lists

HTML Tutorials
By Jeffrey J. Walters

      There are several different types of lists which can be made with HTML. Whether your interested in making a list of links or a list of definitions, lists are very simple. All lists follow a similar format.


Unordered Lists or Bulleted Lists:

      Let us start off with the most common, the unordered list. Suppose we want to make a list of groceries like the following.

This list was made with the following statements:

<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Bread</li>
<li>Soda</li>
</ul>

       Notice how the unordered list tags, <ul> and </ul>, surround or enclose all of the list items. Also, notice that each list item is surrounded by list item tags, <li> and </li>. This format is very important.

       But, what if I don't like the discs, you ask? You can change the type of unordered list to either SQUARE, CIRCLE, or DISC. The following is an example of the same list as above, but with the TYPE set to SQUARE.

This list was made with the following statements:

<ul type="square">
<li>Eggs</li>
<li>Milk</li>
<li>Bread</li>
<li>Soda</li>
</ul>

Ordered Lists or Numbered Lists:

      Ordered or numbered lists are another great way to list items. The format is very similar to the unordered list, just change the <ul> and </ul> tags to <ol> and </ol> tags respectively.

  1. Eggs
  2. Milk
  3. Bread
  4. Soda

This list was made with the following statements:

<ol>
<li>Eggs</li>
<li>Milk</li>
<li>Bread</li>
<li>Soda</li>
</ol>

       So, are there other "TYPE's" of ordered lists or am I stuck with just numbers, you ask? You catch on quickly. There are other types of ordered lists. An example of a large roman numeral list is shown below.

  1. Eggs
  2. Milk
  3. Bread
  4. Soda

This list was made with the following statements:

<ol type="i">
<li>Eggs</li>
<li>Milk</li>
<li>Bread</li>
<li>Soda</li>
</ol>

The other types of ordered lists are show in the table below:

TYPEDefinition
TYPE="1"Arabic Numbers (default)
TYPE="a"Lowercase Letters
TYPE="A"Uppercase Letters
TYPE="i"Small Roman Numerals
TYPE="I"Large Roman Numerals

Definition or Glossary Lists:

      A definition list is a little more complex than the other lists, but this shouldn't scare anyone. There are three parts to a definition list. First, there are the <dl> and </dl> tags which surround the entire definition list. Next, there are the <dt> and </dt> tags which surround the definition terms. Lastly, there are the <dd> and </dd> tags which surround the definition data. Does this sound a little strange? Look at the example below:

Eggs
n., female reproductive
Milk
n., liquid excreted from breasts of female animals
Bread
n., food produced of flour
Soda
n., alkali, soft drink

This list was made with the following statements:

<dl>
<dt>Eggs</dt>
<dd>n., female reproductive</dd>
<dt>Milk</dt>
<dd>n., liquid excreted from breasts of female animals</dd>
<dt>Bread<dt>
<dd>n., food produced of flour</dd>
<dt>Soda</dt>
<dd>n., alkali, soft drink</dd>
</dl>

       This list doesn't seem as useful as the others, but I felt it important to point it out. Try and see where you might find it useful.


Link to this Tutorial!

Did you find this tutorial helpful? If so, please help me to share it with others by linking to it. Just place the HTML code below onto your own Web page to create a link to this tutorial.


Bookmark this Tutorial!

Bookmark this tutorial page on your favorite Social Bookmarking site.





[ Page Created December 10, 1997 ] [ Last Updated May 24, 2008 ]
Copyright ©1997-2017 Jeffrey J. Walters. All rights reserved.