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






Read more articles