HTML Tutorials Lists- Ordered, Unordered, Definition

Full Tutorial List           Tutorials (50)       Sept 01, 2009


In HTML their are three ways of displaying lists of information (1) Ordered Lists (2) Unordered Lists and finally (3) Definition Lists.
(1) HTML Ordered Lists
In HTML you use the <ol> tag to start an ordered list. You then place the list item <li>  tag between your opening <ol> and closing </ol> tags to create list items.  Ordered lists are lists of numbers and are displayed in your browser in sequence ordered by number for example.

<html><body>
<h2>An Ordered List Sample:</h2>
<ol>
  <li>Ford</li>
  <li>Toyota</li>
  <li>Volswagon</li>
</ol>
</body>
</html>

The output from the above example in internet explorer would look like this:

html lists Ordered

Ordered Lists do not always have to be numeric in fact there are four other types of ordered lists.

Ordered lists can be (1) Roman numerals (Uppercase), (2) Roman numerals (lowercase), (3) letters (Uppercase), (4) Letters (Lowercase)

Ordered list Type 1
<ol type="a">
    <li>list item1</li>
    <li>list item2</li>
</ol>

Output for above ordered list starts with 'a'

  1. list item1
  2. list item2


Ordered list Type 2
<ol type="A">
    <li>list item1</li>
    <li>list item2</li>
</ol>

Output for above ordered list starts with 'A'

  1. list item1
  2. list item2


Ordered list Type 3
<ol type="i">
    <li>list item1</li>
    <li>list item2</li>
</ol>

Output for above ordered list starts with 'i':

  1. list item1
  2. list item2


Ordered list Type 4
<ol type="I">
    <li>list item1</li>
    <li>list item2</li>
</ol>

Output for above ordered list starts with 'I'

  1. list item1

 

HTML Unordered Lists:


In HTML an unordered list is a list of items. The list items are marked with bullets (a list is a list of items, each one preceded by a “bullet”).  The unordered list begins and ends with the tags <UL> and </UL> respectively. Each item in the list is marked using the <LI> tag, which stands for "List Item."

Unordered list

The term "unordered list" may be a bit unfamiliar to you, but odds are you've heard of the "bullet list." That's exactly what an unordered list is a list of items, each one preceded by a "bullet" (small black circle).
<LI> has a corresponding </LI>, but this closing tag is not required to end the list item.


Here's the markup for a simple list:

 

<html><body>
<h2>An Unordered List Sample:</h2>
<UL>
<LI>Ford
<LI>Toyota
<LI>Volswagon
<LI>Mercedes
<LI>Fiat
</UL>
</body>
</html>


Output of the above unordered list

html Unordered List

You can add images, links, paragraphs etc to list items, for example

<LI><a href="http://www.beginner-tutorial.com"> <b>HTML Tutorials</b></a>

HTML Definition Lists:


In HTML a definition list is a list of items, it consist of two parts: a term and a description.

To create a definition list in HTML, you need three HTML elements; a container <dl>, a definition term <dt>, and a definition description <dd>.

<dl> - defines the start of the list
<dt> - definition term
<dd> - defining definition

Example:

<html><body>
<h2>Definition List Sample:</h2>
<dl>
<dt>Ford</dt>
<dd>Car Created by Ford, comes in many makes and Models</dd>
<dt>Toyota</dt>
<dd> Car Created by Toyota, comes in many makes and Models </dd>
</dl> 
</body>
</html>


The output is:

HTML Definition List

 

That’s it on the basics of elements and tags.


C++ Functions Tutorial