TechnoHTML
Module 11
Inserting Description Lists
Grade 8
DISCLAIMER
The images and works found on this material may include content(s) that is/are copied or sourced from third parties. All intellectual property rights, including copyrights, trademarks, and other proprietary
rights, in such content remain the property of their respective owners.
We do not claim ownership of or responsibility for any copyrighted material that is not our own. The inclusion of such content is intended for informational or illustrative purposes only and does not imply
endorsement or affiliation with the original creators or copyright holders.
© 2024. TechnoKids Philippines.
TechnoHTML / Module 11
Inserting Description Lists
Overview
Target Skills
By the end of this module, you should be able to:
1. Know when and how to use a description list.
2. Create description lists.
Materials Needed:
For this module, you will need the following:
● computer unit with internet connection
● Notepad ++
● web browser
TechnoKids Philippines | 2
TechnoHTML / Module 11
Inserting Description Lists
Lecture
Creating Description Lists
The last type of list you can define in HTML is the description list. The description list shows
hierarchy and is best used to indicate a glossary of terms and their respective descriptions or
definitions. Like the unordered list, a description list defines items in no particular order. Unlike
both the ordered and unordered lists, a description list does not use either bullets or numbers.
The HTML code to define a
description list is the <dl> tags.
To define list items or items
belonging to the list, use the
<dt> tags. To add descriptions
or details for each list item,
use the <dd> tags.
Descriptions will be indented.
You can add as many <dd> tags
as you would like after each
<dt> tag to include multiple
descriptions.
Activity
Reveal It
1. Download and extract AngryBirds.zip.
2. Open AngryBirds.html on a browser. Notice how it doesn't include the descriptions for each
bird.
TechnoKids Philippines | 3
TechnoHTML / Module 11
Inserting Description Lists
3. Open AngryBirds.html in Notepad++. Navigate to the portion of the code with the
“Descriptions” text.
4. Change “Descriptions” to “About the Birds”, then add a definition list using the <dl> tags. List
the name of each bird using the <dt> tags.
5. Search for information about each bird using the internet. Use a search engine to look for
information.
6. Open reliable links. Examine the website properly using the guidelines as indicated in the
Lecture portion of Module 3.
TechnoKids Philippines | 4
TechnoHTML / Module 11
Inserting Description Lists
7. Based on your sources, add definitions for each bird using <dd> tags. Feel free to use
multiple sources to add as much information as you want per bird.
8. Add your finishing touches. Save the file, then refresh its output on the browser.
Review
Fill in the Blanks: Write the correct answer on the blank provided.
1. A __________ list shows hierarchy.
2. A description list defines items in no particular order, like the __________ list.
3. A description list __________ either bullets or numbers.
4. List items in a description list uses __________ tags.
5. You can add as many __________ tags for each <dt> tags.
TechnoKids Philippines | 5
