This document discusses three types of HTML lists: unordered lists, ordered lists, and definition lists. It provides examples and code for creating each type of list. Unordered lists use bullet points and item order does not impact meaning. Ordered lists use numbers and changing item order changes meaning. Definition lists define terms with two parts - the term and its definition. Code examples are given for creating each type of list using the appropriate HTML tags.

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.