HTML Lists

HTML provides several types of lists to organize content:

• Ordered List (<ol>): A numbered list.
• Unordered List (<ul>): A bulleted list.
• Description List (<dl>): A list of terms and their descriptions.
• Nested Lists: Lists inside other lists.

HTML Ordered List

An ordered list is used when the order of the items matters. Each list item is marked with a number.

<ol>
  <li>Step 1: Install HTML editor</li>
  <li>Step 2: Write your code</li>
  <li>Step 3: Save and run</li>
</ol>

The <ol> tag wraps around the list, and each item is inside an <li> tag.

HTML Unordered List

An unordered list is used when the order of items does not matter. Items are marked with bullets by default.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

The default bullet style can be customized with CSS (e.g., square, circle, etc.).

HTML Description List

A description list is used to list terms and their descriptions. It uses three tags:

• <dl> – Description list container
• <dt> – Defines the term
• <dd> – Defines the description

<dl>
  <dt>HTML</dt>
  <dd>The standard language for creating web pages.</dd>

  <dt>CSS</dt>
  <dd>Stylesheet language used to describe the presentation of HTML.</dd>
</dl>

This format is great for glossaries, FAQs, or definitions.

Nested Lists

Nested lists are lists within a list item. They can be used in both ordered and unordered lists.

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>Backend
    <ul>
      <li>Node.js</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

Indentation is used only for readability. You can nest ordered and unordered lists as deeply as needed.

Conclusion

Lists help structure and present data clearly in HTML. Whether you're showing steps in a process, bullet points, or term definitions, there's a list type suitable for your needs.

In the next chapter, we will explore HTML Tables to display structured data.

If you have any questions, feel free to ask. Thank you for reading!