HTML List Item Tag and Element

Blog Desk May 1, 2021 1367 No Comments

HTML List Item Tag and Element

Here are the HTML List Item Tag and Element examples.

<li> List Item Element

The <li> list item element create list items. There are 3 types of list styles

Ordered List
Unordered List
Definition List

<ol> Ordered List Element

The <ol> ordered list element creates a list of items in sequential order. Each list item appears numbered by default. The ordered list styles are: 1, a,A,i, I.

Example

<!DOCTYPE html>
<html>
   <head>
       <title>Ordered List</title>
   </head>
   <body>
      <ol>
         <li>Apple</li>
         <li>Banana</li>
         <li>Mango</li>
         <li>Grapes</li>
      </ol>

      <ol type="a">
         <li>Apple</li>
         <li>Banana</li>
         <li>Mango</li>
         <li>Grapes</li>
      </ol>
   </body>
</html>

<ul> Unordered List Element

The <ul> ordered list element creates a list of items in without sequential order. Each list item appears disk by default. The unordered list styles are: disk, square and circle.

Example

<!DOCTYPE html>
<html>
   <head>
       <title>Unordered List</title>
   </head>
   <body>
      <ul>
         <li>Milk</li>
         <li>Tea</li>
         <li>Sugar</li>
      </ul>
      <ul type="square">
         <li>Milk</li>
         <li>Tea</li>
         <li>Sugar</li>
      </ul>
   </body>
</html>

Nested List in HTML

Nested list is called child list or list inside a list. These lists can be ordered or unordered list.
Example:

<!DOCTYPE html>
<html>
   <head>
       <title>Nested List</title>
   </head>
   <body>
      <ol>
         <li>Apple
            <ul type="square">
               <li>Royal</li>
               <li>Golden</li>
               <li>HoneyCrisp</li>
            </ul>
         </li>
         <li>Banana</li>
         <li>Mango
           <ol type="i"> 
              <li>Green Mango</li>
              <li>Yellow Mango</li>
           </ol>
         </li>
         <li>Grapes</li>
     </ol>
   </body>
</html>

<dl> HTML Definition List

The HTML <dl> element represents a description list. It is enclosing a list of groups of terms <dt> and <dd>. Definition lists entries are listed like in a dictionary or encyclopedia.

Definition List makes use of following three group tags.
<dl> − Defines the start of the list
<dt> − Defines a definition title</dt>
<dd> − Defines a definition description</dd.
</dl> − Defines the end of the list

<!DOCTYPE html>
<html>
   <head>
       <title>Definition List</title>
   </head>
   <body>
      <dl>
         <dt>Mouse</dt>
         <dd>Mouse is an input device. It is used to click and pointing. </dd>
         <dt>HTML</dt>
         <dd>HTML stands for Hyper Text Markup Language. </dd>
      </dl>
   </body>
</html>

HTML Formatting Tag and Elements

For more HTML Element List Item reference follow this link

HTML List Item Tag and Element