HTML Lists

There are three types of lists in HTML:

  • Unordered List
  • Ordered List
  • Description List

Unordered List

  • This type of list has bullets in front of its items.
  • <ul> tag is used here which stands for unordered list.
  • It is used in pairs.
  • Every list item is enclosed in <li> tag.

Unordered List: type attribute



(Optional) It defines which type of bullet will be used. It may have one of the following values-

  • circle
  • disc
  • square
  • none

Syntax:



<ul type= "circle|disc|square|none">
<li>any content</li>
<li>any content</li>
...
...
</ul>


Example: circle

The list items will be marked with circles.

<!DOCTYPE html>
<html>
<body>
<ul type="circle">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





Example: disc

The list items will be marked with bullets (default).

<!DOCTYPE html>
<html>
<body>
<ul type="disc">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





Example: square

The list items will be marked with squares.

<!DOCTYPE html>
<html>
<body>
<ul type="square">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





Example: none

The list items will not be marked.

<!DOCTYPE html>
<html>
<body>
<ul type="none">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





Ordered List



  • This type of list has numbering or alphabets in front of its items.
  • <ol> tag is used here which stands for ordered list.
  • It is used in pairs.
  • Every list item is enclosed in <li> tag.

Ordered List : type attribute



(Optional) It defines which type of bullet will be used. It may have one of the following values-

  • 1
  • a
  • A
  • i
  • I

Ordered List : start attribute



(Optional) It defines the starting value of numbering/alphabets. It will always have numeric value.

Syntax:



<ol type= "1|a|A|i|I" start= "any numeric value">
<li>any content</li>
<li>any content</li>
...
...
</ol>


Example: Number

type="1" : The list items will be numbered with numbers (default).

<!DOCTYPE html>
<html>
<body>
<ol type="1" start="7" >
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





Example: Lower Case

type="a" : The list items will be numbered with lowercase letters.

<!DOCTYPE html>
<html>
<body>
<ol type="a" start="2" >
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





Example: Upper Case

type="A" : The list items will be numbered with uppercase letters.

<!DOCTYPE html>
<html>
<body>
<ol type="A" start="1" >
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





Example: Lower Case Roman Numbers

type="i" : The list items will be numbered with lowercase roman numbers.

<!DOCTYPE html>
<html>
<body>
<ol type="i" start="3" >
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





Example: Upper Case Roman Numbers

type="I" : The list items will be numbered with uppercase roman numbers.

<!DOCTYPE html>
<html>
<body>
<ol type="I" start="6" >
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
<li>Fourth item</li>
</ol>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





Description List



  • This type of list can have a description associated with its list items.
  • <dl> tag is used here which stands for description list.
  • It is used in pair.
  • The list items are enclosed in <dt> tag.
  • The description is enclosed in <dd> tag.

Syntax:



<dl>
<dt>any content</dt>
<dd>any description</dd>
<dt>any content</dt>
<dd>any description</dd>
...
...
</dl>


Example

<!DOCTYPE html>
<html>
<body>
<dl><dt>First item</dt><dd>--This is description on First item</dd>
<dt>Second item</dt><dd>--This is description on Second item</dd>
</dl>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output





Nested HTML Lists



List can be nested in HTML. See this example.

Example

<!DOCTYPE html>
<html>
<body>
<ul><li>First item</li>
<li>Second item
<ul><li>First Sub-item</li>
<li>Second Sub-item</li>
</ul></li>
</ul>
</body>
</html>


To see live output : Visit Try Yourself Editor

Output