How to Register a Domain Name for Your HTML5 and CSS3 Site
How to Create a New JavaScript File in Komodo Edit
How to Use IrfanView’s Built-In Effects for HTML5 and CSS3 Programming

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.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
10 Stellar Web Resources for HTML5 and CSS3
How to Create Cascading Style Sheets (CSS) Simply and Easily
How to Add Missiles to Objects in Your HTML5 Game
How to Use CSS3 Three-Dimensional Transformations
How to Make Your First JavaScript for Loop
Advertisement
Learning anything is easy with For Dummies eLearning!

Inside Dummies.com