Unordered List Inside Description List
Last Updated :
14 Jan, 2025
Improve
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.
<!--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
<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
<!--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
<!--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.
<!--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
<!--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-alphaand adding indentation for clarity.
