HTML tags are the code used to format a web page - and two useful tags are ul and ol - unordered and ordered lists.

The beauty of HTML (HyperText Markup Language) code is that, although very simple to use, it produces very effective results. Take, for example, lists of data - these can be displayed horizontally or vertically, but they can be made much more impressive by using either of two HTML tags (the HTML formatting code). These tags are:

- ul - unordered list
- ol - ordered list

By using these tags and their attributes (or properties) the web page designer can produce a web page that will be informative and easy to read for the user.

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1514893455/newwi0jmxg9tkgjtexor.png)


### UL - the Unordered List

The unordered list:

- uses the ```<ul>``` tag to start the list
- creates list item by using the ```<li>...</li>``` tags
- uses the ```</ul>``` tag to finish the list

Take for instance a list of planets:

- Mercury
- Venus
- Earth

These can be displayed as:

- Mercury
- Venus
- Earth

and the HTML code to do that would be:
```
<ul>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
</ul>
```
However, before continuing, the web page designer may want to change the look and feel of the list.

### The Unordered List Bullet Type Attribute

The unordered list shows a black disc by default, but the web page designer can change this by changing the bullet type:
```
<ul type=disc>
<ul type=circle>
<ul type=square>
```
And it's worth noting that the type can be applied to individual list items as well as the list itself.

### OL - the Ordered List

The ordered list is used in a similar way to the unordered list but the displayed list format is different:

- Mercury
- Venus
- Earth

The only change HTML code is replacing ```<ul>``` with ```<ol>``` and ```</ul>``` with ```</ol>```:
```
<ol>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
</ol>
```
And the end result is a list of planets in order of distance from the sun.

### The Types of Ordered List

Ordered lists have a type attribute as well as unordered lists, but again, the end result is slightly different:
```
i. i - <ol type=i>
ii. I - <ol type=I>
iii. a - <ol type=a>
iv. A - <ol type=A>
```
However, it's not just the ordered list's type that can be changed.

### The Start of a Ordered List

By default the start point of an ordered list will always be 1, a, A, i or I according to the type attribute, however, the starting number (or letter) can be changed as well, for example:
```
<ol start="-5">
<li>Five
<li>Four
<li>Three
<li>Two
<li>One
<li>Lift Off!
</ol>
```
Which will appear on the screen as:
```
-5. Five
-4. Four
-3. Three
-2. Two
-1. One
0. Lift Off!
```

Having seen how ordered and unordered lists can be used on their own, the final step is to combine them to improve the user experience.

### Nested Lists

Nested lists can be used to supply more information to the web page user and to group information, for example:

- Inner Planets:
1- Mercury
2- Venus
3- Earth
4- Mars
- Outer Planets
Jupiter
6- Saturn
7- Uranus
8- Neptune
9- Pluto

Which is achieved by combining unordered and ordered lists, as well as setting the ordered list's start attribute:
```
<ul>
<li>Inner Planets:
<ol>
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
</ol>
</li>
<li>Outer Planets
<ol start=5>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
<li>Pluto</li>
</ol>
</li>
</ul>
```
And so, the web page designer can produce a professional looking output just by using those few pieces of HTML code.

### Summary

The web designer can produce two types of lists on a web page:

- an unordered list
- an ordered list

Both types of list have types:
**unordered:**
```
<ul type=disc>
<ul type=circle>
<ul type=square>
```
**ordered:**
```
<ol type=i>
<ol type=I>
<ol type=a>
<ol type=A>
```
And the ordered list can be given a starting point other than the default 1, a, i, A or I. When all of the techniques are combined then the web designer can display information in a way that their users will find easy to understand.

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@aminda/how-to-create-a-list-on-a-web-page-in-aptana-studio">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>