HTML lists

There are two type of llists in HTML.
  1. Ordered List <ol>
  2. Unordered list <ul>

Ordered list in HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>
ORDERED LIST
</title>
</head>
<body>
<ol>
<li>one</li>
<li>Two</li>
</ol>
</body>
</html>

Output:

  1. One
  2. Two

Unordered list in HTML

Example:

<!DOCTYPE html>
<html>
<head>
<title>
ORDERED LIST
</title>
</head>
<body>
<ul>
<li>one</li>
<li>Two</li>
</ul>
</body>
</html>

Output:

  • One
  • Two

Ordered list using Uppercase letters

Example:

<!DOCTYPE html>
<html>
<head>
<title>
ORDERED LIST
</title>
</head>
<body>
<ol type="A">
<li>one</li>
<li>Two</li>
</ol>
</body>
</html>

Output:

  1. One
  2. Two

Ordered list using lowercase letters

Example:

<!DOCTYPE html>
<html>
<head>
<title>
ORDERED LIST
</title>
</head>
<body>
<ol type="a">
<li>one</li>
<li>Two</li>
</ol>
</body>
</html>

Output:

  1. One
  2. Two

Ordered list using Uppercase Roman Numbers

Example:

<!DOCTYPE html>
<html>
<head>
<title>
ORDERED LIST
</title>
</head>
<body>
<ol type="I">
<li>one</li>
<li>Two</li>
</ol>
</body>
</html>

Output:

  1. One
  2. Two

Ordered list using Lowercase Roman Numbers

Example:

<!DOCTYPE html>
<html>
<head>
<title>
ORDERED LIST
</title>
</head>
<body>
<ol type="i">
<li>one</li>
<li>Two</li>
</ol>
</body>
</html>

Output:

  1. One
  2. Two

Unordered list using disc shape

Example:

<!DOCTYPE html>
<html>
<head>
<title>
ORDERED LIST
</title>
</head>
<body>
<ul style="link-style-type:disc">
<li>one</li>
<li>Two</li>
</ul>
</body>
</html>

Output:

  • One
  • Two

Unordered list using square shape

Example:

<!DOCTYPE html>
<html>
<head>
<title>
ORDERED LIST
</title>
</head>
<body>
<ul style="link-style-type:square">
<li>one</li>
<li>Two</li>
</ul>
</body>
</html>

Output:

  • One
  • Two

Unordered list using circle shape

Example:

<!DOCTYPE html>
<html>
<head>
<title>
ORDERED LIST
</title>
</head>
<body>
<ul style="link-style-type:cicle">
<li>one</li>
<li>Two</li>
</ul>
</body>
</html>

Output:

  • One
  • Two

Nested HTML list

List within list in HTML is called nested HTML list.

Example:

<!DOCTYPE html>
<html>
<head>
<title>
ORDERED LIST
</title>
</head>
<body>
<ul style="link-style-type:circle">
<li>one</li>
<ul>
<li>Square</li>
<li>Circle</li>
</ul>
<li>Two</li>
</ul>
</body>
</html>

Output:

  • One
    • Square
    • Circle
  • Two

Horizontal lists in HTML

This type of lists are generally used for creating navigation menu.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
ul#nav li{
display:inline;
}
</style>
<title>
ORDERED LIST
</title>
</head>
<body>
<ul id="nav">
<li>one</li>
<li>Two</li>
</ul>
</body>
</html>

Output: