Type of HTML List

HTML Lists are used to show single or multiple list item in a list group.

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


Unordered List

Unordered List are list with bullets. They are Non Sequential. 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.

Use Unordered List where sequence is not required. For Example, list of fruits, vegetables etc.

Unordered List with Disk

  • 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 descendant unordered list, but only inside list item.
A <ul> cannot have another <ul> element. Only <li> is allowed as chlid element of ul or ol.

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

Type of Ordered List

Default Ordered list with type 1

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

<ol type="1">
<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>

Start Attribute in Ordered List

start attribute in ordered list can start list from n number, instead of 1, A, a, I or i. value of start attribute is always a number.


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>

Reversed Attribute

Ordered List can also have optional reversed attribute. Reversed attribute can reverse sequence or order of ordered list.

  1. List 1
  2. List 2
  3. List 3
  4. List 4
<ol start="10" reversed>
	<li>List 1</li>
	<li>List 2</li>
	<li>List 3</li>
	<li>List 4</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 website.</dd>
</dl> <dl> <dt>DATABASE</dt>
<dd>ORACLE, My SQL, and SQL Server</dd>
</dl>