HTML Lists Tutorial

HTML lists are used to organize and structure content on web pages.

There are three main types: unordered lists, ordered lists, and definition lists.

Unordered Lists (UL)

Unordered lists are used for items that don't have a particular order or sequence.
They are typically displayed with bullet points.

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

<ul>: The unordered list element.

<li>: The list item element. Each list item is enclosed in

tags.

Item 1
Item 2
Item 3

Ordered Lists (OL)

Ordered lists are used for items that have a specific order or sequence.
They are displayed with numbers, letters, or other sequential markers.

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

<ol>: The ordered list element.

<li>: The list item element, as with unordered lists.

First Item
Second Item
Third Item

Definition Lists (DL)

Definition lists are used for glossaries, dictionaries, or items with term-definition pairs.

<dl>
    <dt>Term 1</dt>
    <dd>Definition 1</dd>
    <dt>Term 2</dt>
    <dd>Definition 2</dd>
</dl>

<dl>: The definition list element.

<dt>: The definition term element.

<dd>: The definition description element.

Term 1: Definition 1
Term 2: Definition 2

Nested Lists

You can nest lists inside other lists to create hierarchical structures.

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

Item 1
- Subitem 1
- Subitem 2
Item 2

List Styles

You can use CSS to style lists, including changing the marker style, indentation, and spacing.

Unordered List Styles

list-style: disc; (default)
list-style: circle;
list-style: square;

Ordered List Styles

list-style: decimal; (default)
list-style: lower-alpha;
list-style: upper-roman;

Definition List Styles

list-style: none; (removes the bullets or numbers in a list)
list-style: inherit; (inherits the list style from the parent element)

<style>
    ul {
      list-style-type: square; /* Change the bullet style */
    }
    ol {
      list-style-type: upper-roman; /* Change the marker style */
    }
    li {
      margin: 10px 0; /* Adjust spacing between list items */
    }
</style>

Previous Next