HTML List


In HTML, lists are used to group a set of related items. There are three main types of lists:

  1. Unordered Lists: Items are presented with bullets or markers.
  2. Ordered Lists: Items are presented with numbers or letters.
  3. Description Lists: Items are presented as terms with corresponding descriptions.


  1. Unordered List

An unordered list is used when the order of items is not important. It uses bullet points by default.

HTML Syntax:

<ul>
   <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Example:
<!DOCTYPE html>
<html>
<head>
    <title>Unordered List Example</title>
</head>
<body>
<h2>Unordered List</h2>
<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>
</body>
</html>

Output

Unordered List
  • Apple
  • Banana
  • Cherry

 

  1. Ordered List

An ordered list is used when the order of items is important. It uses numbers or letters.

HTML Syntax:

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

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List Example</title>
</head>
<body>
<h2>Ordered List</h2>
<ol>
    <li>Step 1: Preheat the oven</li>
    <li>Step 2: Mix ingredients</li>
    <li>Step 3: Bake for 30 minutes</li>
</ol>
</body>
</html>

Output

Ordered List
  1. Step 1: Preheat the oven
  2. Step 2: Mix ingredients
  3. Step 3: Bake for 30 minutes

 

  1. Description List

A description list is used for terms and their descriptions. Each term is defined by a <dt> element, and each description is defined by a <dd> element.

HTML Syntax:

<dl>
    <dt>Term 1</dt>
    <dd>Description for term 1.</dd>
    <dt>Term 2</dt>
    <dd>Description for term 2.</dd>
</dl>

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Description List Example</title>
</head>
<body>
<h2>Description List</h2>
<dl>
    <dt>HTML</dt>
    <dd>A markup language for creating web pages.</dd>
    <dt>CSS</dt>
    <dd>A stylesheet language used to describe the presentation of a document written in HTML.</dd>
    <dt>JavaScript</dt>
    <dd>A programming language used to create interactive effects within web browsers.</dd>
</dl>
</body>
</html>

Output

Description List
HTML
A markup language for creating web pages.
CSS
A stylesheet language used to describe the presentation of a document written in HTML.
JavaScript
A programming language used to create interactive effects within web browsers.

 


Nesting Lists

Lists can be nested within other lists to create hierarchical structures.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Nesting Lists Example</title>
</head>
<body>
<h2>Nested Lists</h2>
<ul>
    <li>Fruits
        <ul>
            <li>Citrus
                <ul>
                    <li>Orange</li>
                    <li>Lemon</li>
                </ul>
            </li>
            <li>Berries
                <ul>
                    <li>Strawberry</li>
                    <li>Blueberry</li>
               </ul>
            </li>
        </ul>
    </li>
    <li>Vegetables
        <ul>
            <li>Leafy Greens
                <ul>
                    <li>Spinach</li>
                    <li>Kale</li>
                </ul>
            </li>
            <li>Root Vegetables
                <ul>
                    <li>Carrot</li>
                    <li>Beetroot</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</body>
</html>

Output

Nested Lists
  • Fruits
    • Citrus
      • Orange
      • Lemon
    • Berries
      • Strawberry
      • Blueberry
  • Vegetables
    • Leafy Greens
      • Spinach
      • Kale
    • Root Vegetables
      • Carrot
      • Beetroot

 

Scroll to Top