HTML List

Previous
Next

What is HTML List ?

To specify information lists, HTML lists shall be used. All lists can include one or more elements of the list. Three different kinds of HTML lists are available:

  • Ordered List or Numbered List (ol)
  • Unordered List or Bulleted List (ul)
  • Description List or Definition List (dl)

 

Example:


<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ol>
</body>
</html>

Output:

An Unordered HTML List

  • Mandua
  • Kandali
  • Gahat

 

 

An Ordered HTML List

  1. Mandua
  2. Kandali
  3. Gahat

 

Unordered HTML List

The <ul> tag begins with the unordered list. Each item of the list begins with a tag <li>. By default, the list items are indicated by bullets (little black circles):

Syntax


<ul>
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ul>

Example:


<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ul>
</body>
</html>

Output:

An unordered HTML list

  • Mandua
  • Kandali
  • Gahat

 

Unordered HTML List - The Type Attribute

To specify the type of bullet that we want, we may use <ul> tag type attribute. It's a disk by default. The possible options are given below.

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

 

Example:

Following is an example where we used <ul type = "disc">


<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul type="disc">
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ul>
</body>
</html>

Ouput:

An unordered HTML list

  • Mandua
  • Kandali
  • Gahat

 

 

Following is an example where we used <ul type = "circle">

Example:


<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul type="circle">
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ul>
</body>
</html>

Output:

An unordered HTML list

  • Mandua
  • Kandali
  • Gahat

 

Following is an example where we used <ul type = "square">

Example:


<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul type="square">
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ul>
</body>
</html>

Output:

An unordered HTML list

  • Mandua
  • Kandali
  • Gahat

 

Following is an example where we used <ul type = "none">

Example:


<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul type="none">
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ul>
</body>
</html>

Output

An unordered HTML list

  • Mandua
  • Kandali
  • Gahat

 

Ordered HTML List

The <ol> tag begins with an ordered list. The <li> tag begins every item on the list. The list items are marked by default with numbers:


<ol>
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ol>

 

Ordered HTML List - The Type Attribute

The <ol> tag type attribute defines the list item marker type:

Type Description
type="1" Numbers are given to list items (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

 

Default-Case Numerals


<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ol>
</body>
</html>

Output

Ordered List with Numbers

  1. Mandua
  2. Kandali
  3. Gahat

 

Upper-Case Numerals.


<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Uppercase Letters</h2>
<ol type="A">
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ol>
</body>
</html>

Output

Ordered List with Uppercase Letter

  1. Mandua
  2. Kandali
  3. Gahat

 

Lower-Case Numerals.


<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Letters</h2>
<ol type="a">
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ol>
</body>
</html>

Output:

Ordered List with Lowercase Letters

  1. Mandua
  2. Kandali
  3. Gahat

 

Lower-Case Roman Numbers


<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ol>
</body>
</html>

Output

Ordered List with Lowercase Roman Numbers

  1. Mandua
  2. Kandali
  3. Gahat

 

 

Uper-Case Roman Numbers


<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
<li>Mandua</li>
<li>Kandali</li>
<li>Gahat</li>
</ol>
</body>
</html>

Output

Ordered List with Roman Numbers

  1. Mandua
  2. Kandali
  3. Gahat

 

HTML Description Lists

HTML supports lists of descriptions as well. A list of terms with a description of each term is a description list.

In the tag <dl> the description list is defined, in the tag <dt> the term (name) and in the tag <dd> each term is described:


<dl>
<dt>Vegetations</dt>
<dd>Buras</dd>
<dt>Places</dt>
<dd>Badrinath</dd>
</dl>

Example:


<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Vegetations</dt>
<dd>Buras</dd>
<dt>Places</dt>
<dd>Badrinath</dd>
</dl>
</body>
</html>

Output:

A Description List

Vegetations
Buras
Places
Badrinath

 

Nested HTML Lists

A list is called the nested, if list is in another list. If we want a list of bullet within a numbered list, this type of list is named as a nesting list.


<ul>
<li>Vegetations</li>
<li>Places
<ul>
<li>Badrinath</li>
<li>Kedarnath</li>
</ul>
</li>
<li>Festivals</li>
</ul>
 

Example:


<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<p>List can be nested (lists inside lists):</p>
<ul>
<li>Vegetations</li>
<li>Places
<ul>
<li>Badrinath</li>
<li>Kedarnath</li>
</ul>
</li>
<li>Festivals</li>
</ul>
</body>
</html>

Output:

A Nested List

List can be nested (lists inside lists):

  • Vegetations
  • Places
    • Badrinath
    • Kedarnath
  • Festivals

 

Previous
Next

HTML Tutorials