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

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

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

Unordered List with type "none"

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

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

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

Unordered List with type "square"

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

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

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

Unordered List with type "circle"

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

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

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

Nested Unordered List

An unordered list can have another child unordered list.

  • List 1
  • List 2
  • List 3
    • List 31
    • List 32
  • List 4

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

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

Default Ordered list with type 1

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

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

Ordered List with type "Roman"

to start an ordered list with roman characters, use type I or i.

Ordered list with uppercase roman

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

<ol type="I">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol>

Ordered list with lowercase roman

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

<ol type="i">
<li>List 5</li>
<li>List 6</li>
<li>List 7</li>
<li>List 8</li>
</ol>

Ordered List with type "Alphabet"

Ordered list with uppercase

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

<ol type="A">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol>

Ordered list with lowercase

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

<ol type="a">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol>

Ordered List starting from number more than 1

Ordered List starting from 10

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

<ol type="1" start="10">
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ol>

Ordered List starting from X

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

<ol type="A" start="24">
<li>List 5</li>
<li>List 6</li>
<li>List 7</li>
</ol>

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.

How to use description list

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

<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>