Tuts Master 😉

HTML List Tags – UL, OL and DL

htmllist tags

There are many reasons you might want to add a lists to your pages, from putting your five favorite albums on your homepage to including a numbered set of instruction for visitors to follow. In HTML you can create three types of lists.

  1. Unordered Lists. 
  2. Ordered List. 
  3. Definition LIst.

By using lists you can arrange your content or information in a well-mannered form. You can manage them in the form of Ascending and Descending order or indent-wise also.   In below figure you can see all three types of lists.

 
List Example

HTML <ul> Element

The html <ul> element is used to create Unordered Lists. If you want to make a list of bullet points, you write the list within the <ul> element. Each bullet point or the line you want to write should then be contained between opening <li> tag and closing </li> tags.

HTML Code

<ul>            
           <li> Apple </li>
           <li> IBM </li>
           <li> Intel </li>
</ul>

HTML Output

  • Apple
  • IBM
  • Intel

HTML <ol> Element

Sometime, you want your list to be ordered. In an ordered list, rather than prefixing each point with a bullet point you can use either number (1,2,3), letters (A, B, C) or Roman numerals (I , II, III) to prefix the list item.    An ordered list is contained inside the <ol> element. each item in the list should then be nested inside the <ol> element and contained between opening <li> and closing </li> tags.

HTML Code

<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>

HTMl Output

  1. One
  1. Two
  1. Three

Using type attribute to select type of ordered list (Deprecated)

The type attribute on the <ol> element enables you to change the ordering of list items from the default of numbers to the options listed in the table that follows by giving the type attribute the corresponding character.

HTML Code

<ol type="A">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>

HTML Output

  1. One
  1. Two
  1. Three

Using the start attribute to change the starting number in ordered list. (Deprecated)

If you want to specify the number that a numbered list should start at, you can use the start attribute on <ol> element. The value of this attribute should be the numeric representation of that point in the list.

HTML Code

<ol type='I' start='10'>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ol>

HTML Output

  1. One
  1. Two
  1. Three

The definition list is a special kind of list for providing terms followed by a short text definition or description for them. Definition lists are contained inside the <dl> element. The <dl> element then contains alternating <dt> and <dd> elements. The content of the <dt> element is the term you will be defining. The <dd> element contains the definition of the previous <dt> element.

HTML Code

<dl> 
<dt> Unordered List </dt>
<dd> A list of bullets point</dd>
<dt> Ordered List </dt>
<dd>An Ordered list of Points such as a numbered set of steps</dd>
<dt>Definition List</dt>
<dd>A list of term definition</dd>
</dl>

HTML Output

Unordered List
A list of bullets point
Ordered List
An Ordered list of Points such as a numbered set of steps
Definition List
A list of term definition

Nesting of Lists

Nesting meaning is list inside list. You can nest lists inside other lists. for example, you might want a numbered list with separate points corresponding to one of the list items. Each nested list will be numbered separately unless you specify otherwise using the start attribute. And each new lists should be placed inside a <li> element.

HTML Code

<ol type="1">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li> item four
  <ol type="1">
    <li>Item 4.1</li>
    <li>Item 4.2</li>
    <li>Item 4.3</li>
  </ol>
 </li>
 <li> Item Five</li>
</ol>

HTML Output

  1. Item 1
  1. Item 2
  1. Item 3
  1. item four
    1. Item 4.1

    1. Item 4.2

    1. Item 4.3
  1. Item Five

In