Mastering HTML Description Lists

Introduction

In HTML, there is a special tag called <dl> which is used to define a description list. This type of list is usually created to explain terms and their definitions, or to give a brief explanation of a product or service. In this lab, you will learn how to use the <dl> tag to create your own description list in HTML.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") subgraph Lab Skills html/basic_elems -.-> lab-70745{{"`HTML Description List`"}} html/head_elems -.-> lab-70745{{"`HTML Description List`"}} html/lists_desc -.-> lab-70745{{"`HTML Description List`"}} end

Set up the HTML file

Create a new HTML file called index.html. Include the basic HTML structure and a title for your page.

<!doctype html>
<html>
  <head>
    <title>My Description List</title>
  </head>
  <body></body>
</html>

Create a description list using the `<dl>` tag

Within the body of your HTML file, create a description list using the <dl> tag. The <dl> tag must be paired with the <dt> tag, which represents the term being defined, and the <dd> tag, which represents the definition of the term.

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

Add styling to the description list

To make the description list look better, add some CSS styling to it. In this example, we will remove the margins and padding by setting them to zero, and then adding some padding to the <dt> tag to make it stand out.

<style>
  dl {
    margin: 0;
    padding: 0;
  }
  dt {
    padding: 10px;
    font-weight: bold;
  }
</style>

Add content to the description list

Now that you have a basic description list set up, you can start adding your own content to it. Simply add new <dt> and <dd> pairs to the list for each term and definition.

<dl>
  <dt>HTML</dt>
  <dd>
    HyperText Markup Language, the standard markup language used to create web
    pages
  </dd>
  <dt>CSS</dt>
  <dd>
    Cascading Style Sheets, a language used for describing the presentation of a
    document written in HTML
  </dd>
  <dt>JavaScript</dt>
  <dd>A programming language used primarily for developing web applications</dd>
</dl>

Save your index.html file, and then open it in a web browser to view your new description list.

Summary

In this lab, you learned how to use the <dl> tag in HTML to create a description list with terms and definitions. By using the <dt> and <dd> tags, you were able to define your terms and provide explanations for each one. You also learned how to add some simple CSS styling to your description list to make it look better on the web page.

HTML Description List