Welcome to Our Free Tutorial!

HTML Lists

There are 3 different types of lists. A <ul> tag starts unordered lists, <ol> tag starts an ordered list, <dl> tag starts with definition lists. Use the start and type attributes to show list accordingly.

1. <ol> - ordered list; numbers
2. <ul> - unordered list; bullets
3. <dl> - definition list; dictionary

HTML Ordered Lists:

Use the <ol> tag to begin an ordered list. In place <li> (List Items) tag between opening <ol> and closing </ol> tags to create list items. Ordered means numbered.

HTML Code:

 <h4 align="center">Sports </h4>
<ol>
<li>Play Cricket </li>
<li>Play Volley Ball </li>
<li>Play Foot Ball </li>
</ol>

Output:

Sports

  1. Play Cricket
  2. Play Volley Ball
  3. Play Foot Ball

You can start ordered list from any number beside 1 using the start attribute.

HTML Code:
<h4 align="center">Sports </h4>
<ol start="4">
<li>Play Cricket </li>
<li> Play Volley Ball </li> <li>Play Foot Ball </li> </ol>

OUTPUT

Sports

  1. Play Cricket
  2. Play Volley Ball
  3. Play Foot Ball
There are 4 other types of ordered list. Instead with generic numbers like Roman numbers or letters, both the Capital and lower-case. You can use type attribute to change the numbering.

HTML Code:

<ol type="a">
<ol type="A">                                              
<ol type="i">
<ol type="I">

HTML Ordered List Types:

Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals
a. Play Cricket A. Play Cricket i. Play Cricket I. Play Cricket
b. Play Volley Ball B. Play Volley Ball ii. Play Volley Ball II. Play Volley Ball
c. Play Foot Ball C. Play Foot Ball iii. Play Foot Ball III. Play Foot Ball

HTML Unordered Lists

It create a bulleted list with the < ul> tag. Bulleted list have three elements: squares, discs, and circles. The default bullet list displayed the full disc.

HTML Code:

<h4 align="center">Fruit List </h4>
<ul>
<li>Apple </li>
<li>Banana </li>
<li>Orange </li>
<li>Papaya </li>
</ul>

Output

Fruit List

  • Apple
  • Banana
  • Orange
  • Papaya

HTML Code:-

<ul type="square">
<ul type="circle">
<ul type="disc">

Output

type="square" type="disc" type="circle"
  • Apple
  • Apple
  • Apple
  • Banana
  • Banana
  • Banana
  • Orange
  • Orange
  • Orange
  • Papaya
  • Papaya
  • Papaya

HTML Definition List

<dl> - defines the start of the list
<dd> - defining definition
<dt> - definition term

HTML Code:

<dl>
<dt><b> Stress </b> </dt>
<dd>is the "Wear and tear"</dd>
<dt> <b>our bodies</b> </dt>
<dd>experience as we adjust.</dd>
</dt>

Output:-

Stress
is the "Wear and tear"
our bodies
experience as we adjust.