Three Types of HTML Lists

Using lists are a quick method for displaying information in a structured and easy to read format. The short format of a list makes the information stands out. The three list formats used on the web are: Unordered (bulleted), Ordered (numbered) and Definition (dictionary) Lists. Open demo_html.htm file in tutorial.01\demo folder. Enter and view the html output.

Adding bulleted images is easily achieved with CSS .

Unordered Lists or Bullet  <ul>  </ul>

  • Unordered lists are widely used on the Web for links.
  • Unordered Lists open <ul> and close with</ul>
  • Each item in the list is a List Item <li>
  • The bullet list attributes are: Disc, Circle, Square

Deprecated attributes

<ul type="square">
Use stylesheet: list-style-type:square

The Tags:

<ul>
<li>Roses</li>
<li>Hydrangeas</li>
<li> Irises</li>
</ul>

Ordered Lists or Numbered <ol>  </ol>

  1. Ideal for explaining step by step instructions.
  2. Ordered Lists open <ol> and close with</ol>
  3. Each item in the list is a List Item <li>
  4. Lists can be nested

Nested List

  1. Tulips
  2. Irises
  3. Roses
    • Miniature
    • Tea
    • Bush

Ordered List Attributes

Definition List <dl></dl>

♥ These lists are suited for glossaries terms that need explanations
♥ Definition lists have three tags -DL, DT, DD
♥ Open and close with <dt>
Definition Term starts each word <dt> and closes</dt>
Definition Description opens <dd> and closes with</dd>
♥ All elements(tags) must be closed

<dl>
<dt> Definition Term</dt>
<dd> Definition Description</dd>

<dt> Definition Term</dt>
<dd> Definition Description</dd>

</dl>
Web Design with XHTML Part I
Doris Cuffey, Instructor