7. HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Unordered lists

  • starts with the <ul> tag.
  • Each list item starts with the <li> tag.
  • Example:
<ul>  
  <li>item 1</li>  
  <li>item 2</li>  
  <li>item 3</li>  
</ul>
  • Live:
    list_unordered.png

Ordered lists

  • An ordered list starts with the <ol> tag.
  • Each list item starts with the <li> tag.
  • Example:
<ol>  
  <li>Coffee</li>  
  <li>Tea</li>  
  <li>Milk</li>  
</ol>
  • Live:
    list_ordered.png

Description lists

  • A description list is a list of terms, with a description of each term.
  • The <dl> tag is the container for the list.
  • The <dt> tag defines the term that you want to explain.
  • The <dd> tag describes each term
  • Example:
<dl>  
  <dt>Coffee</dt>  
  <dd>- black hot drink</dd>  
  <dt>Milk</dt>  
  <dd>- white cold drink</dd>  
</dl>
  • Live:
    list_description.png