📖 Creating HTML Lists

Why Use Lists in HTML?

Lists help organize information clearly. Whether you're presenting steps in a process, listing ingredients, or defining terms, HTML provides several types of list elements to format your content effectively.

HTML List Types

HTML supports three main types of lists, each with a different structure and purpose. Use the type that best fits your content:

Unordered List: <ul>

Creates a bulleted list. Use when the order of items doesn't matter, such as:

  • Navigation menus
  • Grouped content with equal importance
  • Shopping lists or feature highlights
<ul>
Defines the start of an unordered list.
<li>
Defines a list item inside <ul> or <ol>.

Ordered List: <ol>

Creates a numbered or lettered list. Use when order or sequence matters, such as:

  • Step-by-step instructions
  • Rankings or top-ten lists
  • Chronological timelines
<ol>
Defines the start of an ordered list.
<li>
Same as above — defines an item within the list.

Description List: <dl>

Used for defining terms or pairs of content, such as a glossary or FAQ.

<dl>
Starts the description list.
<dt>
Defines a term (like a glossary heading).
<dd>
Defines the description for that term.

Example:

HTML
The standard language for structuring web pages.
CSS
The language used to style HTML content.

Rules for Using Lists

  • Every <ul> or <ol> must contain one or more <li> elements.
  • <li> elements can contain text, images, links, or even other nested lists.
  • You can change the starting value of an ordered list using the start attribute (e.g., <ol start="5">).
  • Every <dl> must contain <dt> and <dd> elements.
  • Nested lists are automatically indented under their parent list item.

Sample Lists

The example below shows all three list types in use:

Customizing List Style

By default, unordered lists use round bullets and ordered lists use numbers. You can change the marker style using the list-style-type CSS property.

ul {
  list-style-type: square;
}

ol {
  list-style-type: upper-roman;
}

Try different list style options like circle, disc, decimal, or lower-alpha depending on your design.

Additional Resources

Last updated: October 1, 2025 at 5:02 PM