HTML Lists

In this tutorial we will learn about HTML lists. List are of the following types.

Unordered List <ul>

Ordered List <ol>

Definition List <dl>

Unordered List

We use the <ul> tag to create an unordered list. As the name suggests the items of this list is not in an specific order. The items of an unordered list is show by bullet mark.

Example of an unordered list.

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

Output

• Apple
• Mango
• Orange

We can change the type of the bullet mark by using the type attribute in the opening <ul> tag.

Following are the values for the type attribute.

<ul type="circle">

<ul type="disc">

<ul type="square">

Example of circle

<ul type="circle">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ul>

Output

• Apple
• Mango
• Orange

Example of disc

<ul type="disc">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ul>

Output

• Apple
• Mango
• Orange

Example of square

<ul type="square">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ul>

Output

• Apple
• Mango
• Orange

Ordered List

We use the <ol> tag to create an ordered list. The items of an ordered list are numbered. So, the first item gets number 1, the second item gets number 2 and so on.

Example of an ordered list.

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

Output

1. Apple
2. Mango
3. Orange

We can change the number type of an ordered list by using the type attribute in the opening <ol> tag.

Following are the values for the type attribute.

<ol type="1"> This is default Decimal Numeral.

<ol type="I"> Upper case Roman Numeral

<ol type="i"> Lower case Roman Numeral

<ol type="A"> Upper case Alphabet

<ol type="a"> Lower case Alphabet

Example of upper case Roman numeral

<ol type="I">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ol>

Output

1. Apple
2. Mango
3. Orange

Example of lower case Roman numeral

<ol type="i">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ol>

Output

1. Apple
2. Mango
3. Orange

Example of Upper case Alphabet

<ol type="A">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ol>

Output

1. Apple
2. Mango
3. Orange

Example of Lower case Alphabet

<ol type="a">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ol>

Output

1. Apple
2. Mango
3. Orange

We can even control the starting numeral by using the start attribute in the opening <ol> tag.

Example: List number starting from 10

<ol type="1" start="10">
  <li>Apple</li>
  <li>Mango</li>
  <li>Orange</li>
</ol>

Output

10. Apple
11. Mango
12. Orange

Mixture of Ordered and Unordered list

We can mix both ordered and unordered list as per our requirement. Follow is an example.

<ol type="1">
  <li>Apple
  	<ul type="circle">
  	  <li>OSX</li>
  	</ul>
  </li>

  <li>Microsoft
    <ul type="square">
      <li>Windows</li>
    </ul>
  </li>

  <li>Linux
    <ul type="disc">
      <li>Ubuntu</li>
    </ul>
  </li>
</ol>

Output

1. Apple
   • OSX
2. Microsoft
   • Windows
3. Linux
   • Ubuntu

Definition List

We use the <dl> tag to create a definition list. It consists of term and definition of the term. We denote term by using the <dt> tag and we denote definitin by using the <dd> tag.

Example of a definition list.

<dl>
  <dt>HTML<dt>
  <dd>Hyper Text Markup Language</dd>
  <dt>CSS<dt>
  <dd>Cascading Style Sheet</dd>
  <dt>JS<dt>
  <dd>JavaScript</dd>
</dl>

Output

HTML

Hyper Text Markup Language

CSS

Cascading Style Sheet

JS

JavaScript