Lists in HTML

Lists in HTML with Examples

In this article, I am going to discuss Lists in HTML with Examples. Please read our previous article where we discussed Quotations in HTML with Examples. At the end of this article, you will learn everything about HTML Lists with Examples.

Lists in HTML

The HTML Lists are used to specify lists of information. All lists may contain one or more list elements. The <li> element in HTML is used to define a list item. Lists are used to group similar items together. Every list can have one or more list elements. List items must be contained within a parent element, such as an ordered list (<ol>), an unordered list (<ul>), etc.

List Syntax: <li> List Element </li>

List Example
<ul>
  <h4>Fruits</h4>
  <li>Mango</li>
  <li>Orange</li>
  <li>Watermelon</li>
</ul>  

<ol>
  <h4>Vegetables</h4>
  <li>Brinjal</li>
  <li>Spinach</li>
  <li>Potato</li>
</ol>
Output:

Lists in HTML with Examples

For a better understanding, please have a look at the below image.

Lists in HTML with Examples

There are three types of lists in HTML:

  1. Unordered List or Bulleted List (ul)
  2. Ordered List or Numbered List (ol)
  3. Description List or Definition List (dl)
Unordered List in HTML

The <ul> element in HTML is used to define an unordered list. Unordered lists are used to display list elements in bullet format. When we don’t need to display things in a precise order, we can use an unordered list.

Unordered List Syntax
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>  
List Item Marker

By default, unordered list items are marked with bullets (•).

Unordered List in HTML

Note: In HTML Unordered list, all the list items are marked with bullets. It is also known as a bulleted list also. The Unordered list starts with <ul> tag and list items start with the <li> tag.

There are four types of list bullets:

  1. Disc
  2. Circle
  3. Square
  4. None

To change the default list marker, we use CSS list-style-type property. Look at the example below to understand how to change list bullets. We will use internal styling to apply CSS to the <ul> element.

<ul style="list-style-type:disc;">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>  

<ul style="list-style-type:square;">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>  

<ul style="list-style-type:circle;">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>  

<ul style="list-style-type:none;">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>  
Output:

Unordered List Example in HTML

Nested HTML List

We can nest unordered lists, which means we can place one list inside another.

<ul>
  <li>Fruits </li>
    <ul>
      <li>Mango</li>
      <li>Orange</li>
    </ul>
  <li>Vegetables</li>
  <ul>
      <li>Cabbage</li>
      <li>Capsicum</li>
      <ul>
      <li>Green Capsicum</li>
      <li>Yellow Capsicum</li>
      <li>Red Capsicum</li>
      </ul>
    </ul>
</ul>
Output:

Nested HTML List

All nested lists are represented with different bullets to improve readability and distinguish between nested lists.

Ordered List in HTML

The <ol> element in HTML is used to define an ordered list. Ordered lists are used to display list elements in numbered or alphabetical format. We can display list elements in numerical numbers, roman numbers, and alphabets.

Ordered List Syntax
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>  
List Type Attribute

In the ordered list, we have a type attribute that specifies the numbering format of list items. By default, the list numbering format is number i.e. type=”1”.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>  
Output:

List Type Attribute

Note: In the ordered HTML lists, all the list items are marked with numbers by default. It is known as the numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.

There are a total of five numbering types in an ordered list.

  1. Numbers are defined by type=”1”
  2. Uppercase Letters are defined by type=” A”
  3. Lowercase letters are defined by type=” a”
  4. Uppercase Roman Numbers are defined by type=” I”
  5. Lowercase Roman Numbers are defined by type=” i”

Look at the example below to get an idea about how the list items get displayed with different numbering formats.

<ol type="1">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>    

<ol type="A">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>  

<ol type="a">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ol type="I">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>  

<ol type="i">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol> 
Output:

Ordered List Example in HTML

Start Attribute in HTML Lists

A start attribute is used to define an initial value for the numbering of the list item. if we specify the start value 10 then the list will start numbering from 10 onwards. start=” value” attribute is used to set start value.

<ol start="10">
      <li>one </li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
      <li>five</li>
      <li>six</li>
      <li>seven</li> 
</ol>
Output:

Start Attribute in HTML Lists

Reversed Attribute in HTML Lists

A reversed attribute is a Boolean attribute in Html with a reversed attribute we can number the list in descending format.

<ol reversed>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>
Output:

Reversed Attribute in HTML Lists

As you can see above the list numbering starts from three instead of one because we have applied reversed attributes.

Nested HTML Lists

Lists can be nested i.e. we can put list items inside another list item. Look at the example below.

<ol>
  <li>Fruits </li>
    <ol>
      <li>Mango</li>
      <li>Orange</li>
    </ol>
  <li>Vegetables</li>
  <ol>
      <li>Cabbage</li>
      <li>Capsicum</li>
      <ol>
      <li>Green Capsicum</li>
      <li>Yellow Capsicum</li>
      <li>Red Capsicum</li>
      </ol>
    </ol>
  </ol>
Output:

Nested HTML Lists

Description List in HTML

The HTML Description list is also a list style that is supported by HTML and XHTML. It is also known as a definition list where entries are listed like a dictionary or encyclopedia. The definition list is very appropriate when you want to present a glossary, list of terms, or other name-value lists.

The HTML definition list contains following three tags:

  1. <dl> tag defines the start of the list.
  2. <dt> tag defines a term.
  3. <dd> tag defines the term definition (description).

The <dl> element in HTML is used to define a description list. The description list provides a description of each list item contained inside it. The <dt> tag is used to define the list name, while the <dd> tag is used to describe the list item. The items in the HTML Description List are shown as definitions, just like in a dictionary.

Description List Syntax
<dl>
  <dt>List Name</dt>
  <dd>- Description</dd>
</dl>
Example
<dl>
  <dt>Bugatti</dt>
  <dd>- Fastest Supercar</dd>
  <br>
  <dt>MTT 420 RR</dt>
  <dd>- Fastest Superbike</dd>
</dl>
Output:

Description List in HTML

Example:
<dl>
  <dt>HTML</dt>
  <dd>- is used to give structure to web pages.</dd>
  <br>
  <dt>CSS</dt>
  <dd>- is used to give styling to web pages</dd>
</dl>
Output:

Description List in HTML

In the next article, I am going to discuss Comments in HTML with Examples. Here, in this article, I try to explain Lists in HTML with Examples and I hope you enjoy this HTML Lists with Examples article.

Leave a Reply

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