HTML - Definition Lists

A description list is defined by <dl> tag along with the <dt> and <dd> tags. Where <dt> tag defines the definition term, and <dd> tag defines the corresponding definition.

HTML Definition Lists

HTML definition lists define list items having the structure of terms and their corresponding definitions. These types of lists are used to define a listing structure where each list item ( data term ) contians its corresponding explanation ( definition description ).

The <dl> tag supports almost all browsers. It also supports the global attributes and event attributes. It consists of open and closing tags like ```

````

“

The <dl> tag supports almost all browsers. It also supports the global attributes and event attributes. It consists of open and closing tags like ```

````

Definition List Tags

The following are the HTML tags used for defining definition lists:

• <dl> : This tag defines the definition list.

• <dt> : This tag defines the description term.

• <dd> : This tag defines the corresponding description for the given definition term.

Creating Definition List

To create a definition list, you need to use the <dl> tag along with the <dt> and <dd> tags.

Where,

• <dl> is used as a container tag for the definition list.

• <dt> is used to define the terms that you want to define.

• <dd> is used to place the definitions for the corresponding terms.

Syntax

Below is the syntax (structure) of creating a definition list in HTML:

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

Example of Definition List

In the following example, we are creating a definition list with four terms along with their corresponding descriptions:

Styling Definition Lists

You can also customize the default appearance of the definition lists using the CSS properties . You can apply the CSS styles on all three definition list tags to style them as per your requirement to match with the website theme.

Example

In the following example, we are applying CSS properties to customize the appearance of the definition list:

Default CSS for Definition Lists

There are default CSS settings for almost all browsers that display the <dl> elements.

Example

The following code constains the default CSS properties for the definition list. If you remove them, nothing will change in output:

Nested Definition Lists

Nested definition lists allow you to add detailed sub-definitions within a main definition term.

Example

The following example demonstrates the nested definition lists in HTML: