HTML Lists

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

Unordered lists and ordered lists works the same way, except that the Unordered is used for non-sequential lists with list items usually preceded by bullets and the numbers 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 are list with bullets and without sequence. By default, unordered list are styled with disk (•). Till html4/xhtml, 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 list-style property..

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

Unordered List example

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

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

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

<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 child element of ul or ol.

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

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

Attributes of OL

Type of Ordered List

1. Number
2. Roman
3. Alphabet

<ol>

	<li>List 1</li>

	<li>List 2</li>

	<li>List 3</li>

	<li>List 4</li>

</ol>

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

<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 1</li>

	<li>List 2</li>

	<li>List 3</li>

	<li>List 4</li>

</ol>

Start Attribute

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

<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

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

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

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 website.</dd>

</dl>

<dl>
	<dt>DATABASE</dt>

	<dd>ORACLE, My SQL, and  SQL Server</dd>

</dl>