(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-66923408-1', 'auto'); ga('send', 'pageview');
<ol> <li>First we do this,</li> <li>and then we do this,</li> <li>and then we do this.</li> </ol>
  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 Wood
    Adam is a technical writer who specializes in developer documentation and tutorials.

    Browser Support for li