LIST TAGS

CREATING LIST IN HTML

OBJECTIVES

At the end of this lesson, you are expected to:

1. Identify the tags used in inserting/creating list in basic

HTML and;
2. create a website that display list using basic HTML.
 What is a list?
-allow web developers to group a set of related items
 What are the symbols you
commonly use to identify a list?
INTRODUCTION

• HTML lists appear in web browsers as bulleted lines of text.

• There are actually three different types of HTML lists,
including unordered lists (bullets), ordered lists (numbers),
and definition lists. Each list type utilizes its own unique list
tag.
Creating Ordered and Unordered Lists

• The Ordered list is the perfect step by step instructions on

how to complete a particular task for creating an outline
of a larger document.
• While the Unordered list is probably the most widely used
lists on the web. Use them to list any series of items that
have no particular order
Creating Ordered and Unordered Lists

• When you create a list, you can also choose what kind of
markers (bullets or numbers) should appear to each list
(Ordered or Unordered list)
Creating Ordered and Unordered Lists
To create lists:

1. Type <ol> for an ordered list or <ul> to begin an unordered list.

2. Type <li> (that's the first two letters of the word list) to begin the first
list item.
3. Type the text to be included in the list item.
4. Type </li> to complete each list item.
5. Repeat steps 2-4 foreach new list item.
6. Type </ol> or </ul>, to match the opening tag to complete the
list.
HTML Unordered Lists
Creating Definition Lists
• The Definition list is mostly suited to glossaries and works
with any list that pairs a word or phrase with a longer
description
Creating Definition Lists
To create definition list:
1. Type the introductory text for the definition list.
2. Type <dl>.
3. Type <dt>.
4. Type the word or short phrase that will be defined or explained
5. Type </dt> to complete the definition term.
6. Type <dd>.
7. Type the definition of the term that was entered in step 4
8. Type </dd> to complete the definition.
9. Repeat steps 3-8 for each pair of terms and definitions
10. Type </dl> to complete the list.
Nested List
You can put a second list inside an <li> element to
create a sub list or nested list.