HTML List Item Tag and Element

  Blog Desk       May 1, 2021     236 8 Comments
html-list-item-element-tag

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

  1. Ordered List
  2. Unordered List
  3. 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

8 responses to “HTML List Item Tag and Element”

  1. Hi, i think that i saw you visited my web site thus i came to “return the
    favor”.I’m attempting to find things to enhance my site!I suppose its ok to use
    a few of your ideas!!

    Here is my web page Casino Online Usa Player No Deposit Codes

  2. I’ve been surfing online more than 3 hours as of late, yet I never discovered any attention-grabbing article like yours.
    It’s pretty worth sufficient for me. In my opinion, if all webmasters and
    bloggers made excellent content as you did, the net will probably be
    much more useful than ever before.

    Here is my website: vegas casino online no deposit codes

  3. Thanks for the auspicious writeup. It actually used to be a enjoyment account it.

    Look advanced to far brought agreeable from you!
    However, how could we communicate?

    Feel free to surf to my web page – http://Www.lifeadventureexplore.com

  4. Very shortly this web page will be famous amid all blogging users, due to it’s
    pleasant articles or reviews

    Here is my site :: play Resorts casino Online

  5. Hi, I do think this is a great blog. I stumbledupon it 😉 I am going
    to come back yet again since i have saved as a favorite it.
    Money and freedom is the greatest way to change, may you be rich and continue to
    guide other people.

    Here is my web blog; http://Jungsungfoods.Com/

  6. hello there and thank you for your information – I’ve definitely
    picked up something new from right here. I did however
    expertise some technical issues using this site,
    as I experienced to reload the website many times previous to I could get it to
    load correctly. I had been wondering if your hosting is
    OK? Not that I am complaining, but slow loading instances times will very
    frequently affect your placement in google and can damage your high-quality score if advertising and marketing with Adwords.
    Well I am adding this RSS to my e-mail and could look out for a lot
    more of your respective intriguing content. Ensure that you update this again very soon.

    Here is my page :: borgata Casino Online betting

  7. Great article! We will be linking to this particularly great post on our site.

    Keep up the great writing.

    Look at my homepage; Jungsungfoods.com

  8. You really make it appear so easy along with
    your presentation but I in finding this topic to be
    actually one thing that I feel I might never understand.
    It seems too complicated and very wide for me. I’m having a
    look forward in your next put up, I’ll try to get the grasp of it!

    Feel free to surf to my web blog – Best Live Casino Online

Leave a Reply

Your email address will not be published. Required fields are marked *