Notice: Undefined index: topic in /home/u681245571/domains/studyglance.in/public_html/html/display.php on line 6
List Tags in HTML - HTML Tutorial | Study Glance

HTML Menu

List Tags in HTML

HTML List is a collection of items and they may be ordered or unordered. All lists may contain one or more list elements. In other words a list is a record of short pieces of information, such as people's names,fruit's names and etc.

Example:

  • Apple
  • Mango
  • Banana

HTML provides 3 types of lists,those are

  1. Ordered List ( <ol> ----- </ol> )
  2. Unordered List ( <ul> ------</ul> )
  3. Definition List ( <dl> ------</dl> )

1. Ordered List ( <ol> ----- </ol> ) :

  • This is used to display the list of items in a order. An order can be the numbers or roman numbers or alphabets.
  • This list has one inbuilt tag i.e <li> ----- </li>, it used to specifies the list items.
  • In this list the default order is numeric, and we can able to specify the order by using type attribute.
    Ex: type="A" (or) type="I" (or) type="a"

Example 1: Default(numeric) order type
<ol>
<li>Orange</li>
<li>Grape</li>
</ol>

Output:
  1. Orange
  2. Grape
Example 2: Alphabet order type
<ol type="A">
<li>Orange</li>
<li>Grape</li>
</ol>

Output:
  1. Orange
  2. Grape
Example 3: Roman Number order type
<ol type="I" start=3>
<li>Orange</li>
<li>Grape</li>
</ol>

Output:
  1. Orange
  2. Grape

2. Unordered List ( <ul> ----- </ul> ) :

  • This is used to display the list of items by using different symbols.
  • This list has one inbuilt tag i.e <li> ----- </li>, it used to specifies the list items.
  • In this list the default symbol is dot(.), and we can able to specify the symbol by using type attribute.
    Ex: type="square" (or) type="star"

Example 1: Default(.) order type
<ul>
<li>Orange</li>
<li>Grape</li>
</ul>

Output:
  • Orange
  • Grape
Example 2: Star symbol type
<ul type="circle">
<li>Orange</li>
<li>Grape</li>
</ul>

Output:
   Orange
   Grape
Example 3: Square symbol type
<ul type="star">
<li>Orange</li>
<li>Grape</li>
</ul>

Output:
   Orange
   Grape

3. Definition List ( <dl> ----- </dl> ) :

  • The definition list is used to specify list of terms and their definitions.
  • It has the following inbuilt tags

     <dl> tag specifies the definition list.

     <dt> tag specifies the defined term.

     <dd> tag specifies the definition for term.

Example :
<dl>
<dt>HTML</dt>
<dd>HTML is Markup language</dd>
<dt>XML</dt>
<dd>XML is an extended markup language</dd>
</dl>

Output:

HTML
HTML is Markup language
XML
XML is an extended markup language
Next Topic :Table Tags in HTML