LERAN HTML COMPLETE

Learn one of the most powerful programming languages in the world and become a rockstar developer.

HTML Lists


Understanding HTML Lists

HTML lists are used to present list of information in well formed and semantic way. There are three different types of list in HTML and each one has a specific purpose and meaning:

  • Unordered list — Used to group a set of related items, in no particular order.
  • Ordered list — Used to group a set of related items, in a specific order.
  • Description list — Used to display a list of terms and their descriptions.

Tips: Inside a list item you can put text, line breaks, images, links, etc. You can also place an entire list inside a list item to create nested list.

HTML Unordered Lists

An unordered list created using the <ul> tag, and each list item starts with the <li> tag.

The list items in unordered lists are marked with bullets (small black circles), by default.

Example

<ul>
    <li>Chocolate Cake</li>
    <li>Black Forest Cake</li>
    <li>Pineapple Cake</li>
</ul>

— The output of the above example will look something like this:

  • Chocolate Cake
  • Black Forest Cake
  • Pineapple Cake

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item marker:

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

HTML Ordered Lists

An ordered list, created using the <ol> tag, and each list item starts with the <li> tag. Ordered list contain information where order should be emphasized.

The list items in ordered lists are marked with numbers.

Example

<ol>
    <li>Chocolate Cake</li>
    <li>Black Forest Cake</li>
    <li>Pineapple Cake</li>
</ol>

— The output of the above example will look something like this:

  1. Chocolate Cake
  2. Black Forest Cake
  3. Pineapple Cake

HTML Definition Lists

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

The definition list created using <dl> tag. The <dl> tag is used in conjunction with <dt> — defines the item in the list, and <dd> describes the item in the list:

Example

<dl>
    <dt>Chocolate Cake</dt>
    <dd>A baked food made of flour.</dd>

    <dt>Chocolate Cake</dt>
    <dd>A baked food made of flour.</dd>
</dl>

— The output of the above example will look something like this:

Chocolate Cake
   A baked food made of flour.
Chocolate Cake
   A baked food made of flour.

Click on the "Try it Yourself" button to see how it works.

Previous Next
x
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Privacy Policy That's Fine