Making Ordered and Unordered Lists

We sometimes find ourselves wanting to make lists, or an outline of certain items or, if we have a blog, a list of our friends names, which would look like this:

John
Mary
Annie
James
Anthony

And usually, write the HTML code for that as:

John<br>
Mary<br>
Annie<br>
James<br>
Anthony<br>

The Solution: HTML

HTML actually has a function of creating lists; two kinds in fact: ordered lists and unordered lists. Ordered lists create the list using either numerals or letters, like shown below:

1. John
2. Mary
3. Annie
4. James
5. Anthony

The best thing about ordered list is that it doesn’t matter in what order you write the list, the first item will always have the first number/letter in the list. So even if you rearrange the list, the top item will still be ordered first.

Unordered lists create our list in any order, that is, the items do not follow any sequence, like shown below. They also make use of bullets instead of numbers/letters.

John
Mary
Annie
James
Anthony

The Codes: HTML

So how do we achieve this in HTML? Simple follow the HTML codes below.

Ordered List

<ol>
<li>John
<li>Mary
<li>Annie
<li>James
<li>Anthony
</ol>

Unordered List

<ul>
<li>John
<li>Mary
<li>Annie
<li>James
<li>Anthony
</ul>

Ordered lists are indicated by the <ol> and </ol> as the start and the end of the list; while unordered lists are indicated by <ul> and </ul>. Individual items on the lists are indicated by the HTML tag <li>. To add another item on the list, just type the <li> tag followed by the item.

The Code: XHTML

Since XHTML requires that all tags be closed, we would have to change the <li> to <li /> or to add an ending list tag </li> like below:

Example List Type 1

<ol>
<li />John
<li />Mary
<li />Annie
<li />James
<li />Anthony
</ol>

Example List Type 2

<ol>
<li>John</li>
<li>Mary</li>
<li>Annie</li>
<li>James</li>
<li>Anthony</li>
</ol>

Creating List with Cascading Style Sheets Formatting

Lists can be further formattted using Cascading Style Sheets. Adjustments can be made in the margins, borders, backgrounds and even in the use of image bullets.

February 2nd, 2006 |