How to Create a List on a Web Page in Aptana Studio

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.

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.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---