• Have Any Question?
  • contact@eitworld.com

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



Real Time Web Analytics