How to Add a DOCTYPE in Dreamweaver
How to Use HTML Lists on Your Web Page
How to Style Lists and Tables with CSS3

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
How to Build Tables in HTML5
JavaScript Object Terms
How to Organize Your Web Page with Tables and Frames
HTML5 and WebSQL Databases
How to Create a Simple Table on Your Web Page
Advertisement
Learning anything is easy with For Dummies eLearning!

Inside Dummies.com