Demon Tech Roadmap

HTML

HTML Lists

HTML lists group related items together.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

HTML organizes related text into lists. Unordered lists use the `

` tag.

Syntax

1<!-- lists syntax -->
2<ul>
3  <li>Apples</li>
4  <li>Bananas</li>
5</ul>
6<ol start="3" reversed type="A">
7  <li>Third item</li>
8</ol>

Example

1<!-- this creates lists -->
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Lists</title>
8  </head>
9  <body>
10    <ul>
11      <li>One</li>
12      <li>Two</li>
13    </ul>
14  </body>
15</html>

Try it Yourself

Hands-on Practice

Modify the code below to see how it affects the output. This is the best way to learn!

Interactive Editor

1234567891011121314151617181920

Live Preview

Key Points

Unordered lists show bullet points.
Ordered lists display numbers or letters.
The `
` tag wraps every list item.
Description lists group terms and details.

Up Next

Continue your journey with the next topic.

Go to HTML Block & Inline ❯