HTML Lists.

Lists are used to group a set of related items. HTML supports unordered, ordered, and description lists.

The Essentials

<ul> defines an unordered (bulleted) list.

<ol> defines an ordered (numbered) list.

<li> defines a list item within both <ul> and <ol>.

<dl> defines a description list.

<dt> defines a term in a description list.

<dd> describes the term in a description list.

Professional Insights

The 'type' Attribute

In ordered lists, you can change the numbering style (e.g., Roman numerals or Letters) using the 'type' attribute (type='I', type='A', etc.).

Nested Lists

You can nest a list inside another list item. This is commonly used for navigation menus (nav) or structured documentation outlines.

The Power of Lists in Navigation

Almost all website navigation bars are actually <ul> lists styled with CSS to remove bullets and align items horizontally.

Description Lists for Definitions

Use <dl> for things like dictionary definitions, metadata pairs (e.g., 'Author: John Doe'), or FAQs where you have a clear term and a following description.

Critical Pitfalls

Putting content inside <ul> or <ol> that is NOT wrapped in an <li> tag. <li> is the only valid child.

Using a list when a simple paragraph would suffice, or vice versa.

Forgetting to close the <li> tags, which can cause nesting bugs in some browsers.

Manually typing numbers (1., 2.) inside a <ul> instead of just using an <ol>.

Interactive Lab

Sprint Tasks

Create an unordered list with 3 items: 'Coffee', 'Tea', 'Milk'

Create an ordered list with 2 items: 'First', 'Second'

Loading editor...

Production Preview