HTML Lists Tutorial Ordered, Unordered and Description Lists

HTML Lists

In HTML, lists are used to display items in a sequence. They are super handy when you want to organize content like steps, features, groceries or anything in a structured format.
HTML provides three types of lists.

1. Ordered List ( <ol> )
This type shows items in a numbered format (1, 2, 3...). Used when order matters, like steps in a process.

Example:

<ol>
 <li>Boil water</li>
 <li>Add tea leaves</li>
 <li>Stir and serve</li>
</ol>

Output:

2. Unordered List ( <ul> )
Displays items with bullet points. Used when the order does not matter, like a list of fruits.

Example:

<ul>
 <li>Apple</li>
 <li>Banana</li>
 <li>Orange</li>
</ul>

Output:

3. Description List ( <dl> )
Used to defines terms and descriptions, like a glossary.

Example:

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Output:

Example: Simple List

<!DOCTYPE html>
<html>
 <head>
  <title>List Example</title>
 </head>
 <body>
  <h3>Animal List</h3>
  <ul>
    <li>Cat</li>
    <li>Dog</li>
    <li>Cow</li>
  </ul>
 </body>
</html>

Output:

Styled Lists Example
You can customize how your list looks using CSS, like changing the bullet type, color spacing etc.

Example: HTML+CSS

<!DOCTYPE html>
<html>
 <head>
  <title>Styled List</title>
  <style>
      ul.custom-list{
         list-style-type: square;
         color: blue;
         padding-left:20px;
       }
  </style>
 </head>
 <body>
  <h3>Styled Unordered List</h3>
  <ul class="custom-list">
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
  </ul>
 </body>
</html>

Output:

Nested List Example
Nesting lets you create sub-lists inside your main list, great for hierarchical data.

Example:

<!DOCTYPE html>
<html>
 <head>
  <title>Nested List</title>
 </head>
 <body>
  <h3>Nested Unordered List</h3>
  <ul>
   <li>Frontend
    <ul>
     <li>HTML</li>
     <li>CSS</li>
     <li>JavaScript</li>
    </ul>
   </li>
   <li>Backend
     <ul>
      <li>Java</li>
      <li>Python</li>
      <li>JavaScript</li>
     </ul>
    </li>
   </ul>
 </body>
</html>

Output:

Here, you see a main list with two items ('Frontend' and 'Backend') each containing its own sublist.

Tips

Use <li> only inside <ul> or <ol> tags.
Always keep your lists structured for better readability.
You can style lists using CSS to customize bullet types, numbering or spacing.