Table of Contents

Comprehensive Guide to HTML Lists

Introduction

HTML lists are fundamental structural elements used to organize and present related items in a clear, readable format. They provide semantic meaning to content by grouping items that share a common relationship, making information easier to scan, understand, and navigate. Lists are essential for creating well-structured, accessible, and maintainable web content.

HTML provides three main types of lists: unordered lists for items without a specific sequence, ordered lists for items that follow a particular order, and description lists for term-definition pairs. Each list type serves distinct purposes and carries specific semantic meaning that benefits both users and machines, including search engines and assistive technologies.

Understanding how to implement lists correctly—including proper nesting, semantic usage, accessibility considerations, and styling techniques—is crucial for creating effective web content that communicates information clearly and efficiently.

Unordered Lists (`<ul>`)

Unordered lists are used for collections of items where the order doesn't matter or isn't significant.

Basic Syntax

<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>

Common Use Cases

Navigation menus
Feature lists
Shopping cart items
Tag clouds
Related links

Examples

<!-- Navigation menu -->
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
<!-- Feature list -->
<ul>
<li>Responsive design</li>
<li>Fast loading times</li>
<li>Accessibility compliant</li>
<li>SEO optimized</li>
</ul>
<!-- Shopping list -->
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Eggs</li>
<li>Fruits</li>
</ul>

Ordered Lists (`<ol>`)

Ordered lists are used for items that follow a specific sequence or have a meaningful order.

Basic Syntax

<!-- Default numbering (1, 2, 3...) -->
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>

Numbering Types

The type attribute controls the numbering style:

<!-- Numeric (default) -->
<ol type="1">
<li>Item 1</li>
<li>Item 2</li>
</ol>
<!-- Uppercase letters -->
<ol type="A">
<li>Item A</li>
<li>Item B</li>
</ol>
<!-- Lowercase letters -->
<ol type="a">
<li>Item a</li>
<li>Item b</li>
</ol>
<!-- Uppercase Roman numerals -->
<ol type="I">
<li>Item I</li>
<li>Item II</li>
</ol>
<!-- Lowercase Roman numerals -->
<ol type="i">
<li>Item i</li>
<li>Item ii</li>
</ol>

Starting Number

The start attribute specifies the starting number:

<!-- Start from 5 -->
<ol start="5">
<li>Fifth item</li>
<li>Sixth item</li>
<li>Seventh item</li>
</ol>
<!-- Start from 0 -->
<ol start="0">
<li>Zero-based item</li>
<li>First item</li>
</ol>

Reversed Order

The reversed attribute creates a countdown:

<!-- Countdown from 3 -->
<ol reversed>
<li>Third item</li>
<li>Second item</li>
<li>First item</li>
</ol>
<!-- Countdown from 10 -->
<ol start="10" reversed>
<li>Tenth item</li>
<li>Ninth item</li>
<li>Eighth item</li>
</ol>

Common Use Cases

Step-by-step instructions
Rankings or top lists
Legal or regulatory sections
Educational course outlines
Timeline events

Examples

<!-- Recipe instructions -->
<ol>
<li>Preheat oven to 350°F (175°C)</li>
<li>Mix dry ingredients in a bowl</li>
<li>Add wet ingredients and stir until combined</li>
<li>Pour batter into greased pan</li>
<li>Bake for 30-35 minutes</li>
</ol>
<!-- Top 5 programming languages -->
<ol start="1">
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>C#</li>
<li>PHP</li>
</ol>
<!-- Legal sections -->
<ol type="I">
<li>General Provisions</li>
<li>Definitions</li>
<li>Scope of Application</li>
<li>Rights and Obligations</li>
</ol>

Description Lists (`<dl>`)

Description lists (formerly definition lists) are used for groups of terms and their corresponding descriptions.

Basic Syntax

<dl>
<dt>Term 1</dt>
<dd>Description of Term 1</dd>
<dt>Term 2</dt>
<dd>Description of Term 2</dd>
</dl>

Multiple Terms or Descriptions

A single term can have multiple descriptions, and multiple terms can share the same description:

<!-- One term, multiple descriptions -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dd>The standard markup language for web pages</dd>
</dl>
<!-- Multiple terms, one description -->
<dl>
<dt>CSS</dt>
<dt>Cascading Style Sheets</dt>
<dd>A style sheet language used for describing the presentation of a document</dd>
</dl>
<!-- Multiple terms, multiple descriptions -->
<dl>
<dt>JavaScript</dt>
<dt>JS</dt>
<dd>A programming language that enables interactive web pages</dd>
<dd>One of the core technologies of the World Wide Web</dd>
</dl>

Common Use Cases

Glossaries and dictionaries
FAQ sections
Product specifications
Contact information
Metadata displays

Examples

<!-- FAQ section -->
<dl>
<dt>What is your return policy?</dt>
<dd>We offer a 30-day money-back guarantee on all products.</dd>
<dt>How long does shipping take?</dt>
<dd>Standard shipping takes 3-5 business days.</dd>
<dt>Do you offer international shipping?</dt>
<dd>Yes, we ship to over 50 countries worldwide.</dd>
</dl>
<!-- Product specifications -->
<dl>
<dt>Processor</dt>
<dd>Intel Core i7-11800H</dd>
<dt>Memory</dt>
<dd>16GB DDR4 RAM</dd>
<dt>Storage</dt>
<dd>512GB NVMe SSD</dd>
<dt>Display</dt>
<dd>15.6" Full HD (1920x1080)</dd>
</dl>
<!-- Contact information -->
<dl>
<dt>Email</dt>
<dd><a href="mailto:[email protected]">[email protected]</a></dd>
<dt>Phone</dt>
<dd><a href="tel:+1234567890">+1 (234) 567-890</a></dd>
<dt>Address</dt>
<dd>123 Main Street, City, State 12345</dd>
</dl>

List Nesting

Lists can be nested within each other to create hierarchical structures.

Nested Unordered Lists

<ul>
<li>Fruits
<ul>
<li>Apples
<ul>
<li>Red Delicious</li>
<li>Granny Smith</li>
<li>Honeycrisp</li>
</ul>
</li>
<li>Bananas</li>
<li>Oranges</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Broccoli</li>
<li>Spinach</li>
</ul>
</li>
</ul>

Nested Ordered Lists

<ol>
<li>Web Development
<ol type="A">
<li>Frontend Development
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</li>
<li>Backend Development
<ol type="i">
<li>Node.js</li>
<li>Python</li>
<li>PHP</li>
</ol>
</li>
</ol>
</li>
<li>Mobile Development
<ol type="A">
<li>iOS Development</li>
<li>Android Development</li>
</ol>
</li>
</ol>

Mixed List Nesting

<ul>
<li>Programming Languages
<ol>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
</ol>
</li>
<li>Development Tools
<dl>
<dt>Code Editors</dt>
<dd>Visual Studio Code, Sublime Text, Atom</dd>
<dt>Version Control</dt>
<dd>Git, SVN, Mercurial</dd>
</dl>
</li>
</ul>

Accessibility Considerations

Screen Reader Compatibility

Lists are naturally accessible to screen readers, which announce the list type and count:

<!-- Screen readers will announce: "List of 3 items" -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Proper Semantic Usage

Use the appropriate list type for the content:

<!-- Good - ordered list for steps -->
<ol>
<li>Download the software</li>
<li>Install the application</li>
<li>Launch the program</li>
</ol>
<!-- Good - unordered list for features -->
<ul>
<li>User-friendly interface</li>
<li>Fast performance</li>
<li>Regular updates</li>
</ul>

Avoid Non-Semantic Lists

Don't use lists for purely visual formatting:

<!-- Avoid - not actually a list -->
<ul>
<li style="display: inline;">Name:</li>
<li style="display: inline;">John Doe</li>
</ul>
<!-- Better - use appropriate elements -->
<p><strong>Name:</strong> John Doe</p>

Styling Lists with CSS

Default Browser Styling

Browsers apply default styles to lists:

/* Typical unordered list styles */
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
/* Typical ordered list styles */
ol {
display: block;
list-style-type: decimal;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
/* List item styles */
li {
display: list-item;
text-align: -webkit-match-parent;
}

Custom List Styling

/* Remove default bullets/numbers */
ul, ol {
list-style: none;
padding-left: 0;
}
/* Custom bullets */
ul.custom-bullets {
list-style: none;
padding-left: 0;
}
ul.custom-bullets li::before {
content: "• ";
color: #3498db;
font-weight: bold;
}
/* Custom numbering */
ol.custom-numbering {
list-style: none;
padding-left: 0;
counter-reset: my-counter;
}
ol.custom-numbering li {
counter-increment: my-counter;
}
ol.custom-numbering li::before {
content: counter(my-counter) ". ";
color: #e74c3c;
font-weight: bold;
}
/* Inline lists */
.inline-list {
list-style: none;
padding: 0;
margin: 0;
}
.inline-list li {
display: inline-block;
margin-right: 15px;
}
/* Horizontal navigation */
.nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.nav-list li {
margin-right: 20px;
}
.nav-list li:last-child {
margin-right: 0;
}

Advanced List Styling

/* Nested list indentation */
ul ul, ol ol, ul ol, ol ul {
margin-left: 20px;
}
/* Different markers for different levels */
ul.level-1 { list-style-type: disc; }
ul.level-2 { list-style-type: circle; }
ul.level-3 { list-style-type: square; }
/* Custom images as bullets */
ul.image-bullets {
list-style: none;
padding-left: 0;
}
ul.image-bullets li {
background-image: url('bullet.png');
background-repeat: no-repeat;
background-position: 0 0.5em;
padding-left: 20px;
background-size: 10px 10px;
}
/* Description list styling */
dl.styled-dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.5rem;
}
dl.styled-dl dt {
font-weight: bold;
}
dl.styled-dl dd {
margin: 0;
}

Common List Mistakes to Avoid

1. Using Wrong List Type

<!-- Wrong - unordered list for steps -->
<ul>
<li>First, preheat the oven</li>
<li>Next, mix the ingredients</li>
<li>Finally, bake for 30 minutes</li>
</ul>
<!-- Right - ordered list for steps -->
<ol>
<li>Preheat the oven</li>
<li>Mix the ingredients</li>
<li>Bake for 30 minutes</li>
</ol>

2. Improper Nesting

<!-- Wrong - missing parent list item -->
<ul>
<li>Main item</li>
<ul>
<li>Nested item</li>
</ul>
</ul>
<!-- Right - nested list inside list item -->
<ul>
<li>Main item
<ul>
<li>Nested item</li>
</ul>
</li>
</ul>

3. Using Divs Instead of Semantic Lists

<!-- Wrong - non-semantic structure -->
<div class="menu">
<div>Home</div>
<div>About</div>
<div>Contact</div>
</div>
<!-- Right - semantic list structure -->
<ul class="menu">
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>

4. Empty List Items

<!-- Avoid empty items -->
<ul>
<li>Item 1</li>
<li></li>
<li>Item 3</li>
</ul>
<!-- Only include meaningful items -->
<ul>
<li>Item 1</li>
<li>Item 3</li>
</ul>

Advanced List Techniques

Dynamic Lists with JavaScript

<ul id="dynamic-list">
<!-- Items will be added dynamically -->
</ul>
<button onclick="addItem()">Add Item</button>
<script>
let itemCount = 0;
function addItem() {
itemCount++;
const list = document.getElementById('dynamic-list');
const li = document.createElement('li');
li.textContent = `Item ${itemCount}`;
list.appendChild(li);
}
</script>

Interactive Lists

<ul class="interactive-list">
<li tabindex="0" onclick="selectItem(this)">Option 1</li>
<li tabindex="0" onclick="selectItem(this)">Option 2</li>
<li tabindex="0" onclick="selectItem(this)">Option 3</li>
</ul>
<style>
.interactive-list li {
padding: 10px;
cursor: pointer;
border: 1px solid #ddd;
margin: 5px 0;
border-radius: 4px;
}
.interactive-list li:hover,
.interactive-list li:focus {
background-color: #f0f8ff;
outline: 2px solid #3498db;
}
.interactive-list li.selected {
background-color: #3498db;
color: white;
}
</style>
<script>
function selectItem(item) {
// Remove selected class from all items
document.querySelectorAll('.interactive-list li').forEach(li => {
li.classList.remove('selected');
});
// Add selected class to clicked item
item.classList.add('selected');
}
</script>

Responsive Lists

/* Mobile-friendly navigation */
@media (max-width: 768px) {
.nav-list {
flex-direction: column;
}
.nav-list li {
margin: 5px 0;
}
}
/* Responsive description lists */
@media (max-width: 600px) {
dl.responsive-dl {
display: block;
}
dl.responsive-dl dt,
dl.responsive-dl dd {
display: block;
margin: 0;
}
dl.responsive-dl dd {
margin-left: 10px;
margin-bottom: 10px;
}
}

Complete Document Example with Various List Types

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete HTML Lists Example</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
color: #333;
}
h1, h2, h3 {
color: #2c3e50;
margin-top: 2rem;
}
h1 {
border-bottom: 3px solid #3498db;
padding-bottom: 0.5rem;
}
.list-section {
margin: 2rem 0;
padding: 20px;
background-color: #f8f9fa;
border-radius: 8px;
}
/* Navigation styling */
.nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 20px;
}
.nav-list a {
text-decoration: none;
color: #3498db;
padding: 8px 16px;
border: 1px solid #3498db;
border-radius: 4px;
transition: all 0.3s;
}
.nav-list a:hover {
background-color: #3498db;
color: white;
}
/* Feature list styling */
.feature-list {
list-style: none;
padding-left: 0;
}
.feature-list li {
padding: 10px 0 10px 30px;
position: relative;
border-bottom: 1px solid #eee;
}
.feature-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 10px;
color: #2ecc71;
font-weight: bold;
font-size: 18px;
}
/* Recipe styling */
.recipe-steps {
counter-reset: step-counter;
}
.recipe-steps li {
counter-increment: step-counter;
margin-bottom: 15px;
padding-left: 40px;
position: relative;
}
.recipe-steps li::before {
content: counter(step-counter);
position: absolute;
left: 0;
top: 0;
width: 25px;
height: 25px;
background-color: #e74c3c;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
/* FAQ styling */
.faq-list dt {
font-weight: bold;
font-size: 1.1em;
color: #2c3e50;
margin: 15px 0 5px 0;
cursor: pointer;
}
.faq-list dd {
margin: 0 0 15px 0;
padding-left: 10px;
border-left: 3px solid #3498db;
color: #555;
}
/* Nested list styling */
.nested-list ul {
margin-left: 20px;
padding-left: 20px;
border-left: 1px solid #ddd;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.nav-list {
flex-direction: column;
gap: 10px;
}
.nav-list a {
text-align: center;
}
}
</style>
</head>
<body>
<header>
<h1>Comprehensive HTML Lists Guide</h1>
<nav aria-label="Main navigation">
<ul class="nav-list">
<li><a href="#unordered">Unordered Lists</a></li>
<li><a href="#ordered">Ordered Lists</a></li>
<li><a href="#description">Description Lists</a></li>
<li><a href="#nesting">List Nesting</a></li>
</ul>
</nav>
</header>
<main>
<section id="unordered" class="list-section">
<h2>Unordered Lists (<code>&lt;ul&gt;</code>)</h2>
<p>Used for items where order doesn't matter:</p>
<h3>Navigation Menu</h3>
<ul class="nav-list">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<h3>Product Features</h3>
<ul class="feature-list">
<li>Responsive design that works on all devices</li>
<li>Fast loading times for better user experience</li>
<li>Accessibility compliant with WCAG 2.1 standards</li>
<li>SEO optimized for better search engine rankings</li>
<li>Regular security updates and maintenance</li>
</ul>
</section>
<section id="ordered" class="list-section">
<h2>Ordered Lists (<code>&lt;ol&gt;</code>)</h2>
<p>Used for items that follow a specific sequence:</p>
<h3>Recipe Instructions</h3>
<ol class="recipe-steps">
<li>Preheat oven to 350°F (175°C)</li>
<li>Mix dry ingredients (flour, sugar, baking powder) in a large bowl</li>
<li>Add wet ingredients (milk, eggs, oil) and stir until just combined</li>
<li>Fold in chocolate chips or other mix-ins</li>
<li>Pour batter into greased baking pan</li>
<li>Bake for 30-35 minutes or until toothpick comes out clean</li>
<li>Cool completely before serving</li>
</ol>
<h3>Learning Path</h3>
<ol type="I">
<li>HTML Fundamentals
<ol type="A">
<li>Basic Structure</li>
<li>Text Elements</li>
<li>Lists and Links</li>
</ol>
</li>
<li>CSS Styling
<ol type="A">
<li>Selectors and Properties</li>
<li>Layout Techniques</li>
<li>Responsive Design</li>
</ol>
</li>
<li>JavaScript Programming
<ol type="A">
<li>Variables and Functions</li>
<li>DOM Manipulation</li>
<li>Async Programming</li>
</ol>
</li>
</ol>
</section>
<section id="description" class="list-section">
<h2>Description Lists (<code>&lt;dl&gt;</code>)</h2>
<p>Used for term-definition pairs or metadata:</p>
<h3>Frequently Asked Questions</h3>
<dl class="faq-list">
<dt>What payment methods do you accept?</dt>
<dd>We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers.</dd>
<dt>How long does delivery take?</dt>
<dd>Standard delivery takes 3-5 business days. Express shipping is available for 1-2 business day delivery.</dd>
<dt>What is your return policy?</dt>
<dd>We offer a 30-day money-back guarantee. Items must be in original condition with all packaging.</dd>
<dt>Do you provide technical support?</dt>
<dd>Yes, our technical support team is available 24/7 via email, phone, and live chat.</dd>
</dl>
<h3>Technical Specifications</h3>
<dl>
<dt>Operating System</dt>
<dd>Windows 10/11, macOS 12+, Linux (Ubuntu 20.04+)</dd>
<dt>Processor</dt>
<dd>Intel Core i5 or AMD Ryzen 5 (or equivalent)</dd>
<dt>Memory</dt>
<dd>8GB RAM minimum, 16GB recommended</dd>
<dt>Storage</dt>
<dd>500MB available space</dd>
<dt>Internet Connection</dt>
<dd>Broadband connection required for updates</dd>
</dl>
</section>
<section id="nesting" class="list-section">
<h2>List Nesting</h2>
<p>Creating hierarchical structures with nested lists:</p>
<h3>Website Structure</h3>
<ul class="nested-list">
<li>Home</li>
<li>About
<ul>
<li>Company History</li>
<li>Team
<ul>
<li>Management</li>
<li>Development</li>
<li>Design</li>
<li>Marketing</li>
</ul>
</li>
<li>Careers</li>
</ul>
</li>
<li>Services
<ul>
<li>Web Development
<ul>
<li>Frontend Development</li>
<li>Backend Development</li>
<li>Full Stack Development</li>
</ul>
</li>
<li>Mobile Development</li>
<li>UI/UX Design</li>
<li>Digital Marketing</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</section>
</main>
<footer>
<h2>List Best Practices Summary</h2>
<ul>
<li>Use <code>&lt;ul&gt;</code> for unordered items</li>
<li>Use <code>&lt;ol&gt;</code> for ordered/sequential items</li>
<li>Use <code>&lt;dl&gt;</code> for term-definition pairs</li>
<li>Nest lists properly within <code>&lt;li&gt;</code> elements</li>
<li>Maintain semantic meaning over visual presentation</li>
<li>Ensure accessibility with proper list structure</li>
<li>Style lists with CSS rather than misusing HTML elements</li>
</ul>
</footer>
</body>
</html>

Conclusion

HTML lists are essential semantic elements that provide structure and meaning to related content. Each list type—unordered, ordered, and description—serves specific purposes and carries distinct semantic meaning that benefits both users and machines.

The key principles for effective list usage include:

Choosing the appropriate list type based on content semantics
Maintaining proper nesting structure within list items
Using lists for their semantic purpose rather than visual formatting
Ensuring accessibility through proper HTML structure
Styling lists with CSS for visual presentation while preserving semantic integrity
Avoiding common mistakes like improper nesting or using wrong list types

By treating lists as fundamental semantic building blocks rather than mere visual containers, developers create web content that is more accessible, maintainable, and meaningful. This semantic approach aligns with modern web standards and ensures that information is presented in a way that serves all users effectively while providing clear structure for search engines and assistive technologies.

Mastering HTML lists represents a foundational skill in web development that demonstrates attention to semantic structure, accessibility, and content organization. Proper list implementation forms the backbone of well-structured, readable, and accessible web content that effectively communicates relationships between related items.

HTML Basics – Elements, Attributes, Headings, Paragraphs, Links, Images, Tables & Forms (Related to HTML)

HTML Elements:
HTML elements are the basic building blocks of a webpage. They define how content like text, images, and sections are structured and displayed in the browser using tags.

HTML Attributes:
HTML attributes provide extra information about elements and control their behavior or properties. They are written inside the opening tag in name-value form.

HTML Headings:
HTML headings are used to define titles and organize content in a hierarchy from <h1> to <h6>, helping structure the page clearly.

HTML Paragraphs:
HTML paragraphs are used to display blocks of text using the <p> tag, helping to separate and organize written content.

HTML Links:
HTML links connect webpages using the <a> tag and the href attribute, allowing navigation between pages or websites.

HTML Images:
HTML images are added using the <img> tag to display pictures on a webpage, with src for the image source and alt for alternative text.

HTML Tables:
HTML tables organize data into rows and columns using <table>, <tr>, <th>, and <td> tags for structured data display.

HTML Forms:
HTML forms are used to collect user input like text and passwords using elements such as <form>, <input>, and <button>.

Comprehensive Guide to HTML Lists

Introduction

Unordered Lists (<ul>)

Basic Syntax

Common Use Cases

Examples

Ordered Lists (<ol>)

Basic Syntax

Numbering Types

Starting Number

Reversed Order

Common Use Cases

Examples

Description Lists (<dl>)

Basic Syntax

Multiple Terms or Descriptions

Common Use Cases

Examples

List Nesting

Nested Unordered Lists

Nested Ordered Lists

Mixed List Nesting

Accessibility Considerations

Screen Reader Compatibility

Proper Semantic Usage

Avoid Non-Semantic Lists

Styling Lists with CSS

Default Browser Styling

Custom List Styling

Advanced List Styling

Common List Mistakes to Avoid

1. Using Wrong List Type

2. Improper Nesting

3. Using Divs Instead of Semantic Lists

4. Empty List Items

Advanced List Techniques

Dynamic Lists with JavaScript

Interactive Lists

Responsive Lists

Complete Document Example with Various List Types

Conclusion

Leave a Reply Cancel reply

Macro Nepal Helper

Unordered Lists (`<ul>`)

Ordered Lists (`<ol>`)

Description Lists (`<dl>`)