HTML Lists

HTML Lists

In this lesson of the HTML tutorial, you will learn… 

  1. To create unordered lists.
  2. To create ordered lists.
  3. To create definition lists.

There are three types of lists in HTML: unordered, ordered and definition lists. In this lesson, you will learn how to create all three.

Unordered Lists

Unordered lists are rendered as bulleted lists. Take a look at the following code sample:

Code Sample: Lists/Demos/BeatlesUnordered.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beatles - unordered</title>
</head>
<body>
 <h1>Beatles</h1>
 <ul>
  <li>Paul McCartney</li>
  <li>John Lennon</li>
  <li>Ringo Starr</li>
  <li>George Harrison</li>
 </ul>
</body>
</html>

The <ul> tag starts an unordered list. Each list item is contained in <li></li> tags. The image below shows how this code would be rendered.

Nesting Unordered Lists

Unordered lists can also be nested. The browsers use indentation and different styles  of bullets to display the nested lists. The following example shows how this works.

Code Sample: Lists/Demos/BeatlesUnorderedNested.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beatles - unordered and nested</title>
</head>
<body>
 <h1>Beatles Lead Singers</h1>
 <ul>
  <li>Paul McCartney
   <ul>
    <li>Lady Madonna</li>
    <li>Lovely Rita</li>
    <li>Eleanor Rigby</li>
    <li>Can't Buy Me Love
     <ul>
      <li>John and Paul together</li>
     </ul>
    </li>
    <li>When I'm Sixty-Four</li>
   </ul>
  </li>
  <li>John Lennon
   <ul>
    <li>Norwegian Wood (This Bird Has Flown)</li>
    <li>All You Need Is Love</li>
    <li>Day Tripper</li>
    <li>Can't Buy Me Love
     <ul>
      <li>John and Paul together</li>
     </ul>
    </li>
    <li>Lucy In The Sky With Diamonds</li>
   </ul>
  </li>
  <li>Ringo Starr
   <ul>
    <li>Don't Pass Me By</li>
    <li>Yellow Submarine</li>
   </ul>
  </li>
  <li>George Harrison
   <ul>
    <li>Here Comes The Sun</li>
    <li>Roll Over Beethoven</li>
   </ul>
  </li>
 </ul>
</body>
</html>

Notice that the nested unordered lists are siblings to plain text. For example, the text “George Harrison” is a sibling of the unordered list that follows it. Only list items, not lists themselves, can contain nested (child) lists. The resulting page is shown below:

Ordered Lists

Ordered lists are very similar to unordered lists. They are created with the <ol> tag and, by default, will display list items with numbers. Take a look at the following code:

Code Sample: Lists/Demos/BeatlesOrdered.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beatles - ordered</title>
</head>
<body>
 <h1>Beatles</h1>
 <ol>
  <li>Paul McCartney</li>
  <li>John Lennon</li>
  <li>Ringo Starr</li>
  <li>George Harrison</li>
 </ol>
</body>
</html>

The image below shows how the code will be rendered.

Nesting Ordered Lists

Like unordered lists, ordered lists can be nested. However, unlike in some word processing applications, nested ordered lists will continue to be displayed using standard numbers.

Code Sample: Lists/Demos/BeatlesOrderedNested.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beatles - unordered and nested</title>
</head>
<body>
 <h1>Beatles Lead Singers</h1>
 <ol>
  <li>Paul McCartney
   <ol>
    <li>Lady Madonna</li>
    <li>Lovely Rita</li>
    <li>Eleanor Rigby</li>
    <li>Can't Buy Me Love
     <ul>
      <li>John and Paul together</li>
     </ul>
    </li>
    <li>When I'm Sixty-Four</li>
   </ol>
  </li>
  <li>John Lennon
   <ol>
    <li>Norwegian Wood (This Bird Has Flown)</li>
    <li>All You Need Is Love</li>
    <li>Day Tripper</li>
    <li>Can't Buy Me Love
     <ul>
      <li>John and Paul together</li>
     </ul>
    </li>
    <li>Lucy In The Sky With Diamonds</li>
   </ol>
  </li>
  <li>Ringo Starr
   <ol>
    <li>Don't Pass Me By</li>
    <li>Yellow Submarine</li>
   </ol>
  </li>
  <li>George Harrison
   <ol>
    <li>Here Comes The Sun</li>
    <li>Roll Over Beethoven</li>
   </ol>
  </li>
 </ol>
</body>
</html>
Code Explanation

The resulting page is shown below:

As you can see, ordered lists can have nested unordered lists. The reverse is also true.

Start Attribute

The start attribute is used to specify what number the list should start on. It takes as a value any number. For example…

<ol start="3">
 <li>Paul McCartney</li>
 <li>John Lennon</li>
 <li>Ringo Starr</li>
 <li>George Harrison</li>
</ol>

Definition Lists

Definition Lists are not as widely used as unordered and ordered lists. The example below is taken from the W3C Recommendation . We’ve modified it to make it XHTML compliant.

Code Sample: Lists/Demos/DefinitionList.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Definition List</title>
</head>
<body>
 <h1>Definition List</h1>
 <dl>
  <dt>Dweeb</dt>
  <dd>young excitable person who may mature into a
   <em>Nerd</em> or <em>Geek</em></dd>
  <dt>Hacker</dt>
  <dd>a clever programmer</dd>
  <dt>Nerd</dt>
  <dd>technically bright but socially inept person</dd>
 </dl>
</body>
</html>
Code Explanation

The <dl> element contains the definition list. The <dt> elements are the definition terms and the <dd> elements are the definition descriptions. The screenshot below shows how the code will be rendered.

Exercise: Creating Lists

Duration: 15 to 25 minutes.

In this exercise you will modify index.html so that the two list items under the text “Runners Homeâ„¢ is dedicated to providing you with:” will appear as a numbered list. You will also change the menu so that the items appear in as an unordered list. The page should appear like this:

In addition, you will modify a new page called RunningTerms.html. The page uses a definition list and should appear like this:

  1. Open Lists/Exercises/index.html for editing.
  2. Change the list to a bulleted list as shown in the first screenshot above.
  3. Save your work and open your page in a browser to test it.
  4. Open Lists/Exercises/RunningTerms.html for editing.
  5. Modify the page so that it appears as shown in the screenshot above.
  6. Save your work and open your new page in a browser to test it.

HTML Lists Conclusion

In this lesson of the HTML tutorial you have learned to create unordered, ordered and definition lists.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s