Ordered List Inside Description List

Last Updated : 17 Jan, 2025

Combination of Ordered List <ol> within a Description List <dl> is an effective way to present terms and their sequentially structured details. This combination is especially useful for showcasing processes, steps, or rankings associated with specific terms.

HTML

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

    <dl>
        <dt>How to Do</dt>
        <dd>
            <ol>
                <li>Get tools.</li>
                <li>Set up.</li>
                <li>Follow steps.</li>
                <li>Check work.</li>
            </ol>
        </dd>
        <dt>Why It's Good</dt>
        <dd>
            <ol>
                <li>Saves time.</li>
                <li>Keeps things neat.</li>
                <li>Makes it clear.</li>
            </ol>
        </dd>
    </dl>

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

The code uses a description list (<dl>) with terms (<dt>) and descriptions (<dd>).
Ordered lists (<ol>) inside <dd> provide numbered steps or points.

1. Nested multiple ordered lists inside description list

A description list can contain multiple nested ordered lists, allowing for structured explanations with sequential steps under different headings.

HTML

<dl>
    <dt>Process A</dt>
    <dd>
        <ol>
            <li>Step 1</li>
            <li>Step 2
                <ol>
                    <li>Sub-step 2.1</li>
                    <li>Sub-step 2.2</li>
                </ol>
            </li>
            <li>Step 3</li>
        </ol>
    </dd>
    <dt>Process B</dt>
    <dd>
        <ol>
            <li>Step 1</li>
            <li>Step 2</li>
            <li>Step 3</li>
        </ol>
    </dd>
</dl>

2. Customize bullets and numbers in description list

Customizing bullets and numbers in a description list refers to modifying the default appearance of list items in an HTML description list (<dl>).

HTML

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

    <style>
        .custom-ol {
            list-style-type: upper-roman;
        }
        .nested-ol {
            list-style-type: lower-alpha;
        }
        dl {
            font-family: Arial, sans-serif;
        }
        dt {
            font-weight: bold;
        }
        dd {
            padding-left: 20px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <dl>
        <dt>Process A</dt>
        <dd>
            <ol class="custom-ol">
                <li>Step 1</li>
                <li>Step 2
                    <ol class="nested-ol">
                        <li>Sub-step 2.1</li>
                        <li>Sub-step 2.2</li>
                    </ol>
                </li>
                <li>Step 3</li>
            </ol>
        </dd>
        <dt>Process B</dt>
        <dd>
            <ol class="custom-ol">
                <li>Step 1</li>
                <li>Step 2</li>
                <li>Step 3</li>
            </ol>
        </dd>
    </dl>
</body>
</html>
<!--Driver Code Ends-->

3. Custom bullet points or numbers

An ordered list inside a description list allows you to combine detailed descriptions with sequential steps. Using custom bullet points or numbering styles adds clarity and improves visual appeal.

HTML

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

    <style>
        ol.custom {
            list-style: none;
            counter-reset: num;
            margin: 0;
            padding: 0;
        }
        ol.custom li {
            counter-increment: num;
            margin: 5px 0;
        }
        ol.custom li::before {
            content: counter(num) ". ";
            font-weight: bold;
            color: #007BFF;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <dl>
        <dt>Exercise Benefits</dt>
        <dd>
            <ol class="custom">
                <li>Improves mental health</li>
                <li>Boosts cardiovascular health</li>
                <li>Enhances flexibility</li>
            </ol>
        </dd>
        <dt>Productivity Tips</dt>
        <dd>
            <ol class="custom">
                <li>Set goals</li>
                <li>Prioritize tasks</li>
                <li>Take breaks</li>
            </ol>
        </dd>
    </dl>
</body>
</html>

<!--Driver Code Ends-->

In this example

CSS Styling: The ol.custom removes default list styles and adds custom numbering using counter-reset and counter-increment.
Custom Numbers: li::before displays a custom number before each list item, styled in blue and bold.
Description List: <dl> organizes the content, with <dt> for titles and <dd> for descriptions.
Ordered List: Each <dd> contains an ordered list (ol) with custom-styled items.

4. Nested ordered list with Roman numerals

A nested ordered list with Roman numerals inside a description list organizes information hierarchically. Roman numerals enhance clarity for sub-steps or grouped content.

HTML

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

    <style>
        ol.custom {
            list-style: none;
            counter-reset: num;
            margin: 0;
            padding: 0;
        }
        ol.custom li {
            counter-increment: num;
            margin: 5px 0;
        }
        ol.custom li::before {
            content: counter(num) ". ";
            font-weight: bold;
            color: #007BFF;
        }
        ol.roman {
            list-style-type: upper-roman; 
            margin-left: 20px;
        }
    </style>

<!--Driver Code Starts-->
</head>
<body>
    <dl>
        <dt>Courses</dt>
        <dd>
            <ol class="custom">
                <li>DBMS</li>
                <li>C++</li>
                <li>
                    Web Developement
                    <ol class="roman">
                        <li>Next JS</li>
                        <li>React JS</li>
                    </ol>
                </li>
            </ol>
        </dd>
        <dt>GeeksforGeeks</dt>
        <dd>
            <ol class="custom">
                <li>Content</li>
                <li>
                    Technology
                    <ol class="roman">
                        <li>AI/ML</li>
                        <li>Java</li>
                    </ol>
                </li>
                <li>Sql</li>
            </ol>
        </dd>
    </dl>
</body>
</html>
<!--Driver Code Ends-->

In this example

Custom Main List: ol.custom creates a numbered list with custom numbers using CSS counters.
Roman Numerals: ol.roman sets list-style-type: upper-roman for nested lists to show Roman numerals.
Nested Lists: Inner <ol class="roman"> is indented using margin-left.
Description Structure: Each <dt> has a <dd> with lists organized hierarchically.
Flexible Styling: Easily add more nesting levels or change styles as needed.

5. Nested ordered lists inside a description list (`<dl>`)

A nested ordered list inside a description list helps organize main points with detailed substeps. It ensures clear hierarchy and readability for complex processes.

HTML

<!--Driver Code Starts-->
<html>
<head>
    <style>
        dl dd ol {
            list-style-type: upper-roman;
            margin-left: 20px;
        }
        dl dd ol li {
            margin: 5px 0;
        }
    </style>
</head>
<body>
<!--Driver Code Ends-->

    <dl>
        <dt>Exercise Benefits</dt>
        <dd>
            <ol>
                <li>Improves mental health</li>
                <li>Boosts cardiovascular health</li>
                <li>
                    Enhances flexibility
                    <ol>
                        <li>Increases joint range</li>
                        <li>Reduces muscle stiffness</li>
                    </ol>
                </li>
            </ol>
        </dd>
        <dt>Productivity Tips</dt>
        <dd>
            <ol>
                <li>Set goals</li>
                <li>
                    Prioritize tasks
                    <ol>
                        <li>Urgent tasks first</li>
                        <li>Group similar tasks</li>
                    </ol>
                </li>
                <li>Take breaks</li>
            </ol>
        </dd>
    </dl>

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

In this example

Target Nested Lists: The dl dd ol selector applies styles only to <ol> inside <dd>.
Roman Numerals: list-style-type: upper-roman; sets Roman numerals for nested lists.
Indentation: margin-left: 20px; indents nested lists for better readability.
Spacing: margin: 5px 0; adds spacing between list items.
No Effect on Main List: This approach keeps the main list untouched and styles only the nested lists.

JavaScript Tutorial

tanmxcwi

Improve

Article Tags :

Ordered List Inside Description List

1. Nested multiple ordered lists inside description list

2. Customize bullets and numbers in description list

3. Custom bullet points or numbers

4. Nested ordered list with Roman numerals

5. Nested ordered lists inside a description list (<dl>)

Similar Reads

Thank You!

What kind of Experience do you want to share?

5. Nested ordered lists inside a description list (`<dl>`)