HTML LISTS (+ FORMATTING)

LISTS (+ FORMATTING)

INTRODUCTION

Lists are used all the time on the web. Articles, website navigation menus, and product features on e-commerce websites all make frequent use of lists – even when you can't tell that a list is being used just by looking at the web page.

There are three types of lists you can use, and this quick guide will show you how to use each.

Un ordered Lists

An un ordered list is a list in which the order of the list items does not matter. Unordered lists should be used when rearranging the order of the list items would not create confusion or change the meaning of the information on the list.

The UI element opens and closes an un ordered list. The items on the list are contained between list item, LI tags. A simple un ordered list containing three items could be created with the following HTML.

<ul> 

<li>Item A</li> 

<li>Item B</li> 

<li>Item C</li> 

</ul>

Unless CSS rules are created to change the appearance of the list, the default presentation of an unordered list is to add a disc-style bullet point on the left-hand side of each list item and to indent the entire list.

.ul_ex {
list-style-type: disc;
padding-left: 32px;
}

Ordered Lists

Ordered lists are used for lists of items for which the order of the items does matter. The syntax for an ordered list is exactly the same as for an unordered list. However, to create an ordered list, the oi tag is used rather than the ui tag. By making this one change, we can convert the unordered list in our previous example into an ordered list.

We're also going to change the text of the list items to make it clear that these are items that need to appear in a specific sequential order.

<ol> 

<li>Step 1</li> 

<li>Step 2</li> 

<li>Step 3</li> 

</ol>

As you can see below, rather than a bulleted list, we now have a numbered list.

.ol_ex {
list-style-type: decimal;
padding-left: 32px;
margin-bottom: 0px;
}

<o1>...</o1>

Create numbered (ordered) lists showing sequential oredr, preference or priority.

<u1> .. </u1>

Display a bulleted (unordered) list without any extra emphasis on order of importance.

<li> ... </li>

Specifies each list itmen to be bulleted or numered.

<d1> ... </d1>

Resereved specifically for list items definitions.

<dt> .. </dt>

The definition of a single term inline with body content.

<dd> ... </dd>

The description for the defined term.

EXAMPLE

<ol>

<li>january</li>

<li>fevraury</li>

<li>march</fi>

<.ol>

<dl>

<dt>coffee</dt>

<dd>black hot drink</dd>

<dt>milk</dt>

<dd>white cold drink</dd>

</dl>

<ul>

<li>tomato</li>

<li>lettuce</li>

<li>cheese</li>

</ui>

SAMPLE