How to Create Lists in HTML5

The web pages you create with HTML5 are often about data, and data is often organized into lists, which can stand alone or nest within each other. The items in your lists can either be numbered (an ordered list) or unnumbered (unordered).

This figure shows an unordered, or bulleted, list; an ordered, or numbered, list; and a combination nesting list:

image0.jpg

Here's the code used to create the lists:

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <title>listDemo.html</title>
  <meta charset = "UTF-8" />
</head>
<body>
  <h2>Languages</h2>
  <ul>
    <li>English</li>
    <li>Spanish</li>
    <li>Japanese</li>
  </ul>
  
  <h2>Counting in English</h2>
  <ol>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ol>
  
  <h2>Counting in Other Languages</h2>
  <ul>
    <li>Spanish
      <ol>
        <li>uno</li>
        <li>dos</li>
        <li>tres</li>
      </ol>
    </li>
    
    <li>Japanese
      <ol>
        <li>ichi</li>
        <li>ni</li>
        <li>san</li>
      </ol>      
    </li>
  </ul>
</body>
</html>

Lists, like most HTML5 elements, are quite easy to build:

  1. Designate the beginning of the list with <ul> or <ol>.

    The <ul> tag indicates an unordered (bullet) list, and the <ol> tag describes an ordered (numbered) list.

  2. Surround each item in the list with an <li></li> pair.

  3. (Optional) Nest lists inside each other.

    The <li> of one list can contain an entire new list. Just be sure to close off one list before beginning a new one. Consistent indentation helps you keep track of how deeply you're nested.

blog comments powered by Disqus
Advertisement
Learning anything is easy with For Dummies eLearning!

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.