HTML Tutorial

Step 6: Lists

Web content can come in all types, but when displaying text it often occurs that you're making a list of some kind. A helpful set of HTML tags exist to help identify these lists. The <ul> tag is used to denote unordered list elements and the <ol> tag indicates an ordered list. Inside those lists, individual item elements are given by the <li> tag.

A more specialized kind of list is a definition list denoted by the <dl> tag. This list is different in that it has two different item tags for the definition term <dt>, and definition descriptions <dd>. Here's an example.

The Code

<html>
   <body>
      <ul>
         <li> First item. </li>
         <li> Second item. </li>
      </ul>

      <ol>
         <li> First item. </li>
         <li> Second item. </li>
      </ol>

      <dl>
         <dt> The Durham Bulls <dt>
         <dd> The local minor league baseball team. <dd>
         <dd> A team so popular that it outdrew its parent 
            professional team (Tampa Bay Devil Rays) on 
            consecutive nights last season. <dd>
      </dl>
   </body>
</html>
	

The Result

For simple webpages, these list elements are useful because they allow web browsers to provide basic formatting for our content. For more advanced webpages, these tags provide a good structure allowing us to change the style and formats however we choose. Again, we'll see how to change those styles effectively later on in the CSS Tutorial.


<< Step 5 << >> Step 7 >>