HTML
In this tutorial we will learn about HTML lists. List are of the following types.
Unordered List <ul>
<ul>
Ordered List <ol>
<ol>
Definition List <dl>
<dl>
We use the <ul> tag to create an unordered list. As the name suggests the items of this list is not in an specific order. The items of an unordered list is show by bullet mark.
Example of an unordered list.
<ul> <li>Apple</li> <li>Mango</li> <li>Orange</li> </ul>
Output
We can change the type of the bullet mark by using the type attribute in the opening <ul> tag.
type
Following are the values for the type attribute.
<ul type="circle">
<ul type="disc">
<ul type="square">
Example of circle
<ul type="circle"> <li>Apple</li> <li>Mango</li> <li>Orange</li> </ul>
Example of disc
<ul type="disc"> <li>Apple</li> <li>Mango</li> <li>Orange</li> </ul>
Example of square
<ul type="square"> <li>Apple</li> <li>Mango</li> <li>Orange</li> </ul>
We use the <ol> tag to create an ordered list. The items of an ordered list are numbered. So, the first item gets number 1, the second item gets number 2 and so on.
Example of an ordered list.
<ol> <li>Apple</li> <li>Mango</li> <li>Orange</li> </ol>
We can change the number type of an ordered list by using the type attribute in the opening <ol> tag.
<ol type="1"> This is default Decimal Numeral.
<ol type="1">
<ol type="I"> Upper case Roman Numeral
<ol type="I">
<ol type="i"> Lower case Roman Numeral
<ol type="i">
<ol type="A"> Upper case Alphabet
<ol type="A">
<ol type="a"> Lower case Alphabet
<ol type="a">
Example of upper case Roman numeral
<ol type="I"> <li>Apple</li> <li>Mango</li> <li>Orange</li> </ol>
Example of lower case Roman numeral
<ol type="i"> <li>Apple</li> <li>Mango</li> <li>Orange</li> </ol>
Example of Upper case Alphabet
<ol type="A"> <li>Apple</li> <li>Mango</li> <li>Orange</li> </ol>
Example of Lower case Alphabet
<ol type="a"> <li>Apple</li> <li>Mango</li> <li>Orange</li> </ol>
We can even control the starting numeral by using the start attribute in the opening <ol> tag.
start
Example: List number starting from 10
<ol type="1" start="10"> <li>Apple</li> <li>Mango</li> <li>Orange</li> </ol>
We can mix both ordered and unordered list as per our requirement. Follow is an example.
<ol type="1"> <li>Apple <ul type="circle"> <li>OSX</li> </ul> </li> <li>Microsoft <ul type="square"> <li>Windows</li> </ul> </li> <li>Linux <ul type="disc"> <li>Ubuntu</li> </ul> </li> </ol>
We use the <dl> tag to create a definition list. It consists of term and definition of the term. We denote term by using the <dt> tag and we denote definitin by using the <dd> tag.
<dt>
<dd>
Example of a definition list.
<dl> <dt>HTML<dt> <dd>Hyper Text Markup Language</dd> <dt>CSS<dt> <dd>Cascading Style Sheet</dd> <dt>JS<dt> <dd>JavaScript</dd> </dl>