Unordered List

October 22, 2011

Unordered List

Lists are often used to present information in an easy to read approach. List allows you to make your key points stand out from the rest of the text; it is also used to indent information. List can be numbered, bulleted or printed without numbers and bullets.

Creating Unordered List
An unordered list can be used whenever the order of items you want to list is insignificant or the items to be listed are in no particular order. HTML offers three different default special characters to use with an unordered list: a bullet (●), a circle (O ), and a square. In order to create unordered or bulleted list you need the following tags: <ul>, <li>, </li> and </ul>. Open your text editor again and key in the code below.

<html>
<head><title>Unordered List</title></head>
<body>
<p>My Favorite Websites:</p>
<ul>
<li>Google.com</li>
<li>Yahoo.com</li>
<li>Facebook.com</li>
<li>Wikipedia.org</li>
<li>Youtube.com</li>
</ul>
</body>
</html>

The previous code will be displayed in Mozilla Firefox like this.

About the code:

The <ul> tag stands for unordered list, it tells the browser that an unordered list is about to start.
The <li> tag stands for list item, wherein each item corresponds to a bullet.
The </li> tag tells the browser that the list item has ended.
The </ul> tag tells the browser to end the unordered list.

You can also change that appearance of the bullet using the type attribute; type=”circle” will produce (O ) bullet, type=”square” will produce ( ) bullet. You can use the type attribute both in ul and li tag.

Key in the following codes on your text editor.

<html>
<head><title>Unordered List 2</title></head>
<body>
<p>My Favorite Websites:</p>
<ul>
<li>Google.com</li>
<li type="circle">Yahoo.com</li>
<li type="square">Facebook.com</li>
<li type="disc">Wikipedia.org</li>
<li>Youtube.com</li>
</ol>
</body>
</html>

The code will be rendered by Mozilla Firefox this way.