What is HTML List

There are three types of list in HTML, unordered lists , ordered lists & description list.

Unordered lists and ordered lists work the same way, except that the Unordered is used for non-sequential lists with list items usually preceded by bullets and the letters is for Ordered List, which are normally represented by incremental numbers.

The ul tag is used to define unordered list and the ol tag is used to define ordered list. Inside the list, the li tag is used to define each list item.

Type of list in HTML

  1. Unordered List
  2. Ordered List
  3. Description List

Unordered List

Unordered List are list without counting. By default, unordered list are styled with disk. Till html4, type attribute was used to change list style. But in HTML5, type attribute of unordered list is deprecated. But we can remove or change list style using CSS.

Create Unordered List

(How to write Unordered List)


<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>

(Browser View)

  • List 1
  • List 2
  • List 3
  • List 4

Unordered List with type "none"

Note: type attribute for ul is deprecated in HTML5. Use CSS to change type of unordered list.


<ul type="none">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>

(Browser View)

  • List 1
  • List 2
  • List 3
  • List 4

Unordered List with type "square"

Note: type attribute for ul is deprecated in HTML5. Use CSS to change type of unordered list.


<ul type="square">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>

(Browser View)

  • List 1
  • List 2
  • List 3
  • List 4

Unordered List with type "circle"

Note: type attribute for ul is deprecated in HTML5. Use CSS to change type of unordered list.


<ul type="circle">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>

(Browser View)

  • List 1
  • List 2
  • List 3
  • List 4

In HTML5, type attribute of unordered list( ul ) is deprecated. Use css instead.



Ordered List

Ordered list use numbers, alphabets and Roman characters. Ordered list are countable. By default, ordered list are styled with numbers. We can change list style using type attribute or css.

Default Ordered List


<ol>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol>

(Browser View)

  1. List 1
  2. List 2
  3. List 3
  4. List 4

Ordered List with type "Roman"


<ol type="I">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol> <ol type="i">
<li>List 5</li>
<li>List 6</li>
<li>List 7</li>
<li>List 8</li>
</ol>

(Browser View)

  1. List 1
  2. List 2
  3. List 3
  4. List 4
  1. List 5
  2. List 6
  3. List 7
  4. List 8

Ordered List with type "Alphabet"


<ol type="a">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol> <ol type="A">
<li>List 5</li>
<li>List 6</li>
<li>List 7</li>
<li>List 8</li>
</ol>

(Browser View)

  1. List 1
  2. List 2
  3. List 3
  4. List 4
  1. List 5
  2. List 6
  3. List 7
  4. List 8

Ordered List starting from number more than 1


<ol type="n" start="10">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol> <ol type="A" start="24">
<li>List 5</li>
<li>List 6</li>
<li>List 7</li>
</ol>

(Browser View)

  1. List 1
  2. List 2
  3. List 3
  4. List 4
  1. List 5
  2. List 6
  3. List 7

In HTML5, type attribute of Ordered list( ol ) is not deprecated. We can use either css or html type attribute.



Description List

Description List, formerly known as Definition List is a list with description term and description data.


<dl>
<dt>WEB DESIGNING</dt>
<dd>To Design front end of a web application or website.</dd>
</dl> <dl> <dt>DATABASE</dt>
<dd>ORACLE, My SQL, and SQL Server</dd>
</dl>

(Browser View)

Web Designing
To Design front end of a web application or website.
DATABASE
ORACLE, My SQL, and SQL Server