HTML – List

Lists are the common requirement to place the data in a formatted manner, like if you have made a webpage where you need to display the content of the pizza menu of a hotel, then likely it would be an HTML list style, that shall appear in a clear and discrete manner.

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

This element is used to set up an ordered list using <ol> tag and list content is placed within <li> tags.

Example:

<body>
   <ol>
      <li>Apple</li>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Kiwi</li>
  </ol>
</body>

By default, the type for any ordered list is a number starting from 1. We can also change the type of these ordered list – 1, I, I, a, 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 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>

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

<body>
   <ol type="A" start=”4”>
      <li>Apple</li>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Kiwi</li>
  </ol>
</body>

Unordered List

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

<body>
   <ul>
      <li>HTML</li>
      <li>Cucumber</li>
      <li>Oracle</li>
      <li>Kiwi</li>
  </ul>
</body>

By default, the type for any unordered list is starting from bullets. We can also change type of these ordered list – square, circle, disc.

<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>

Description or Definition List

HTML Description list is also a list style which 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 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 above tag with the help of 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>

Nested List

A list within another list is termed as a nested list. If you want a bullet list inside a numbered list then such type of list will be called as a nested list.

<body>
   <ol>  
     <li>Delhi  
         <ul>  
                 <li>NewDelhi</li>  
             </ul>  
         </li>  
         <li>Haryana  
             <ul>  
                 <li>Chandigarh</li>  
             </ul>  
         </li> 
     </ol> 
</body>