HTML List
HTML lists are used to display the information in a list. There are three types of list in HTML.
- Unordered list
- Ordered list
- Description list
Unordered List
Unordered list is represented by <ul>...</ul> tag and every list item is represented by <li>...<li> tag.
Example:
The type Attribute for Unordered List
In Unordered list the items are displayed in bulleted format. There are four types of format in unordered list:
- disc - It is the default style in unordered list. Using this the list item marked with a bullet style.
- circle - Using this the list item marked with a circle shape.
- square - Using this the list item marked with a square shape.
- none - Using this the list items aren't marked.
Example using circle:
<li>This is circle list style</li>
<li>This is circle list style</li>
<li>This is circle list style</li>
</ul>
Run Example
Example using square:
<li>This is square list style</li>
<li>This is square list style</li>
<li>This is square list style</li>
</ul>
Run Example
Example using none:
<li>This is none list style</li>
<li>This is none list style</li>
<li>This is none list style</li>
</ul>
Run Example
Note: The type attribute of unordered list is not supported by HTML 5. In HTML 5 it can be used using style attribute. Here is an example of it:
Example using style attribute:
<li>This is list 1</li>
<li>This is list 2</li>
<li>This is list 3</li>
</ul>
Run Example
Ordered List
Ordered list is represented by <ol>...</ol> tag and every list item is represented by <li>...<li> tag.
Example:
The type Attribute for Ordered List
In Ordered list the items are displayed in numbering format. There are several types of format in unordered list:
- "1" - It is the default style in Ordered list. Using this the list item marked with numbers.
- "I" - Using this the list item marked with uppercase roman numbers.
- "i" - Using this the list item marked with lowercase roman numbers.
- "A" - Using this the list item marked with uppercase alphabets.
- "a" - Using this the list item marked with lowercase alphabets.
Example using uppercase roman numbers:
<li>This is uppercase roman list style</li>
<li>This is uppercase roman list style</li>
<li>This is uppercase roman list style</li>
</ol>
Run Example
Example using lowercase roman numbers:
<li>This is lowercase roman list style</li>
<li>This is lowercase roman list style</li>
<li>This is lowercase roman list style</li>
</ol>
Run Example
Example using uppercase alphabets:
<li>This is uppercase alphabets style</li>
<li>This is uppercase alphabets style</li>
<li>This is uppercase alphabets style</li>
</ol>
Run Example
Example using lowercase alphabets:
<li>This is lowercase alphabets style</li>
<li>This is lowercase alphabets style</li>
<li>This is lowercase alphabets style</li>
</ol>
Run Example
Description List
In Description list the list items are described. It is represented by <dl>...</dl>. There are also another two tags, <dt>...</dt> and <dd>...</dd> are used between the <dl>...</dl> tag. The <dt> tag defines the item of the list and <dd> describes the item.
Example:
<dt>CSE</dt>
<dd>Computer Science and Engineering</dd>
<dt>CE</dt>
<dd>Civil Engineering</dd>
<dt>IT</dt>
<dd>Information Technology</dd>
</dl>
Run Example
The start Attribut of Ordered List
In ordered list the items are start with 1 or I or i or A or a. You can change the starting number using the start attribute. If you give the value of start = "10" then the list will start counting from 10.
Example:
<li>This is list J</li>
<li>This is list K</li>
<li>This is list L</li>
</ol>
Run Example