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.
Similar Reads
Unordered List Inside Description List 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 point
3 min read
Unordered List Inside Ordered List Unordered List Inside Ordered List refers to a nested structure where an unordered list is placed within an ordered list. It is used when you want to combine numbered items (ordered list) with items that don’t have a particular sequence or hierarchy (unordered list).HTML<ol> <li>First St
3 min read
Unordered, Ordered, and Description Lists in HTML Lists are used to store data or information in web pages in ordered or unordered form. HTML supports several types of list elements that can be included in the <BODY>tag of the document. These elements may also be nested, i.e., the onset of elements can be embedded within another. There are th
5 min read
Explain Description Lists in HTML An HTML description list is a list of terms, with a description of each term. The HTML description list is represented as <dl>. Lists in HTML are used for specifying particular information in list form. There are various types of Lists in Html such as Ordered Lists, Unordered Lists, and descri
2 min read
HTML Description Lists An HTML Description List is not as commonly used as unordered or ordered lists but serves an important purpose for displaying name-value pairs. This type of list is marked up using three tags: <dl>, <dt>, and <dd>.<dl> (Description List): This tag defines the description list
3 min read
How to Create an Unordered List in HTML ? An unordered list in HTML is a collection of items displayed with bullet points. To create an unordered list, we can use the <ul> tag to start the list and <li> tags for each items. Unordered lists are usually displayed with bullet points. Syntax<ul> <li>apple</li> <
1 min read