HTML Lists

Posted on by

A list have set of items, based on the item sequence and order  list can be implemented in three ways that are Ordered List, Unordered List and Description List.

  1. <ul></ul>
  2. <ol></ol>
  3. <dl></dl>
  4. <li></li>

These are the tags used in lists.

1.Items <li></li>:

<li></li> tag is used to indicate items in a list.

Each list should have at least one item in it.

2.Unordered List <ul></ul>:

<ul></ul> this tag is used to  indicate the unordered list in html.

Unodered list have no specific sequence or order for its items.

By default the unordered list style is circle.

Its style type are circle, disc, square, none.

The style inside list is implemented by using list-style-type attributes inside style and type.

Example:

<ul>
<li>Blue</li>
<li>Green</li>
<li>Yellow</li>
<li>Red</li>
</ul>

Output:

  • Blue
  • Green
  • Yellow
  • Red

3.Ordered List <ol></ol>:

<ol></ol> this tag is used to  indicate the ordered list in html.

Its attributes are type and its values are  1, A, a, I.

By default the ordered list style value is 1 that is numeric.

Example:

<ol>
<li>Blue</li>
<li>Green</li>
<li>Yellow</li>
<li>Red</li>
</ol>

Output:

  1. Blue
  2. Green
  3. Yellow
  4. Red

4.Description List <dl></dl>:

<dl></dl> this tag is used to indicate description list or definition list in html. it has 2 tags

<dt></dt>   –  Term tag.

<dd></dd> –  Description of the term.

Example:

<dl>
<dt>Green</dt>
  <dd>***Go</dd>
<dt>Yellow</dt>
  <dd>***Warning</dd>
<dt>Red</dt>
  <dd>***Stop</dd>
</dl>

Output:

Green
***Go
Yellow
***Warning
Red
***Stop