Unordered List Inside Description List

Last Updated : 14 Jan, 2025

An unordered list inside a description list is a way to organize and present information in HTML where a description list(<dl>) contains unordered lists (<ul>) within its description definitions (<dd>). This allows for a term to be defined and followed by additional, detailed points or subitems presented as a bulleted list.

HTML

<!--Driver Code Starts-->
<html>
<head></head>
<body>
    <h2>Welcome To GFG</h2>
<!--Driver Code Ends-->

    <dl>
        <dt>Web Development</dt>
        <dd>
            The process of building and maintaining websites. It involves:
            <ul>
                <li>Front-end development</li>
                <li>Back-end development</li>
                <li>Database management</li>
            </ul>
        </dd>
    </dl>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->

Nested multiple unordered lists inside a description list

Create nested multiple unordered lists inside a description list, you can embed multiple <ul> elements within <dd> tags, with each unordered list potentially containing another list

HTML

<dl>
  <dt>Shopping List</dt>
  <dd>
    <ul>
      <li>Fruits
        <ul>
          <li>Apples</li>
          <li>Bananas</li>
        </ul>
      </li>
      <li>Vegetables</li>
    </ul>
  </dd>
</dl>

Customize bullets and numbers

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        ul.custom-bullets {
            list-style-type: square;
        }
        ul.custom-bullets li {
            font-size: 18px;
        }
        dl {
            font-family: Arial, sans-serif;
        }
        dt {
            font-weight: bold;
        }
        dd {
            padding-left: 20px;
        }
        ol.custom-numbers {
            list-style-type: upper-roman;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <dl>
        <dt>Tasks</dt>
        <dd>
            <ul class="custom-bullets">
                <li>Buy groceries</li>
                <li>Complete homework</li>
                <li>Clean the house</li>
            </ul>
        </dd>
        <dt>Steps</dt>
        <dd>
            <ol class="custom-numbers">
                <li>Prepare ingredients</li>
                <li>Mix ingredients</li>
                <li>Cook</li>
            </ol>
        </dd>
    </dl>
</body>
</html>
<!--Driver Code Ends-->

In this example

Unordered List Bullets: The bullets in the unordered list are customized to be square using list-style-type: square;.
Ordered List Numbers: For the ordered list, the numbers are customized to Roman numerals using list-style-type: upper-roman;.
CSS Styling: The description list (<dl>) and list items (<dt>, <dd>) are styled with padding and font adjustments for clarity.

Nested multiple unordered lists inside a description list

Create nested multiple unordered lists inside a description list, you can structure the HTML by including multiple levels of <ul> elements within the <dd> tags

HTML

<!--Driver Code Starts-->
<html>
<head>
    <style>
        ul.custom-bullets {
            list-style-type: circle;
            font-size: 18px;
        }
        ul.custom-bullets li {
            margin-bottom: 8px;
        }
        ul.custom-bullets ul {
            list-style-type: square;
            margin-left: 20px;
        }
        dl {
            font-family: Arial, sans-serif;
        }
        dt {
            font-weight: bold;
        }
        dd {
            padding-left: 20px;
        }
    </style>
</head>
<body>
<!--Driver Code Ends-->

    <dl>
        <dt>Shopping List</dt>
        <dd>
            <ul class="custom-bullets">
                <li>Fruits
                    <ul>
                        <li>Apples</li>
                        <li>Bananas</li>
                    </ul>
                </li>
                <li>Vegetables
                    <ul>
                        <li>Carrots</li>
                        <li>Spinach</li>
                    </ul>
                </li>
                <li>Snacks
                    <ul>
                        <li>Chips</li>
                        <li>Cookies</li>
                    </ul>
                </li>
            </ul>
        </dd>
    </dl>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->

In this example

Nested Unordered Lists: The main <ul> list is nested inside the <dd>, with each list item containing another <ul>. This creates a hierarchical structure where sub-items (like "Apples" and "Bananas") appear under the main categories (like "Fruits").
Bullet Customization: The top-level unordered list uses circle bullets, while the nested lists use square bullets

Unordered list inside a description list with custom bullet points

An unordered list inside a description list allows you to present items with bullet points under a specific definition.

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        ul.custom-bullets {
            list-style-type: square;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <dl>
        <dt>Shopping List</dt>
        <dd>
            <ul class="custom-bullets">
                <li>Fruits</li>
                <li>Vegetables</li>
                <li>Dairy</li>
            </ul>
        </dd>
    </dl>
</body>
</html>
<!--Driver Code Ends-->

In this example

Custom Bullets: The unordered list uses square bullets by setting list-style-type: square; in the CSS.
Description List: The unordered list is placed inside the <dd> tag of a description list (<dl>).

Nested unordered list with Roman numerals

This refers to a description list (<dl>) where each item contains an unordered list (<ul>) with nested list items styled with Roman numerals

HTML

<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->

    <style>
        ul.roman-numerals {
            list-style-type: upper-roman;
        }

        ul.roman-numerals ul {
            list-style-type: lower-alpha;
            margin-left: 20px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <dl>
        <dt>Shopping List</dt>
        <dd>
            <ul class="roman-numerals">
                <li>Fruits
                    <ul>
                        <li>Apples</li>
                        <li>Bananas</li>
                    </ul>
                </li>
                <li>Vegetables</li>
            </ul>
        </dd>
    </dl>
</body>
</html>
<!--Driver Code Ends-->

In this example

The code creates a description list (<dl>) with a nested unordered list (<ul>) inside the <dd> element.
The outer list items are numbered with Roman numerals (I, II, III) using list-style-type: upper-roman.
The nested list inside "Fruits" useslowercase letters (a, b, c) by applying list-style-type: lower-alpha and adding indentation for clarity.

Ordered List Inside Description List

tanmxcwi

Improve

Article Tags :

Unordered List Inside Description List

Nested multiple unordered lists inside a description list

Customize bullets and numbers

Nested multiple unordered lists inside a description list

Unordered list inside a description list with custom bullet points

Nested unordered list with Roman numerals

Similar Reads

Thank You!

What kind of Experience do you want to share?