MakeW3web

Definition Lists

Definition lists in HTML are used for displaying items along with their descriptions or definitions, such as a glossary or key-value pairs. Definition lists are created using the `<dl>` element, which stands for "description list". Each term in the list is represented by a `<dt>` element (description term), followed by its description or definition in a `<dd>` element (description definition).

Here are some examples of definition lists:

  1. Basic definition list:
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language, used to structure content on the web.</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets, used for styling web content.</dd>
  <dt>JavaScript</dt>
  <dd>A programming language that enables interactivity and dynamic content on web pages.</dd>
</dl>

Output:

HTML
HyperText Markup Language, used to structure content on the web.
CSS
Cascading Style Sheets, used for styling web content.
JavaScript
A programming language that enables interactivity and dynamic content on web pages.
  1. Nested definition lists:
<dl>
  <dt>Front-end</dt>
  <dd>
    The part of a website that users interact with.
    <dl>
      <dt>HTML</dt>
      <dd>HyperText Markup Language, used to structure content on the web.</dd>
      <dt>CSS</dt>
      <dd>Cascading Style Sheets, used for styling web content.</dd>
      <dt>JavaScript</dt>
      <dd>A programming language that enables interactivity and dynamic content on web pages.</dd>
    </dl>
  </dd>
  <dt>Back-end</dt>
  <dd>The part of a website responsible for processing user input, managing databases, and generating dynamic content.</dd>
</dl>

Output:

Front-end
The part of a website that users interact with.
HTML
HyperText Markup Language, used to structure content on the web.
CSS
Cascading Style Sheets, used for styling web content.
JavaScript
A programming language that enables interactivity and dynamic content on web pages.
Back-end
The part of a website responsible for processing user input, managing databases, and generating dynamic content.

Here's a combined example demonstrating the use of definition lists and nested definition lists:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Definition Lists Example</title>
</head>
<body>
    <h1>Definition Lists</h1>
    
    <h2>Basic Definition List</h2>
    <dl>
        <dt>HTML</dt>
        <dd>HyperText Markup Language, used to structure content on the web.</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets, used for styling web content.</dd>
        <dt>JavaScript</dt>
        <dd>A programming language that enables interactivity and dynamic content on web pages.</dd>
    </dl>
    
    <h2>Nested Definition Lists</h2>
    <dl>
        <dt>Front-end</dt>
        <dd>
            The part of a website that users interact with.
            <dl>
                <dt>HTML</dt>
                <dd>HyperText Markup Language, used to structure content on the web.</dd>
                <dt>CSS</dt>
                <dd>Cascading Style Sheets, used for styling web content.</dd>
                <dt>JavaScript</dt>
                <dd>A programming language that
Was this page helpful?