Definition list
dl
- Represents a description list. The element encloses a list of groups of terms (specified
using the
dt
element) and descriptions (provided by dd
elements). Common uses for this element are to implement a glossary or to display
metadata (a list of key-value pairs).
<dl>
<dt>Dictionary</dt>
<dd>
a reference book on a particular subject,
the items of which are typically arranged
in alphabetical order.
</dd>
</dl>
- Dictionary
-
a reference book on a particular subject,
the items of which are typically arranged
in alphabetical order.
Definition list is responsive by default. dl
comes with two css variables and their default values: --dl-width: 9rem;
--dd-min-width: 70%
As long as --dl-width
is smaller that 100% minus --dd-min-width
, both dt
and dl
stay in one line.. Otherwise they are positioned one below the other.
Ordered list
ol
- Represents an ordered list of items — typically rendered as a numbered list.
<ol>
<li>Introduction to HTML</li>
<li>Understanding CSS Styling
<ol>
<li>JavaScript Fundamentals</li>
</ol>
</li>
</ol>
- Introduction to HTML
- Understanding CSS Styling
- JavaScript Fundamentals
Unordered list
ul
- Represents an unordered list of items, typically rendered as a bulleted list.
<ul>
<li>Responsive Web Design Techniques</li>
<li>Building Web Applications with Node.js</li>
<li>Database Management with SQL</li>
</ul>
- Responsive Web Design Techniques
- Building Web Applications with Node.js
- Database Management with SQL
Menu list
menu
- Is described in the HTML specification as a semantic alternative to
ul
, but treated by browsers (and exposed through the accessibility tree) as no
different than ul
<menu>
<li>Deploying Websites to Hosting Platforms</li>
<li>Web Security Best Practices</li>
<li>Introduction to Serverless Architecture</li>
</menu>
list-style-type
for menu
element is set to none as you can see.