HTML List

Lists are a common way to present data in a formatted manner on a webpage. For example, if you need to display the menu of a pizza restaurant, an HTML list style would likely be used to present the information in a clear and organized way.

All lists must contain one or more list elements. There are two types of list elements:

Ordered List <ol> Element
Unordered List <ul> Element

Ordered List Element

An ordered list is a type of HTML list that presents information in a numbered format. To create an ordered list in HTML, you can use the <ol> tag, and then list each item within the list using the <li> tag.

<body>

   <ol>

      <li>Apple</li>

      <li>Grapes</li>

      <li>Orange</li>

      <li>Kiwi</li>

  </ol>

</body>

Test Yourself

By default, the type for any ordered list is a number starting from 1. We can also change the type of these ordered lists, like starting from 1, I, i, a, and A.

<ol type = "1"> - Default-Case Numerals.

<ol type = "I"> - Upper-Case Numerals.

<ol type = "i"> - Lower-Case Numerals.

<ol type = "A"> - Upper-Case Letters.

<ol type = "a"> - Lower-Case Letters.

Following is an example to demonstrate the type of an ordered list.

<ol type = "1"> - Default-Case Numerals.

<ol type = "I"> - Upper-Case Numerals.

<ol type = "i"> - Lower-Case Numerals.

<ol type = "A"> - Upper-Case Letters.

<ol type = "a"> - Lower-Case Letters.

Following is the example to demonstrate the type of an ordered list.

<body>

   <ol type="A">

      <li>Apple</li>

      <li>Grapes</li>

      <li>Orange</li>

      <li>Kiwi</li>

  </ol>

</body>

Test Yourself

We can also control the start of any list type. We use the start attribute for <ol> tag to specify the starting point of numbering.

tryhtml_We use start attribute for tag to specify the starting point of numbering.]

Unordered List

When it comes to the Unordered list, all the list items are marked with a bullet point or other marker, rather than a number. To create an unordered list in HTML, you can use the <ul> tag, and then list each item within the list using the <li> tag.

<body>

   <ul>

      <li>HTML</li>

      <li>Cucumber</li>

      <li>Oracle</li>

      <li>Kiwi</li>

  </ul>

</body>

Test Yourself

By default, the type for any unordered list starts from bullets. We can change the type of the unordered list type as well – square, circle, disc.

<ul type = "square">

<ul type = "disc">

<ul type = "circle">

Following is an example to demonstrate the type of an ordered list.

<ul type = "square">

<ul type = "disc">

<ul type = "circle">

Following is the example to demonstrate the type of an ordered list.

<body>

   <ul type="square">

     <li>HTML</li>

     <li>Cucumber</li>

     <li>Oracle</li>

     <li>Kiwi</li>

   </ul>

</body>

Test Yourself

Description or Definition List

A Description list is 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.

<dl> tag - defines the start of the list

<dt> tag - defines a term

<dd> tag - defines the term definition (description)

Let’s understand the above tag with the help of the example:-

<body>

   <dl>

     <dt><b>HTML</b></dt>

     <dd>This stands for Hyper Text Markup Language</dd>

     <dt><b>CSS</b></dt>

     <dd>This stands for Cascading Style sheet</dd>

   </dl>

</body>

Test Yourself

Nested List

A nested list is a list that is contained within another list, either an ordered list or an unordered list. To create a nested list in HTML, you can simply add a new <ul> or <ol> tag within an existing <li> tag.

body>

   <ol>

     <li>Delhi

         <ul>

                 <li>NewDelhi</li>

             </ul>

         </li>

         <li>Haryana

             <ul>

                 <li>Chandigarh</li>

             </ul>

         </li>

     </ol>

</body>

Test Yourself