Lists in HTML

Why use lists?

Lists allow you to organize and structure information on a web page. They are used everywhere: navigation menus, enumerations, step-by-step instructions, timelines...

Without lists, content would be disorganized and difficult to read. With lists, you can create clear and elegant presentations!

Types of lists in HTML

Unordered lists (`<ul>`)

For elements without a particular order.

First element
Second element
Third element

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

Ordered lists (`<ol>`)

For elements that follow a specific order.

First step
Second step
Third step

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

Styling lists with CSS

Remove default bullets

By default, lists display bullets (•) or numbers. You can remove them with CSS :

index.html

<!DOCTYPE html>
<html>
<head>
  <title>List without bullets</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul class="no-bullets">
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
  </ul>
</body>
</html>

The list-style-type: none; property removes bullets, and padding: 0; removes the left offset.

Create an elegant timeline

Here's how to transform a simple list into a modern timeline :

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Timeline</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul class="timeline">
    <li>
      <strong>2010</strong>
      Project launch
    </li>
    <li>
      <strong>2015</strong>
      First public version
    </li>
    <li>
      <strong>2024</strong>
      Current version
    </li>
  </ul>
</body>
</html>

2010 Project launch
2015 First public version
2024 Current version

<ul>
  <li><strong>2010</strong> Project launch</li>
  <li><strong>2015</strong> First public version</li>
  <li><strong>2024</strong> Current version</li>
</ul>

2010 Project launch
2015 First public version
2024 Current version

.timeline li {
  background-color: #f0f0f0;
  padding: 15px;
  border-left: 4px solid #3498db;
  border-radius: 5px;
}

Useful CSS properties for lists

Property	Description	Example
`list-style-type`	Changes the bullet type	`none`, `circle`, `square`
`padding`	Inner spacing	`padding: 10px;`
`margin`	Outer spacing	`margin-bottom: 15px;`
`background-color`	Background color	`background-color: #f0f0f0;`
`border-left`	Left border	`border-left: 3px solid blue;`
`border-radius`	Rounded corners	`border-radius: 5px;`

Create a navigation menu

Lists are perfect for creating menus :

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Navigation menu</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</body>
</html>

Tips for getting started with lists

Always remove bullets when styling your lists: list-style-type: none;
Use padding and margin to space your elements harmoniously
Add colored borders (border-left) to create a modern effect
Experiment with border-radius to round the corners of your elements
Consider the :hover effect to make your lists interactive

Lists are powerful tools: master them and your web pages will be clearer and more professional !