Description List

Duration: 3 min

This video lesson is available to enrolled students.

Enroll to watch — TPSC Assistant Technical Officer (ATO - CS) 2026

AI summary & chapters

AI Summary

An AI-generated summary of this video lecture.

This short HTML tutorial introduces the Description List, also called a Definition List. The slide explains that it displays terms with descriptions and is useful for glossaries, dictionaries, FAQs, and technical documentation. A table maps the three tags: <dl> for Definition List, <dt> for Definition Term, and <dd> for Definition Description. The instructor then builds a practical example using contact information, showing the HTML code alongside its rendered output with Email and Phone entries. Arrows connect each tag in the code to its corresponding visual part, reinforcing how <dt> marks the term and <dd> marks the description.

Chapters

  1. 0:00 2:00 00:00-02:00

    The slide titled "Description List (Definition List)" explains that this list displays terms with descriptions, useful for glossaries, dictionaries, FAQs, and technical documentation. A two-column table headed "Tag" and "Purpose" lists <dl> = Definition List, <dt> = Definition Term, and <dd> = Definition Description. The instructor highlights keywords in the introductory text and begins writing an example term, "Apple," on the screen while red handwritten margin notes appear.

  2. 2:00 2:42 02:00-02:42

    The lesson moves to a worked example of a Description List using contact information. The HTML code is displayed on one side and the rendered output showing Email and Phone entries on the other. The instructor draws arrows and checkmarks to connect specific tags in the code, such as <dt> for the term and <dd> for the description, to their corresponding visual output.

The core teaching point is that an HTML Description List uses three nested tags: <dl> wraps the entire list, <dt> defines each term, and <dd> provides its description. The lesson progresses from the tag reference table to a concrete contact-information example, using side-by-side code and rendered output with arrows to show how each tag maps to the displayed result. This structure is ideal for glossaries, FAQs, and technical documentation where terms need paired explanations.

Loading lesson…