HTML Lists
HTML provides tags for all types of listings. It categories the listing in basically three types Unordered Lists (UL), Ordered Lists (OL) and Defination Lists (DL).
Unordered Listing
Example of Unordered Listing
<ul>
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ul>
UL tag has different attributes for listing icons, we can set them using css 'list-style-type' property or UL attribute 'type'
| UL CSS Styles | UL Type Attributes |
| list-style-type: disc | type="disc" |
| list-style-type: square | type="square" |
| list-style-type: circle | type="circle" |
| list-style-type: none | type="none" |
Example of list
<ul type='disc'>
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ul>
- Mouse
- Keyboard
- CPU
- Monitor
<ul type='square'>
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ul>
- Mouse
- Keyboard
- CPU
- Monitor
<ul type='circle'>
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ul>
- Mouse
- Keyboard
- CPU
- Monitor
<ul type='none'>
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ul>
- Mouse
- Keyboard
- CPU
- Monitor
Ordered Listing
Example of Ordered Listing
<ol>
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ol>
OL tag also has different attributes for listing icons, we can set them using css 'list-style-type' property or UL attribute 'type'.
| CSS Styles | UL Type Attributes | Description |
| list-style-type: decimal | type="1" | 1,2,3 |
| list-style-type: lower-roman | type="i" | i, ii, iii |
| list-style-type: upper-roman | type="I" | I, II, III |
| list-style-type: lower-alpha | type="a" | a , b , c |
| list-style-type: upper-alpha | type="A" | A, B, C |
<ol type="1">
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ol>
- Mouse
- Keyboard
- CPU
- Monitor
<ol type="i">
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ol>
- Mouse
- Keyboard
- CPU
- Monitor
<ol type="I">
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ol>
- Mouse
- Keyboard
- CPU
- Monitor
<ol type="a">
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ol>
- Mouse
- Keyboard
- CPU
- Monitor
<ol type="A">
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ol>
- Mouse
- Keyboard
- CPU
- Monitor
Defination Lists
Example
<DL>
<DT>Capital
<DD>Delhi
<DT>
<DD>a clever programmer
<DT>Nerd
<DD>technically bright but socially inept person
</DL>
- Capital
- Delhi
- a clever programmer
- Nerd
- technically bright but socially inept person
