Home Advertise with us Forum Articles Sitemap Contact
Logo  

HTML Lists

HTML supports three different types of lists namely ordered, unordered & definition lists. Each of these lists serves different functions as per your requirement.

Unordered Lists

This is the best type to start with, especially for the HTML beginners. An unordered list is typically in the form of a list of items marked with bullets. The unordered list starts with the opening tag <ul> & ends with the closing tag </ul>. Each item in the list starts with <li> tag & closes with </li> tag. It is also possible for you to choose the type of bullets to be displayed in the list using the type attribute. The different types available include, disc, square & circle.

Code Results
<ul>
<li>Pencil</li>
<li>Rubber</li>
</ul>
  • Pencil
  • Rubber
Ordered Lists

The ordered list is also in the form of a list of items & functions in the same manner as unordered list. The only difference is that, instead of bullets, here the items in the list are marked with numbers. The ordered list starts with <ol> tag & ends with </ol> tag. The items in the list start with <li> tag. Here again you can choose the type of numbering or lettering system to be used with the list of items. Possible types include, upper/ lower case letters (A, a), upper/lower case Roman numerals (I, i) & the default Arabic numerals (1).

Code Results
<ol>
<li>Pencil</li>
<li>Rubber</li>
</ol>
  1. Pencil
  2. Rubber

Definition Lists

As opposed to ordered & unordered lists, the definition lists are not a list of single items. These are indeed a list of items (terms) along with a description for each listed item (term). The definition list starts with <dl> tag & ends with </dl> tag, each term starts with <dt> tag & ends with </dt> tag & each description starts with <dd> tag & ends with </dd> tag.

Code Results
<dl>
<dt>Pencil</dt>
<dd>This is Natraj Pencil</dd>
<dt>Rubber</dt>
<dd>This is Natraj Rubber</dd>
</dl>
Pencil
This is Natraj Pencil
Rubber
This is Natraj Rubber
 

HTML Tip 1

Use only hexadecimal #RGB values for colors. The behavior of named colors is browser-idiosyncratic and totally unpredictable.
 
 

HTML Tip 2

You can resize your images without a graphics program by changing the HEIGHT and WIDTH in your image tag.