Open In App

Ordered List Inside Description List

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
8 Likes
Like
Report

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.

T

tanmxcwi
Improve
Article Tags :

Explore

Lightbox