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>
  1. Mouse
  2. Keyboard
  3. CPU
  4. Monitor
 
<ol type="i">
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ol>
  1. Mouse
  2. Keyboard
  3. CPU
  4. Monitor
 
<ol type="I">
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ol>
  1. Mouse
  2. Keyboard
  3. CPU
  4. Monitor
 
<ol type="a">
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ol>
  1. Mouse
  2. Keyboard
  3. CPU
  4. Monitor
 
<ol type="A">
<li>Mouse</li>
<li>Keyboard</li>
<li>CPU</li>
<li>Monitor</li>
</ol>
  1. Mouse
  2. Keyboard
  3. CPU
  4. 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