HTML Lists

In this post we will learn about how to display list of contents in the website!

There are three type of list we can show.. unordered, ordered and definition lists!

HTML Unordered Lists

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

The list items are marked with bullets (typically small black circles).

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

How the HTML code above looks in a browser:

  • Coffee
  • Milk

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>Coffee</li>
<li>Milk</li>
</ol>

How the HTML code above looks in a browser:

  1. Coffee
  2. Milk

HTML Definition Lists

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

The <dl> tag defines a definition list.

The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

How the HTML code above looks in a browser:

Coffee
– black hot drink
Milk
– white cold drink

About Jagadesh Boopathi

I am tech savy spending more time on technology, learning about web, making time to find new stuff always. Also I am Entrepreneur, Blogger and an Engineer. Open Source - Matters.

View all posts by Jagadesh Boopathi →

Leave a Reply

Your email address will not be published. Required fields are marked *