facebook google plus twitter
Webucator's Free HTML Tutorial

Lesson: HTML Lists

Welcome to our free HTML tutorial. This tutorial is based on Webucator's Introduction to HTML Training course.

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

Lesson Goals

  • Create unordered lists.
  • Create ordered lists.
  • Create definition lists.

Unordered Lists

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

Code Sample:

Lists/Demos/BeatlesUnordered.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beatles - unordered</title>
</head>
<body>
	<h1>Beatles</h1>
	<ul>
		<li>John Lennon</li>
		<li>Paul McCartney</li>
		<li>George Harrison</li>
		<li>Ringo Starr</li>
	</ul>
</body>
</html>

Code Explanation

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.Unordered Lists of Beatles Songs by Singer

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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beatles - unordered and nested</title>
</head>
<body>
	<h1>Beatles Lead Singers</h1>
	<ul>
		<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>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>George Harrison
			<ul>
				<li>Here Comes The Sun</li>
				<li>Roll Over Beethoven</li>
			</ul>
		</li>
		<li>Ringo Starr
			<ul>
				<li>Don't Pass Me By</li>
				<li>Yellow Submarine</li>
			</ul>
		</li>
	</ul>
</body>
</html>

Code Explanation

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:Unordered Nested Lists Beatles Songs by Singer

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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beatles - ordered</title>
</head>
<body>
	<h1>Beatles</h1>
	<ol>
		<li>John Lennon</li>
		<li>Paul McCartney</li>
		<li>George Harrison</li>
		<li>Ringo Starr</li>
	</ol>
</body>
</html>

Code Explanation

The image below shows how the code will be rendered.Beatles Ordered List

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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Beatles - ordered and nested</title>
</head>
<body>
	<h1>Beatles Lead Singers</h1>
	<ol>
		<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>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>George Harrison
			<ol>
				<li>Here Comes The Sun</li>
				<li>Roll Over Beethoven</li>
			</ol>
		</li>
		<li>Ringo Starr
			<ol>
				<li>Don't Pass Me By</li>
				<li>Yellow Submarine</li>
			</ol>
		</li>
	</ol>
</body>
</html>

Code Explanation

The resulting page is shown below:Beatrles Ordered Nested Lists

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>John Lennon</li>
	<li>Paul McCartney</li>
	<li>George Harrison</li>
	<li>Ringo Starr</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
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta 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.Definition List

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 an unordered list. The page should appear like this:Solution to Exercise

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

  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.

Solution:

Lists/Solutions/index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Runners Home&trade;</title>
</head>
<body><ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="Races.html">Races</a></li>
	<li><a href="Resources.html">Resources</a></li>
	<li><a href="Calculator.html">Calculator</a></li>
	<li><a href="RunningLog.html">Running Log</a></li>
	<li><a href="MyAccount.html">My Account</a></li>
	<li><a href="Logout.html">Log out</a></li>
</ul><p>Hello, Stranger!</p>
<h1>Welcome to Runners Home&trade;</h1>
<p><img src="Images/RunnersHome.gif" alt="Logo"></p>
<p>Runners Home&trade; is dedicated to providing you with:</p>
<ol>
	<li><a href="Races.html">the most up-to-date information on running races</a>.</li>
	<li><a href="Resources.html">the best resources for runners</a>.</li>
</ol><hr>
<p>&copy; 2018 Runners Home. All rights reserved. For questions, send email to <a href="mailto:info@runnershome.com">info@runnershome.com</a>.</p>
</body>
</html>

Solution:

Lists/Solutions/RunningTerms.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Running Terms</title>
</head>
<body>
<h1>Running Terms</h1>
<!--terms taken from http://www.valleyforgestriders.com/training_corner/running_terminology.htm--><dl>
      <dt>10-K pace</dt>
      <dd>10-K pace, when used in a workout to describe how fast to run, is simply the pace of a runner's last 10-K race.</dd>

      <dt>5-K/8-K/10-K</dt>
      <dd>K is for kilometers, 1,000 meters. A 5-K is equal to 3.1 miles; 8-K is 4.96 miles; 10-K is equal to 6.2 miles.</dd>

      <dt>400 meters</dt>
      <dd>Equivalent to a quarter mile or 1 lap around a standard track.</dd>

      <dt>800 meters</dt>
      <dd>Equivalent to a half-mile or 2 laps around a standard track.</dd>

      <dt>aerobic</dt>
      <dd>Used to refer to running or other exercise at an intensity that's sufficiently easy for
        your respiratory and cardiovascular systems to deliver all or most of the oxygen required
        by your muscles, and slow enough that lactic acid doesn't appreciably build up in your
        muscles. Generally, you can sustain a slow aerobic pace for long periods of time, provided
        you have the endurance to go long distances.</dd>
</dl><hr>
<p>&copy; 2018 Runners Home. All rights reserved. For questions, send email to <a href="mailto:info@runnershome.com">info@runnershome.com</a>.</p>
</body>
</html>