Web Design & Development

[ Web Design & Development Topics ]

Creating Lists in (X)HTML

You can make lists that are ordered, unordered or are definition lists.

Unordered Lists

This list above was an unordered list which has bullets for each item. The source code looks like this:

<ul>
<li>Ordered - has numbers</li>
<li>Unordered - has bullets</li>
<li>Definition list - indented definition </li>
</ul>

You can change the bullet type by using "type" like this:

Ordered Lists

Lets try the same thing with an ordered list. Ordered lists are numeric like this:

  1. Ordered - has numbers
  2. Unordered - has bullets
  3. Definition list - indented definition

And the source code looks like this:

<ol>
<li>Ordered - has numbers</li>
<li>Unordered - has bullets</li>
<li>Definition list - indented definition </li>
</ol>

You can change the numbering method used in the following ways:

You can also change the number the list starts with by using "start".

Combine these two and you get something like this:

<ol type="I" start="7">

Which would do this:

  1. Alex
  2. Margo

Definition Lists

Now a definition list is a bit different it works more like this:

Ordered
has numbers
Unordered
has bullets
Definition list
indented definition

And the source code looks like this:

<dl>
<dt>Ordered</dt>
<dd>has numbers</dd>
<dt>Unordered</dt>
<dd>has bullets</dd>
<dt>Definition list</dt>
<dd>indented definition</dd>
</dl>