X
Home WebDev Web Developers Resources HTML Lists

HTML Lists

HTML lists consists of ordered lists, unordered lists, description lists. W3Schools simplifies this with their HTML Lists page.

Source code examples below may assist with understanding how HTML lists work:

Code: Results: 
<ul>
   <li>Coffee</li>
   <li>Tea
      <ul>
         <li>Black tea</li>
         <li>Green tea</li>
      </ul>
   </li>
   <li>Milk</li>
</ul>
  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk
 
<ul>
   <li>Coffee</li>
   <li>Tea
      <ul>
         <li>Black tea</li>
         <li>Green tea
            <ol>
               <li>list item 1</li>
               <li>list item 2</li>
            </ol>
         </li>
      </ul>
   </li>
   <li>Milk</li>
</ul>
  • Coffee
  • Tea
    • Black tea
    • Green tea
      1. list item 1
      2. list item 2
  • Milk
 
<ul style="background: #eb0000;">
   <li><span style="color: #fff; font-weight: bold; font-size: 16pt;">Coffee</span></li>
   <li><span style="color: #fff; font-weight: bold; font-size: 16pt;">Tea</span>
      <ul style="background: #ff0;">
         <li><span style="color: #000; font-weight: bold; font-size: 16pt;">Black tea</span></li>
         <li><span style="color: #000; font-weight: bold; font-size: 16pt;">Green tea</span>
            <ol style="background: #0ff;">
               <li><span style="color: #000; font-weight: bold; font-size: 16pt;">dark green tea</span></li>
               <li><span style="color: #000; font-weight: bold; font-size: 16pt;">light green tea</span></li>
            </ol>
         </li>
      </ul>
   </li>
   <li><span style="color: #fff; font-weight: bold; font-size: 16pt;">Milk</span></li>
 </ul>
  • Coffee
  • Tea
    • Black tea
    • Green tea
      1. dark green tea
      2. light green tea
  • Milk
 
<ol>
   <li>no1</li>
   <li>no2</li>
   <li>no3
      <ol type="a">
         <li>no3a</li>
         <li>no3b</li>
         <li>no3c</li>
         <li>no3d</li>
      </ol>
   </li>
   <li>no4</li>
   <li>no5</li>
</ol>
  1. no1
  2. no2
  3. no3
    1. no3a
    2. no3b
    3. no3c
    4. no3d
  4. no4
  5. no5