<li> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
Lists Bring Order To Web Pages: Here’s The HTML Code To Create Them
What does <li> HTML Tag do?
The <li> element defines a list item that is part of an ordered and unordered list of items.

Code Example

 <li>First we do this,</li>
 <li>and then we do this,</li>
 <li>and then we do this.</li>
  1. First we do this,
  2. and then we do this,
  3. and then we do this.

Display is based on list type

An <li> element must be a child element to either an <ol> (ordered list) element or a <ul> (unordered list) element. The <ol> defines a list with some kind of numbering system, so the list items within it will normally be prepended with a number, a Roman numeral, or a letter. The <ul> list is almost always bulleted. List items are block-level elements and contain flow content — which means (among other things) that ehy can have other lists as their content. This is how you build a nested, or multi-level list (such as outline).

<ul>  <li>Things I want my son to know   <ul>    <li>Intangibles     <ul>      <li>Love</li>      <li>Security</li>      <li>Happiness</li>     </ul>    </li>    <li>Tangibles     <ul>      <li>Colors       <ul>         <li>Red</li>         <li>Blue</li>         <li>Green</li>         <li>Purple</li>         <li>Orange</li>         <li>Yellow</li>       </ul>      </li>      <li>Numbers</li>      <li>Letters</li>      <li>Table Manners</li>     </ul>    </li>   </ul>  </li> </ul> 
  • Things I want my son to know
    • Intangibles
      • Love
      • Security
      • Happiness
    • Tangibles
      • Colors
        • Red
        • Blue
        • Green
        • Purple
        • Orange
        • Yellow
      • Numbers
      • Letters
      • Table Manners
Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for li