HTML List

There are 3 different types of lists.

  • <ul> – unordered list; bullets
  • <ol> – ordered list; numbers
  • <dl> – definition list; dictionary

The most common HTML lists are ordered and unordered lists:

HTML Lists

An ordered list:

  1. The first list item
  2. The second list item
  3. The third list item

An unordered list:

  • List item
  • List item
  • List item

HTML Unordered Lists

An unordered list starts with the <ul> tag. An unordered list is a list of items. With bullets the list items are marked (typically small black circles).

An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.

<ul>
<li>list item1</li>
<li>list item2</li>
</ul>
In three flavors the bullet comes :
squares <ul type=”squares” >
discs <ul type=”discs” >
circles <ul type=”circles”>
<ul type=”square” >
<li>list item1</li>
<li>list item2</li>
</ul>
OUTPUT:

  • list item1
  • list item2
<ul type=”disc”>
<li>list item1</li>
<li>list item2</li>
</ul>
OUTPUT:

  • list item1
  • list item2
<ul type=”circle” >
<li>list item1</li>
<li>list item2</li>
</ul>
OUTPUT:

  • list item1
  • list item2

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items are marked with numbers.

<ol >
<li>Books</li>
<li>Pen</li>
</ol>

How the HTML code above looks in a browser:

  1. Books
  2. Pen
There are 4 other types of ordered lists. You can replace generic numbers with
Roman numberals or letters,both capital and lower-case.
Use the type attribute to change the numbering.
<ol type=”a”>
<li>list item1</li>
<li>list item2</li>
</ol>
OUTPUT:

  1. list item1
  2. list item2
<ol type=”A”>
<li>list item1</li>
<li>list item2</li>
</ol>
OUTPUT:

  1. list item1
  2. list item2
<ol type=”i”>
<li>list item1</li>
<li>list item2</li>
</ol>
OUTPUT:

  1. list item1
  2. list item2
<ol type=”I”>
<li>list item1</li>
<li>list item2</li>
</ol>
OUTPUT:

  1. list item1
  2. list item2

HTML Definition Lists

A definition list is a list of items, with a description of each item.

A definition list starts with the <dl> tag.
Each definition-list term starts with the <dt> tag.
Each definition-list description starts with the <dd> tag.

<dl>
<dt>Book</dt>
<dd>- history book</dd>
<dt>Pen</dt>
<dd>- Ball Point</dd>
</dl>

How the HTML code above looks in a browser:

Books
– history book

Pen
– Ball point


Basic Notes – Useful Tips

Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.