What Is HTML List Tag?

HTML list allows us to create a list of information. Each HTML list contains one or many list elements. There are three types of HTML list

  1. Ordered List
  2. Unordered List
  3. Description List

Ordered HTML List:

In an ordered list, list items are shown in numbers by default. <ol> tag is used to express the ordered list and the <li>tag is used for the list item. Ordered lists are also called the number list.

Here is the Basic Structure of ordered lists


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ordered list</title>
</head>
<body>
   <ol>
     <li>Mangoo</li>
     <li>Banana</li>
     <li>Apple</li>
   </ol>
</body>
</html>

OUTPUT:

  1. Mangoo
  2. Banana
  3. Apple

Ordered list Type Attributes:

Ordered lists use the type attributes which define the list as numbers, uppercase letters or Roman numbers, and lowercase letters or Roman numbers 

Number:

<ol type="1">
     <li>Mangoo</li>
     <li>Banana</li>
     <li>Apple</li>
   </ol>

OUTPUT:

  1. Mangoo
  2. Banana
  3. Apple

Uppercase Letters:

<ol type="A">
     <li>Mangoo</li>
     <li>Banana</li>
     <li>Apple</li>
   </ol>

OUTPUT:

Lowercase Letters:

<ol type="a">
     <li>Mangoo</li>
     <li>Banana</li>
     <li>Apple</li>
   </ol>

OUTPUT:

Uppercase Roman Numbers:

<ol type="I">
     <li>Mangoo</li>
     <li>Banana</li>
     <li>Apple</li>
   </ol>

OUTPUT:

Lowercase Roman Numbers:

<ol type="i">
     <li>Mangoo</li>
     <li>Banana</li>
     <li>Apple</li>
   </ol>

OUTPUT:

HTML list Start Attribute:

An ordered list always start with 1 and increment one by one and if we want to start with 30 then we use the start attribute as follows

 <ol start="30">
     <li>Mangoo</li>
     <li>Banana</li>
     <li>Apple</li>
   </ol>

OUTPUT:

Nested Ordered list:

Sometimes we need a list inside the list, it is nested, and the following is the code

<ol>
      <li>Vegitable</li>
      <li> Fruits
            <ol>
               <li>Mangoo</li>
               <li>Banana</li>
               <li>Apple</li>
            </ol>
      </li>
      <li>Chicken</li>
</ol>

OUTPUT:

HTML Unordered list:

An unordered list is denoted by <ul> tag and a list item inside it is denoted by <li>. An unordered list is also called a bullet list.

By default, it is a bullet(small circle)

<ul>
         <li>Mangoo</li>
         <li>Banana</li>
         <li>Apple</li>
     </ul>

OUTPUT:

  • Mangoo
  • Banana
  • Apple

Unordered list style:

Instead of type, we use css property style in the unordered list and also use list-style-type

 

<ul style="list-style-type:disc;">
         <li>Mangoo</li>
         <li>Banana</li>
         <li>Apple</li>
     </ul>

Disc:

<ul style="list-style-type:disc;">
         <li>Mangoo</li>
         <li>Banana</li>
         <li>Apple</li>
     </ul>

OUTPUT:

  • Mangoo
  • Banana
  • Apple

Circle:


   <ul style="list-style-type:circle;">
         <li>Mangoo</li>
         <li>Banana</li>
         <li>Apple</li>
     </ul>

OUTPUT:

Square:

<ul style="list-style-type:square;">
         <li>Mangoo</li>
         <li>Banana</li>
         <li>Apple</li>
     </ul>

Nested Unordered List:

An unordered list inside the list becomes a nested unordered list


<ul>
    <li>Vegitable</li>
    <li> Fruits
          <ul>
             <li>Mangoo</li>
             <li>Banana</li>
             <li>Apple</li>
          </ul>
    </li>
</ul>

OUTPUT:

Description HTML list:

The description list consists of terms <dt> and a description of the term <dd>.

<dl> tag is used the describe the description list.

Here is an example

<dl>
     <dt>Fruits</dt>
         <dd>-mangos</dd>
    <dt>animal</dt>
        <dd>-cows</dd>
</dl>

OUTPUT:

HTML list

Also check out html link and html table

About Author

Leave a comment