Definition lists (dl)

Hello, students! In this lesson, we will learn about HTML definition lists.

Definition lists are used to organize text on a web page.

They are identified by the <dl> tag.

Topics

• What are HTML definition lists?
• Code examples
• Definition list styles

What are HTML definition lists?

Definition lists are used to organize text on a web page.

They are used to create a list of terms and their definitions.

For example, a list of words and their meanings or a list of concepts and their explanations.

Code examples

Here are some code examples for definition lists:

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

The browser displays the list as follows:

Term 1

Definition 1

Term 2

Definition 2

You can also use <dt> and <dd> elements to create more complex item lists.

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

The browser displays the list as follows:

Term 1

Definition 1

Subdefinition 1

Subdefinition 2

Term 2

Definition 2

Definition list styles

You can use CSS styles to change the appearance of definition lists.

For example, you can use the list-style-type attribute to change the type of marker used for list terms.

Possible values for the list-style-type attribute are:

• disc: Round markers
• circle: Circular markers
• square: Square markers
• none: No markers

<dl style="list-style-type: square;">
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
</dl>

The browser displays the list as follows:

Term 1

Definition 1

You can also use the list-style-position attribute to change the position of the markers.

Possible values for the list-style-position attribute are:

• outside: Markers positioned outside the text
• inside: Markers positioned inside the text

<dl style="list-style-type: square; list-style-position: inside;">
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
</dl>

The browser displays the list as follows:

Term 1

Definition 1

Exercises

• Create an HTML document with a definition list of animals and their habitats.
• Save the document and open it in a browser.

Observe how the browser displays the list.

Good luck!

In the next module, we will learn about links and anchors.

Links are used to connect web pages to each other.

Anchors are used to create internal links within a web page.

Are you ready to learn more?