HTML Lists

HTML Lists

HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:

• Ordered List or Numbered List (ol)
• Unordered List or Bulleted List (ul)
• Description List or Definition List (dl)

HTML Ordered List or Numbered List

In the ordered HTML lists, all the list items are marked with numbers. It is known as numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

<ol> 
 <li>Apple</li> 
 <li>Mango</li> 
 <li>Orange</li> 
</ol> 

Output:

1. Apple
2. Mango
3. Orange

HTML Unordered List or Bulleted List

In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

<ul> 
 <li>Apple</li> 
 <li>Mango</li> 
 <li>Orange</li> 
</ul> 

Output:

• Apple
• Mango
• Orange

HTML Description List or Definition List

HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia.

The definition list is very appropriate when you want to present glossary, list of terms or other name-value list.

The HTML definition list contains following three tags:

• <dl> tag defines the start of the list.
• <dt> tag defines a term.
• <dd> tag defines the term definition (description).

<dl> 
  <dt>Aries</dt> 
  <dd>-One of the 12 horoscope sign.</dd> 
  <dt>Bingo</dt> 
  <dd>-One of my evening snacks</dd> 
 <dt>Leo</dt> 
 <dd>-It is also an one of the 12 horoscope sign.</dd> 
  <dt>Oracle</dt> 
  <dd>-It is a multinational technology corporation.</dd>  
</dl>

Output:

Aries

-One of the 12 horoscope sign.

Bingo

-One of my evening snacks

Leo

-It is also an one of the 12 horoscope sign.

Oracle

-It is a multinational technology corporation.

Uses Of Tags

• Use the HTML <ul> element to define an unordered list
• Use the CSS list-style-type property to define the list item marker
• Use the HTML <ol> element to define an ordered list
• Use the HTML type attribute to define the numbering type
• Use the HTML <li> element to define a list item
• Use the HTML <dl> element to define a description list
• Use the HTML <dt> element to define the description term
• Use the HTML <dd> element to describe the term in a description list
• Lists can be nested inside lists
• List items can contain other HTML elements
• Use the CSS property float:left or display:inline to display a list horizontally

Supporting Browsers