1. HTML Lists
Lesson 8
Module 2: HTML Basics

2. Lesson Overview
 In this lesson, you will learn to:
1. Create lists using HTML code.
2. Improve readability of a Web page using lists.

3. Guiding Questions
1. Find a Web page that uses a list. How does a
list impact the readability of the page?
2. Give 2 examples of how a list could be used in
a Web page or Web site on another topic?

4. Types of Lists
 Threetypes of lists which will be covered in this
lesson:
1. Unordered lists
2. Ordered lists
3. Definition lists

5. Unordered Lists
 Similarto bulleted lists in word processing
 Items in the list have no special order
 Changing the order would not change the
meaning of the information
 Example: A listing of your school subjects:
 Science
 Math
 Reading

6. Creating an Unordered List
 Start with the <ul>…</ul> tags to designate the
beginning and ending of an unordered list
 Add <li>…</li> tags to identify items to be placed in
the list
 To create our list of school subjects, use the
following HTML code:
<ul>
<li>Science</li>
<li>Math</li>
<li>Reading</li>
<ul>

7. Ordered Lists
 Use a numbering or ordering system to create
meaning
 Changing the order changes the meaning
 For example: A list of the steps to make a
peanut butter sandwich.
 Changing the order of the steps changes the
outcome of the sandwich

8. Creating an Ordered List
 Startwith the <ol>…</ol> tags to designate the
beginning and ending of an ordered list
 The same <li> tag identifies items in the list

9. Creating an Ordered List
 Code for making a peanut butter sandwich:
<ol>
<li>Get a slice of bread.</li>
<li>Open a jar of peanut butter.</li>
<li>Spread peanut butter on the slice of bread
with a knife.</li>
<li>Place another slice of bread on top.</li>
<li>Eat the sandwich.</li>
</ol>

10. Definition Lists
 Used to define terms
 Different from unordered and ordered lists
 Has two parts
1. The term
2. The definition
 Labeling of the parts is very important

11. Creating a Definition List
A <dl>…</dl> tag identifies the beginning and
ending of the list
 A <dt>…</dt> tag identifies the terms
 A <dd>…</dd> tag identifies the definitions

12. Creating a Definition List
 Example of definition list coding:
<dl>
<dt>format</dt>
<dd>the design and layout of a page</dd>
<dt>source code</dt>
<dd>the HTML code that creates a Web
page</dd>
<dt>Web page</dt>
<dd>a file written in HTML, or other Web
publishing language</dd>
</dl>

13. Lesson Review
 Describe the code needed to create each of
the following:
1. Unordered list
2. Ordered list
3. Definition list

14. Practice: Lists
1. Create the following changes in your “Tags
and Attributes” Web page:
 An unordered list
 An ordered list
 A definition list
2. Challenge Activity: Add underlining as
appropriate.