bugl
bugl
HomeLearnPatternsPathsSearch
HomeLearnPatternsPathsSearch

Loading lesson path

Learn/HTML/HTML Foundations
HTML•HTML Foundations

HTML Lists

Flash cards

Review the key moves

1/4
Core idea

What is the main idea behind HTML Lists?

Lesson checks

Practice each idea before moving on

Short Mimo-style checks built from this lesson's code, terms, and sequence.

1Quick choice

Which statement best captures the main point of this lesson?

2Fill blank

Complete the missing token from the example code.

<li>___</li>
3Order

Put the learning moves in the order that makes the concept easiest to apply.

HTML lists allow web developers to group a set of related items in lists.
HTML Description Lists
Unordered HTML List

HTML lists allow web developers to group a set of related items in lists.

An unordered HTML list

  • Item
  • Item
  • Item
  • Item

An ordered HTML list

  • First item
  • Second item
  • Third item
  • Fourth item

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example

Formatted code
<ul>

<li>Coffee</li>
  <li>Tea</li>

<li>Milk</li>

</ul>

Live preview

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example

Formatted code
<ol>

<li>Coffee</li>
  <li>Tea</li>

<li>Milk</li>

</ol>

Live preview

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

Example

Formatted code
<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

Live preview

HTML List Tags

TagDescription
<ul>Defines an unordered list
<ol>Defines an ordered list
<li>Defines a list item
<dl>Defines a description list
<dt>Defines a term in a description list
<dd>Describes the term in a description list

For a complete list of all available HTML tags, visit our HTML Tag Reference .

Previous

HTML Table Colgroup

Next

HTML Unordered Lists