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.
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:
These can be displayed as:
- Mercury
- Venus
- Earth
and the HTML code to do that would be:
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>:
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:
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:
Which will appear on the screen as:
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. Mercury2. Venus3. Earth4. Mars
- Outer Planets
Which is achieved by combining unordered and ordered lists, as well as setting the ordered list's start attribute:
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.
 |
 |
 |
 |
