X

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

The University of Memphis uses cookies in order to enhance your website experience. Visit our Website’s Cookie Policy for more information on how the UofM uses cookies. I understand that by clicking “I agree” and/or continuing to use this website, I agree to the UofM’s use of cookies. More information >

Youvisit Pixel