HTML Lists

These are semantic grouping elements.

Unordered Lists

Unordered lists are used to display items using bullet points. Two elements are used. UL creates an unordered list, while LI (list item) specifies an item within the list. These will be rendered in the order they appear within the HTML. The bullets may be altered using CSS or HTML.

The HTML attribute style is used to alter the bullet type. Options include disc, circle, square, and none.

style="list-style-type:disc;"

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

• Item 1
• Item 2

Ordered Lists

Ordered lists are very similar to unordered lists; however, the items are displayed in numerical order. Again, two elements are used: ol and li. The list number formats may be altered using CSS or HTML.

In HTML, the type attribute type attribute controls type of list (1 for numerals, A for uppercase, a for lowercase, I for roman, i for lowercase roman).

In HTML, the start attribute controls the beginning number or letter (so that we could begin with item 17, for example).

In HTML, the reversed attribute (reversed=”reversed”) numbers backwards (i.e. descending).

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

1. Item 1
2. Item 2

Description List

A description list includes a list of terms and descriptions. Three elements are required to create a description list.

Description List Element

This defines a description list. Within that list, the

Description Term Element

Within the description list, the description term element lists a term.

Description Definition Element

The description definition element describes or defines the term.

<dl>
    <dt>Item 1</dt>
    <dd>Item 1 description</dd>
    <dt>Item 2</dt>
    <dd>Item 2 description</dd>
    <dt>Item 3</dt>
    <dd>Item 3 description</dd>     
</dl>

HTML

Hypertext Markup Language

CSS

Cascading Style Sheets