What are Lists in HTML?

What are lists in HTML?

HTML lists are used to group related items in a structured way.

They help organize content so it is easier to read and understand.

Types of HTML lists

1. Unordered list (ul)

Used when order does not matter.

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Mango</li>
</ul>

2. Ordered list (ol)

Used when order matters.

<ol>
  <li>Wake up</li>
  <li>Brush teeth</li>
  <li>Go to school</li>
</ol>

3. Description list (dl)

Used for terms and descriptions.

<dl>
  <dt>HTML</dt>
  <dd>Structure of a webpage</dd>

  <dt>CSS</dt>
  <dd>Styles the webpage</dd>
</dl>

What is the <li> tag?

The <li> tag defines each item inside a list.

It is used inside both <ul> and <ol>.

Where are lists used?

• Navigation menus
• Step-by-step instructions
• Product features
• Shopping lists
• Blog outlines

Example of a real webpage menu

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Nested lists

Lists can be placed inside other lists.

<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
</ul>

Summary

HTML lists are used to organize related items in a structured format.

They improve readability and are widely used in navigation, content structure, and UI design.

Mastering lists is an important step in learning HTML.