HTML List - Ordered lists and Unordered lists

HTML lists has two types:

1. Unordered Lists:
Unordered Lists starts with <ul> tag and end with </ul> tag. Each item is defined by <li> tag.

2. Ordered Lists:
Ordered Lists starts with <ol> tag and end with </ol> tag. Each item is defined by <li> tag.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<h3> Example of Unordered Lists </h3>
<ul>
      <li> HTML </li>
      <li> CSS </li>
      <li> JS </li>
      <li> PHP </li>
</ul>
<h3> Example of Ordered Lists </h3>
<ol>
      <li> HTML </li>
      <li> CSS </li>
      <li> JS </li>
      <li> PHP </li>
</ol>
</body>
</html>

Output

Example of Unordered Lists

  • HTML
  • CSS
  • JS
  • PHP

Example of Ordered Lists

  1. HTML
  2. CSS
  3. JS
  4. PHP

More Reference

Unordered Lists have different bulletins like disk (default), circle, square and none.

  • Disk (shape:circle): It sets the list items colored inside and outside (default).
  • Circle (shape:circle): It sets the list items colored outside only.
  • Square (shape:square): It sets the list items colored inside and outside.
  • None (shape:none): It does not set the list items.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<h3> Example of Disk Unordered Lists </h3>
<ul style= "list-style-type:disk">
      <li> HTML </li>
      <li> CSS </li>
      <li> JS </li>
      <li> PHP </li>
</ul>
<h3> Example of Circle Unordered Lists </h3>
<ul style= "list-style-type:circle">
      <li> HTML </li>
      <li> CSS </li>
      <li> JS </li>
      <li> PHP </li>
</ul>
<h3> Example of Square Unordered Lists </h3>
<ul style= "list-style-type:square">
      <li> HTML </li>
      <li> CSS </li>
      <li> JS </li>
      <li> PHP </li>
</ul>
<h3> Example of None Unordered Lists </h3>
<ul style= "list-style-type:none">
      <li> HTML </li>
      <li> CSS </li>
      <li> JS </li>
      <li> PHP </li>
</ul>
</body>
</html>

Output

Example of Disk Unordered Lists

  • HTML
  • CSS
  • JS
  • PHP

Example of Circle Unordered Lists

  • HTML
  • CSS
  • JS
  • PHP

Example of Square Unordered Lists

  • HTML
  • CSS
  • JS
  • PHP

Example of None Unordered Lists

  • HTML
  • CSS
  • JS
  • PHP

Ordered Lists have different bulletins like type="1", type="A", type="a", type="I", type="i".

  • type="1" (type: numeral number): The list items will be numbered with numeral numbers (default).
  • type="A" (type: Uppercase Alphabet): The list items will be numbered with uppercase Alphabet letters.
  • type="a" (type: Lowercase Alphabet): The list items will be numbered with lowercase letters.
  • type="I" (type: Uppercase Roman Number): The list items will be numbered with uppercase roman numbers.
  • type="i" (type: Lowercase Roman Number): The list items will be numbered with uppercase roman numbers.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<h3> Example of type="1" Ordered lists </h3>
<ol type= "1">
      <li> HTML </li>
      <li> CSS </li>
      <li> JS </li>
      <li> PHP </li>
</ol>
<h3> Example of type="A" Ordered lists </h3>
<ol type= "A">
      <li> HTML </li>
      <li> CSS </li>
      <li> JS </li>
      <li> PHP </li>
</ol>
<h3> Example of type="a" Ordered lists </h3>
<ol type= "a">
      <li> HTML </li>
      <li> CSS </li>
      <li> JS </li>
      <li> PHP </li>
</ol>
<h3> Example of type="I" Ordered lists </h3>
<ol type= "I">
      <li> HTML </li>
      <li> CSS </li>
      <li> JS </li>
      <li> PHP </li>
</ol>
<h3> Example of type="i" Ordered lists </h3>
<ol type= "i">
      <li> HTML </li>
      <li> CSS </li>
      <li> JS </li>
      <li> PHP </li>
</ol>
</body>
</html>

Output

Example of type="1" Ordered lists

  1. HTML
  2. CSS
  3. JS
  4. PHP

Example of type="A" Ordered lists

  1. HTML
  2. CSS
  3. JS
  4. PHP

Example of type="a" Ordered lists

  1. HTML
  2. CSS
  3. JS
  4. PHP

Example of type="I" Ordered lists

  1. HTML
  2. CSS
  3. JS
  4. PHP

Example of type="i" Ordered lists

  1. HTML
  2. CSS
  3. JS
  4. PHP

HTML Nested Lists

HTML Lists can be nested i.e. a list can be a sub-list of another list. In another term, list item can contain a new list.

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<h3> HTML List has two types </h3>
<ul>
      <li> Ordered Lists
        <ol>
          <li> type="1" </li>
          <li> type="A" </li>
          <li> type="a" </li>
          <li> type="I" </li>
          <li> type="i" </li>
        </ol>
      </li>
      <li> Unordered Lists
        <ul>
          <li> disk </li>
          <li> circle </li>
          <li> square </li>
          <li> none </li>
        </ul>
      </li>
</ul>
</body>
</html>

Output

HTML List has two types

  • Ordered Lists
    1. type="1"
    2. type="A"
    3. type="a"
    4. type="I"
    5. type="i"
  • Unordered Lists
    • disk
    • circle
    • square
    • none

HTML Nested Lists

A description lists describes the term of each list. The <dl> tag defines the description lists. The <dt> tag defines the description term (terms to be described) while the <dd> describes the definition of each term.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> HTML Learning </title>
</head>
<body>
<h3> Example of HTML Description Lists </h3>
<dl>
      <dt> HTML </dt>
            <dd> - It deliver rich content (graphics, movies, etc.) without the need for additional plugins (e.g., Flash). </dd>
            <dd> - It drovide better semantic support for web page structure through the introduction of new structural element tags. </dd>
            <dd> - It provide better cross-platform support (i.e., to work well whether running on a PC, Tablet, or Smartphone). </dd>
      <dt> CSS </dt>
            <dd> - It can make your web page look beautiful. </dd>
            <dd> - It can change the appearance of HTML pages. </dd>
            <dd> - It defines the ways how the HTML document should be displayed on browsers. </dd>
</dl>
</body>
</html>

Output

Example of HTML Description Lists

HTML
- It deliver rich content (graphics, movies, etc.) without the need for additional plugins (e.g., Flash).
- It drovide better semantic support for web page structure through the introduction of new structural element tags.
- It provide better cross-platform support (i.e., to work well whether running on a PC, Tablet, or Smartphone).
CSS
- It can make your web page look beautiful.
- It can change the appearance of HTML pages.
- It defines the ways how the HTML document should be displayed on browsers.

Notes

Click Here, to learn <dl> tag.
Click Here, to learn <dt> tag.
Click Here, to learn <dd> tag.



Inorder to make horizontal list, you need to an CSS Property:
float:left; or display:inline;