HTML - Lists

HTML Lists

In HTML, there are three types of lists:

  1. <ol> -An ordered list. An ordered list is a numbered list. Each item in the list is numbered sequentially, starting from 1 by default.
  2. <ul> - An unordered list. An unordered list is a bulleted list. Each item in the list is preceded by a bullet point.
  3. <dl> - A definition list. A definition list is a list of terms and their definitions. Each term is defined by a corresponding definition.

HTML Ordered Lists

An ordered list is a numbered list. Each item in the list is numbered sequentially, starting from 1 by default.

In HTML, an Ordered list is created using the <ol> tag. Each item in the list is defined using the <li> tag.

Example
<!DOCTYPE html>
<html>
<head>
   <title>Ordered List</title>
</head>
<body>
   <ol>
      <li>Number 1</li>
      <li>Number 2</li>
      <li>Number 3</li>
      <li>Number 4</li>
   </ol>     
</body>
</html>

** Live Preview**

  1. Number 1
  2. Number 2
  3. Number 3
  4. Number 4

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. Default, it is a number. The options are:

  • <ol type = "1"> - Default-Case Numerals.
  • <ol type = "I"> - Upper-Case Numerals.
  • <ol type = "i"> - Lower-Case Numerals.
  • <ol type = "A"> - Upper-Case Letters.
  • <ol type = "a"> - Lower-Case Letters
Example of <ol type = "1">
<!DOCTYPE html>
<html>
<head>
   <title>Ordered List</title>
</head>
<body>
   <ol type = "1">
      <li>Number 1</li>
      <li>Number 2</li>
      <li>Number 3</li>
      <li>Number 4</li>
   </ol>     
</body>
</html>

** Live Preview**

  1. Number 1
  2. Number 2
  3. Number 3
  4. Number 4
Example of <ol type = "I">
<!DOCTYPE html>
<html>
<head>
   <title>Ordered List</title>
</head>
<body>
   <ol type = "I">
      <li>Number 1</li>
      <li>Number 2</li>
      <li>Number 3</li>
      <li>Number 4</li>
   </ol>     
</body>
</html>

Output:

numerical-img
Example of <ol type = "i">
<!DOCTYPE html>
<html>
<head>
   <title>Ordered List</title>
</head>
<body>
   <ol type = "i">
      <li>Number 1</li>
      <li>Number 2</li>
      <li>Number 3</li>
      <li>Number 4</li>
   </ol>     
</body>
</html>

Output:

sm-numerical-img
Example of <ol type = "A">
<!DOCTYPE html>
<html>
<head>
   <title>Ordered List</title>
</head>
<body>
   <ol type = "A">
      <li>Number 1</li>
      <li>Number 2</li>
      <li>Number 3</li>
      <li>Number 4</li>
   </ol>     
</body>
</html>

** Output:**

capital-letter-img
Example of <ol type = "a">
<!DOCTYPE html>
<html>
<head>
   <title>Ordered List</title>
</head>
<body>
   <ol type = "a">
      <li>Number 1</li>
      <li>Number 2</li>
      <li>Number 3</li>
      <li>Number 4</li>
   </ol>     
</body>
</html>

Output:

sm-letter-img

The start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. The options are:

  • <ol type = "1" start = "3"> - Numerals starts with 3.
  • <ol type = "I" start = "3"> - Numerals starts with III.
  • <ol type = "i" start = "3"> - Numerals starts with iii.
  • <ol type = "a" start = "3"> - Letters starts with c.
  • <ol type = "A" start = "3"> - Letters starts with C.
Example of <ol type = "a" start = "3">
<!DOCTYPE html>
<html>
<head>
   <title>Ordered List</title>
</head>
<body>
   <ol type = "a" start = "3">
      <li>Number 1</li>
      <li>Number 2</li>
      <li>Number 3</li>
      <li>Number 4</li>
   </ol>     
</body>
</html>

** Output:**

start-or-img

HTML Unordered Lists

An HTML unordered list is a list in which the order of items is not important. It is commonly used to group a set of related items together.

In HTML, an unordered list is created using the <ul> tag. Each item in the list is defined using the <li> tag.

Example
<!DOCTYPE html>
<html>
<head>
   <title>Unordered List</title>
</head>
<body>
   <ul>
      <li>Number 1</li>
      <li>Number 2</li>
      <li>Number 3</li>
   </ul>     
</body>
</html>

Output:

unordered-img

The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc. The options are:

  • <ul type = "disc">
  • <ul type = "square">
  • <ul type = "circle">
Example of <ul type = "square">
<!DOCTYPE html>
<html>
<head>
   <title>Unordered List</title>
</head>
<body>
   <ul type = "disc">
      <li>Number 1</li>
      <li>Number 2</li>
      <li>Number 3</li>
   </ul>     
</body>
</html>

** Output:**

unordered-img
Example of <ul type = "disc">
<!DOCTYPE html>
<html>
<head>
   <title>Unordered List</title>
</head>
<body>
   <ul type = "square">
      <li>Number 1</li>
      <li>Number 2</li>
      <li>Number 3</li>
   </ul>     
</body>
</html>

** Output:**

unordered1-img
Example of <ul type = "circle">
<!DOCTYPE html>
<html>
<head>
   <title>Unordered List</title>
</head>
<body>
   <ul type = "circle">
      <li>Number 1</li>
      <li>Number 2</li>
      <li>Number 3</li>
   </ul>     
</body>
</html>

** Output:**

unordered2-img

Definition List (DL)

A definition list is a list of terms and their definitions. Each term is defined by a corresponding definition.

HTML Definition List (<dl>) is a semantic element used to create a list of terms and their corresponding definitions. The <dl> element is often used in conjunction with two other elements: <dt> (definition term) and <dd> (definition description).

Example
<!DOCTYPE html>
<html>
<head>
   <title>Definition List</title>
</head>
<body>
   <dl>
      <dt>List 1</dt>
      <dd>Definition 1</dd>
      <dt>List 2</dt>
      <dd>Definition 2</dd>
      <dt>List 3</dt>
      <dd>Definition 3</dd>
    </dl>
        
</body>
</html>

Output:

definition-img
Previous
HTML Tables
Next
HTML Colors