HTML Lists

What is an HTML List?

In HTML, a list is a group of items that are arranged in a specific order or hierarchy. In this article we will learn about different types of list and there uses.

HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists:

  1. Ordered List or Numbered List <ol> 
  2. Unordered List or Bulleted List <ul> 
  3. Description List or Definition List <dl>

1. Ordered List

The <ol> element is used to create an ordered list, where each list item is marked with a number or letter. The order of the items is significant, and the numbering is done automatically by the browser. This element is useful when the order of the items is important and needs to be presented in a specific sequence.

<!DOCTYPE html>
<html>

<head>
    <title>HTML Ordered List</title>
</head>

<body>
    <h2>Fruits list</h2>
    <ol>
        <li>Apple</li>
        <li>Banana</li>
        <li>Guava</li>
        <li>Papaya</li>
        <li>Pineapple</li>
        <li>Watermelon</li>
    </ol>
</body>

</html>

OUTPUT:

2. Unordered List

The <ul> element is used to create an unordered list, where each list item is marked with a bullet. The order of the items is not significant, and the items are typically presented in no particular order. This element is useful when the order of the items is not important and the items need to be presented in a simple and easy-to-read format.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
         <h2>Fruits list</h2>
      <ul>
         <li>Apple</li>
         <li>Banana</li>
         <li>Guava</li>
         <li>Papaya</li>
         <li>Pineapple</li>
         <li>Watermelon</li>
      </ul>
   </body>

</html>

OUTPUT:

3. Definition List:

We can define a description list using the <dl> tag element. Inside the <dl>..</dl> we need to define a description term using the <dt> tag. The term is usually some small text about something. Then, we can define the description descriptor to describe the term further using the <dd> tag.

Definition List makes use of following three tags.

  • <dl> − Defines the start of the list
  • <dt> − A term
  • <dd> − Term definition
  • </dl> − Defines the end of the list
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <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>
         <dt><b>Javascript</b></dt>
         <dd>Language for eb</dd>
         <dt><b>Bootstrap</b></dt>
         <dd>free and open-source CSS framework</dd>
      </dl>
   </body>

</html>

OUTPUT:

type Attribute: we have an attribute called type attribute that is used to change the type of an order

in all formats.

Example for Unordered & Ordered list types:

<ul type = "square">
<ul type = "disc">
<ul type = "circle">
list types
<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.
  1. List is a group of items that are arranged in a specific order or hierarchy.
  2. The <ol> element is used to create an ordered list, where each list item is marked with a number or letter.
  3. The <ul> element is used to create an unordered list, where each list item is marked with a bullet.
  4. We can define a description list using the <dl> tag element. Inside the <dl>..</dl> we need to define a description term using the <dt> tag.