Introduction
In this post we will see how to create lists in a web page. There are three types of lists. They are ordered lists, unordered lists and definition lists.Unordered lists
This type of lists starts with <ul> tag. Each list item starts with <li> tag.Example
<ul>
<li>cats</li>
<li>dogs</li>
<li>black roses</li>
</ul>
Different types of unordered lists are as follows:<br/>
<ul style="list-style-type:circle">
<li>cats</li>
<li>dogs</li>
<li>black roses</li>
</ul>
<ul style="list-style-type:square">
<li>cats</li>
<li>dogs</li>
<li>black roses</li>
</ul>
Output
- cats
- dogs
- black roses
- cats
- dogs
- black roses
- cats
- dogs
- black roses
Ordered lists
This type of lists starts with <ol> tag. Each list item starts with <li> tag.Example
<ol>
<li>cats</li>
<li>dogs</li>
<li>black roses</li>
</ol>
There different kinds of ordered lists such as<br/>
<ol type="A">
<li>cats</li>
<li>dogs</li>
<li>black roses</li>
</ol>
<ol type="a">
<li>cats</li>
<li>dogs</li>
<li>black roses</li>
</ol>
<ol type="i">
<li>cats</li>
<li>dogs</li>
<li>black roses</li>
</ol>
<ol type="I">
<li>cats</li>
<li>dogs</li>
<li>black roses</li>
</ol>
Output
- cats
- dogs
- black roses
- cats
- dogs
- black roses
- cats
- dogs
- black roses
- cats
- dogs
- black roses
- cats
- dogs
- black roses
Definition lists
This type of lists contains a name and description of that name. List starts <dl> tag.<dt> is used for a term and <dd> is used for description of that term.Example
<dl>
<dt>Tiger</dt>
<dl>National animal of India</dl>
<dt>Lion</dt>
<dd>King of jungle</dd>
<dt>Cat</dt>
<dd>My favourite pet</dd>
Output
- Tiger
- Lion
- King of jungle
- Cat
- My favourite pet
- National animal of India
Nested List Example
<ul><li>Sugar</li>
<li>Salt</li>
<li>Spices
<ul>
<li>Clover</li>
<li>Chillies</li>
<li>Cinnamon</li>
</ul>
</li>
<li>Vinegar</li>
</ul>
Output
- Sugar
- Salt
- Spices
- Clover
- Chillies
- Cinnamon
- Vinegar
