Free HTML Training - Creating HTML Lists

Microsoft Office Training > HTML/CSS Training > Free Computer Training > Creating HTML Lists

Creating HTML Lists

Numbered Lists
Uses the ordered list tag <ol> </ol> to begin and end the list.  Each list item is created with the list item <li> </li>tag.

<ol>
     <li>List item</li>
     <li>List item</li>
</ol>

Bulleted Lists
Uses the unordered list tag <ul></ul> to begin and end the list. Each list item is created with the list item <li> </li>tag.

<ul>
     <li>List item</li>
     <li>List item</li>
</ul>

Definition Lists
Uses the definition list tag <dl> </dl> to begin and end the list.  Each term is created using the <dt> </dt> tag and each definition is created using the <dd> </dd> tag.  Only the definitions are indented.

<dl>
     <dt>A term</dt>
     <dd>It’s definition</dd>
<dt>A term</dt>
     <dd>It’s definition</dd>
</dl>

By nesting lists within lists you can increase indentation and build outlines.

Definition lists
<dl>
     <dd>An indented item</dd>
     <dl>
           <dd>A further indented item</dd>
           <dl>
                <dd>A still further indented item</dd>
           </dl>
     </dl>
</dl>

Unordered lists
<ul>
     <li>List item
     <ul>
           <li>Sub list item</li>
           <li>Sub list item</li>
     </ul>
     </li>
</ul>

Browsers usually style bullets as follows

• First level
• Second level
• Third level onwards

The appearance of the bullet can be controlled using the following style rule:

<ul style= “list-style-type:disc”>
<ul style= “list-style-type:circle”>
<ul style= “list-style-type:square”>

The rule can also be used on an individual list item within the <li> tag.

<li style= “list-style-type:disc”>

Ordered lists

To control the type of  numbering in an ordered lists you can use these attributes:

upper-alpha          lower-alpha
upper-roman          lower-roman

The default is Decimal