HTML Lists

Unordered Lists

HTML supports ordered, unordered, and definition lists. You can also nest one list within another.An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

<html>
<body>
<h5>Beverages</h5>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>

Inside a list item, you can put paragraphs, line breaks, images, links, other lists, and so on. You can display different kinds of bullets in an unordered list by using the type attribute.

<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h5>Disc bullets</h5>
<ul type="disc">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<h5>Circle bullets</h5>
<ul type="circle">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
<h5>Square bullets</h5>
<ul type="square">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
</body></html>

Ordered Lists

An ordered list is also a list of items; the list items are numbered sequentially rather than bulleted.

<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h5>Ordered List:</h5>
<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
</body>
</html>

Different Types of Ordering

You can display different kinds of ordered lists by using the type attribute

<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h5>Letters list</h5>
<ol type="A">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
<h4>Lowercase letters list</h4>
<ol type="a">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>
</body>
</html>

Another example of roman number lists

<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h5>Roman numbers list</h5>
<ol type="I">
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>
<h4>Lowercase Roman numbers list</h4>
<ol type="i">
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
</ol>
</body>
</html>

Definition Lists

A definition list is not a list of single items. It is a list of items (terms), together with a description of each item (term).
A definition list starts with a <dl> tag (definition list).
Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description). Example :

<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h5>Definition List</h5>
<dl>
  <dt>First Definition</dt>
  <dd>First sub definition</dd>
  <dt>Second Definition</dt>
  <dd>second sub definition</dd>
</dl>
</body>
</html>

Nested Lists

A nested list is a list within another list. Usually the second list is indented another level and the item markers will appear differently than the original list.

<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h5>nested List Example </h5>
<ul>
  <li>Coffee</li>
      <ul>
      <li>Latte</li>
      <li>classic</li>
    </ul>
  <li>Tea
    <ul>
      <li>Ice tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Noodles</li>
</ul>
</body>
</html>