HTML Other Lists
HTML provides several list-related elements that help organize information in a clear and meaningful way. Most developers are familiar with unordered lists (<ul>) and ordered lists (<ol>), but HTML also includes other list elements and techniques that are useful for specific types of content.
The term HTML Other Lists commonly refers to list structures beyond the basic unordered and ordered lists, especially description lists created with <dl>, <dt>, and <dd>. These elements are designed for content made up of terms and their corresponding descriptions, definitions, explanations, or values.
Understanding these elements helps you choose the right HTML structure for your content instead of using ordinary lists or unnecessary <div> elements.
What Are Other Lists in HTML?
HTML has three main list structures:
- Unordered list —
<ul> - Ordered list —
<ol> - Description list —
<dl>
The first two are used for collections of related items. A description list has a different purpose. It connects a term with one or more descriptions or values.
For example, a glossary can be represented using a description list:
<dl>
<dt>HTML</dt>
<dd>A markup language used to structure content on the web.</dd>
<dt>CSS</dt>
<dd>A stylesheet language used to control the presentation of web pages.</dd>
<dt>JavaScript</dt>
<dd>A programming language commonly used to add interactivity to web pages.</dd>
</dl>
This structure tells browsers and assistive technologies that the content consists of terms and their associated descriptions.
The HTML Description List
The <dl> element represents a description list.
It is useful when information is organized into pairs or groups such as:
- Terms and definitions
- Questions and answers
- Names and descriptions
- Products and specifications
- Features and explanations
- Metadata and values
- Abbreviations and meanings
A basic description list looks like this:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets.</dd>
</dl>
Here:
<dl>defines the entire description list.<dt>defines a term or name.<dd>defines the description, definition, or value associated with the term.
The <dl> Element
The <dl> element is the container for a description list.
Example:
<dl>
<dt>Browser</dt>
<dd>A software application used to access websites.</dd>
<dt>Server</dt>
<dd>A computer or system that provides resources or services to other systems.</dd>
</dl>
The <dl> element itself does not normally create numbered or bullet markers like <ol> and <ul>.
Its purpose is to express a relationship between terms and their descriptions.
The <dt> Element
The <dt> element represents a term or name within a description list.
For example:
<dl>
<dt>HTML</dt>
<dd>A markup language for structuring web content.</dd>
</dl>
In this example, HTML is the description term.
The term does not necessarily have to be a dictionary word. Depending on the content, it can represent:
- A question
- A product name
- A person’s name
- A category
- A technical term
- A label
- A property
- A topic
The <dd> Element
The <dd> element provides the description, explanation, or value associated with a term.
Example:
<dl>
<dt>HTML</dt>
<dd>Used to structure content on web pages.</dd>
</dl>
The <dd> element can contain more than simple text. It can contain other HTML content when appropriate.
For example:
<dl>
<dt>Website</dt>
<dd>
<p>A collection of related web pages.</p>
<a href="/learn-more">Learn more</a>
</dd>
</dl>
This makes description lists flexible enough for many real-world situations.
Multiple Terms for One Description
A description list can associate several terms with the same description.
For example:
<dl>
<dt>HTML</dt>
<dt>HyperText Markup Language</dt>
<dd>A markup language used to structure web content.</dd>
</dl>
Both terms are associated with the same description.
This can be useful when a concept has:
- Multiple names
- An abbreviation and its full form
- Alternative terms
- Synonyms
Multiple Descriptions for One Term
A single term can also have multiple descriptions.
Example:
<dl>
<dt>HTML</dt>
<dd>A markup language.</dd>
<dd>A standard used to structure web documents.</dd>
</dl>
This is useful when one term requires several related explanations.
Description Lists for Glossaries
One of the most common uses of <dl> is a glossary.
<dl>
<dt>Algorithm</dt>
<dd>A sequence of steps used to solve a problem or complete a task.</dd>
<dt>Variable</dt>
<dd>A named storage location used to hold a value in a program.</dd>
<dt>Function</dt>
<dd>A reusable block of code designed to perform a particular task.</dd>
</dl>
This is more semantically appropriate than using a series of <div> elements.
Description Lists for FAQs
Description lists can sometimes be useful for frequently asked questions.
<dl>
<dt>What is HTML?</dt>
<dd>HTML is a markup language used to structure web content.</dd>
<dt>What is CSS?</dt>
<dd>CSS is used to style and present HTML content.</dd>
<dt>What is JavaScript?</dt>
<dd>JavaScript is commonly used to add behavior and interactivity to websites.</dd>
</dl>
However, a description list should only be used when the question-and-answer relationship fits the semantics of a description list. It should not automatically be used for every FAQ interface.
Description Lists for Product Information
Description lists can also represent product specifications.
<dl>
<dt>Brand</dt>
<dd>ExampleTech</dd>
<dt>Storage</dt>
<dd>512 GB</dd>
<dt>Memory</dt>
<dd>16 GB</dd>
<dt>Display</dt>
<dd>15.6 inches</dd>
</dl>
This creates a meaningful relationship between each specification and its value.
Description Lists for Metadata
Description lists can be useful for presenting metadata.
<dl>
<dt>Author</dt>
<dd>Dibya Mendali</dd>
<dt>Published</dt>
<dd>August 16, 2026</dd>
<dt>Category</dt>
<dd>HTML Tutorials</dd>
</dl>
This can be a clean way to present structured information.
Description Lists Are Not Just for Definitions
The name “description list” can sometimes cause confusion. A <dl> is not limited to dictionary definitions.
It can represent a list of terms and associated descriptions or values.
For example:
<dl>
<dt>Price</dt>
<dd>$499</dd>
<dt>Status</dt>
<dd>Available</dd>
</dl>
Here, the content is not a dictionary definition. Instead, each term has an associated value.
Description List vs Unordered List
An unordered list is appropriate when items form a collection without a particular sequence.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
A description list is appropriate when each item has an associated description or value.
<dl>
<dt>HTML</dt>
<dd>Structures web content.</dd>
<dt>CSS</dt>
<dd>Styles web content.</dd>
<dt>JavaScript</dt>
<dd>Adds behavior and interactivity.</dd>
</dl>
The choice depends on the relationship between the pieces of information.
Description List vs Ordered List
An ordered list is used when the sequence matters.
<ol>
<li>Open the website.</li>
<li>Enter your username.</li>
<li>Submit the form.</li>
</ol>
A description list is not intended to represent a sequence.
<dl>
<dt>Username</dt>
<dd>The name used to identify the account.</dd>
<dt>Password</dt>
<dd>A secret value used to authenticate the user.</dd>
</dl>
Use <ol> for steps and <dl> for term-description relationships.
Can <li> Be Used Inside <dl>?
The <li> element belongs to <ul> and <ol>. It is not the normal child element for a description list.
A description list uses:
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>
Instead of:
<dl>
<li>Term</li>
</dl>
Using the correct elements improves semantic meaning and accessibility.
Styling Other Lists with CSS
Description lists have default browser styling, but they can be customized with CSS.
For example:
<dl>
<dt>HTML</dt>
<dd>A markup language used to structure web content.</dd>
<dt>CSS</dt>
<dd>A language used to style web content.</dd>
</dl>
CSS:
dl {
margin: 20px 0;
}
dt {
font-weight: bold;
}
dd {
margin-left: 20px;
margin-bottom: 10px;
}
This makes the terms visually distinct from their descriptions.
Horizontal Description Lists
Description lists are sometimes displayed in a two-column format.
dl {
display: grid;
grid-template-columns: 150px 1fr;
gap: 10px 20px;
}
dt {
font-weight: bold;
}
dd {
margin: 0;
}
HTML:
<dl>
<dt>Name</dt>
<dd>Example Product</dd>
<dt>Price</dt>
<dd>$499</dd>
<dt>Status</dt>
<dd>Available</dd>
</dl>
This can work well for specifications and metadata.
Nested Content in Description Lists
The <dt> and <dd> elements can contain appropriate phrasing or flow content depending on the structure and purpose.
For example:
<dl>
<dt>HTML</dt>
<dd>
<p>HTML is used to structure web pages.</p>
<ul>
<li>Headings</li>
<li>Paragraphs</li>
<li>Links</li>
</ul>
</dd>
</dl>
This allows a description to contain additional structured information when needed.
However, nesting should be used only when it makes the content clearer.
Accessibility and Other Lists
Semantic HTML can improve accessibility because assistive technologies can better understand the relationships between different pieces of content.
A properly structured description list communicates that:
- A term exists.
- A description belongs to that term.
- Multiple descriptions may be associated with one term.
- Multiple terms may be associated with one description.
Do not choose <dl> simply because it looks visually attractive. Choose it because the information has a genuine term-description relationship.
HTML Lists and Semantic HTML
Semantic HTML means selecting elements according to their meaning rather than their appearance.
For example, do not create a fake list using:
<div>HTML</div>
<div>CSS</div>
<div>JavaScript</div>
when the content is actually a list.
Instead, use the appropriate list element:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Similarly, use <dl> when information consists of terms and descriptions.
Common Mistakes with Description Lists
Using <dl> for Every List
A description list is not a replacement for <ul> or <ol>.
Use <ul> when you have a collection of items.
Use <ol> when order matters.
Use <dl> when terms have associated descriptions or values.
Using <dt> Without a Meaningful Relationship
The <dt> and <dd> elements should have a clear relationship.
Poor structure:
<dl>
<dt>Apple</dt>
<dd>Orange</dd>
<dt>Table</dt>
<dd>Chair</dd>
</dl>
This does not naturally communicate a term-description relationship.
Using CSS to Create Semantics
Changing the appearance of <div> elements with CSS does not turn them into a semantic list.
CSS controls presentation. HTML communicates meaning.
Using Lists Only for Visual Indentation
HTML elements should be chosen based on the content’s structure, not simply because they produce a particular indentation or layout.
A Complete Example
Here is a practical example combining the main description-list elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Other Lists</title>
<style>
dl {
max-width: 700px;
}
dt {
font-weight: bold;
margin-top: 15px;
}
dd {
margin-left: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>Web Development Terms</h2>
<dl>
<dt>HTML</dt>
<dd>A markup language used to structure web pages.</dd>
<dt>CSS</dt>
<dd>A stylesheet language used to control the appearance of web pages.</dd>
<dt>JavaScript</dt>
<dd>A programming language commonly used to add interactivity to websites.</dd>
</dl>
</body>
</html>
This example uses semantic HTML and simple CSS to create a readable description list.
When Should You Use <dl>?
Use a description list when the content naturally consists of related term-and-description pairs.
Good examples include:
- Glossaries
- Definitions
- Product specifications
- Metadata
- Key-value information
- Terminology
- Names and descriptions
- Questions and answers, where semantically appropriate
- Labels and corresponding values
Avoid using it simply because you want a custom layout.
Other Useful List-Related HTML Elements
Although <dl> is the main “other list” structure beyond <ul> and <ol>, several other HTML elements can be used around lists to improve their meaning and organization.
<li>
The <li> element represents an item in an ordered or unordered list.
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<menu>
The <menu> element represents a list of commands or items intended for interaction. It has specific semantic use cases and should not simply replace <ul> everywhere.
<menu>
<li><button type="button">Save</button></li>
<li><button type="button">Print</button></li>
</menu>
For ordinary content lists, <ul> is generally the more appropriate choice.
<ol>
An ordered list represents a sequence.
<ol>
<li>Plan</li>
<li>Design</li>
<li>Develop</li>
<li>Test</li>
</ol>
<ul>
An unordered list represents a collection without an inherent order.
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
Lists and Search Engines
Semantic HTML can help search engines understand the structure and relationships within a page.
A description list can clearly communicate relationships such as:
<dl>
<dt>Author</dt>
<dd>John Smith</dd>
<dt>Category</dt>
<dd>Technology</dd>
</dl>
However, using a description list does not automatically improve search rankings. The main benefit is accurate document structure and meaning.
Lists and Mobile-Friendly Design
Description lists can also be made responsive with CSS.
For smaller screens, a two-column layout can become a single-column layout:
dl {
display: grid;
grid-template-columns: 150px 1fr;
gap: 10px;
}
@media (max-width: 600px) {
dl {
display: block;
}
dt {
margin-top: 15px;
}
dd {
margin-left: 0;
}
}
This keeps the information readable on phones and tablets.
Best Practices for HTML Other Lists
Keep these practices in mind:
- Choose list elements according to their semantic purpose.
- Use
<ul>for unordered collections. - Use
<ol>for ordered or sequential items. - Use
<dl>for terms and their descriptions or values. - Use
<dt>for description-list terms. - Use
<dd>for associated descriptions or values. - Keep related terms and descriptions logically grouped.
- Avoid using lists only for visual styling.
- Use CSS for appearance and HTML for meaning.
- Keep list structures simple and understandable.
- Consider accessibility when creating complex list structures.
- Use responsive CSS when list content needs to work on smaller screens.
Frequently Asked Questions
What are other lists in HTML?
“Other lists” generally refers to list structures beyond basic unordered and ordered lists, especially the HTML description list created with <dl>, <dt>, and <dd>.
What is a description list?
A description list is an HTML structure used to represent terms together with their associated descriptions, definitions, or values.
What is <dl> in HTML?
<dl> defines a description list.
What is <dt> in HTML?
<dt> defines a term or name in a description list.
What is <dd> in HTML?
<dd> defines the description, explanation, or value associated with a <dt> element.
Can a <dl> have multiple <dt> elements?
Yes. Multiple terms can be associated with the same description when that relationship is meaningful.
Can one <dt> have multiple <dd> elements?
Yes. A term can have multiple associated descriptions or values.
Is <dl> the same as <ul>?
No. <ul> represents an unordered collection of list items, while <dl> represents relationships between terms and descriptions.
Is <dl> suitable for product specifications?
Yes. Product specifications often have a natural label-and-value relationship, making <dl> a suitable semantic choice.
Can CSS be used with description lists?
Yes. CSS can control spacing, typography, columns, borders, alignment, responsive behavior, and other visual properties.
Conclusion
HTML provides more than just numbered and bullet lists. The description list is an important but sometimes overlooked part of HTML that allows developers to represent meaningful relationships between terms and their descriptions or values.
The three core elements are simple:
<dl>
<dt>Term</dt>
<dd>Description</dd>
</dl>
Use <ul> when you need an unordered collection, <ol> when the order is meaningful, and <dl> when information is organized around terms and their associated descriptions or values.
Choosing the correct list element makes HTML more semantic, accessible, maintainable, and easier for browsers and other technologies to understand. Good HTML is not only about how a page looks—it is also about clearly describing what the content means.