Skip to content

Lists

Lists can be used to group similar / related items. There are 3 types of lists: unordered, ordered and description. Later on during the course we can also learn how to sort the items on the list using Javascript. Read more about lists from here.

Setting Up

To setup for this lesson, create file lists.html and open it. Write the basic HTML starting template there. Add heading Lists there.

Unordered List

Unordered lists can be used to create lists which items start with a bulletin point. Unordered lists are written inside <ul> element. Each list item is written inside <li> element. Read more about unordered lists from here.

Example: Unordered List

Code:

HTML
<ul>
    <li>Chrome</li>
    <li>Firefox</li>
    <li>Edge</li>
</ul>

Output:

  • Chrome
  • Firefox
  • Edge

Ordered List

Ordered lists can be used to create lists which items are automatically numbered. Unordered lists are written inside <ol> element. Each list item is written inside <li> element.

You can also give ordered lists helpful attributes like start for customizing in which number does the list item start from and type for customizing the numbering style (like 1, A, I...). Read more about ordered lists from here.

Example: Ordered List

Code:

HTML
<ol>
    <li>Chrome</li>
    <li>Firefox</li>
    <li>Edge</li>
</ol>

Output:

  1. Chrome
  2. Firefox
  3. Edge

Description List

Description lists can also be created. Description lists are lists with terms and definitions for them. Description lists are written inside the <dl> element. Each description name is written inside the <dt> element and each description is written inside the <dd> element. You can read more about the description list from here.

Example: Description List

Code:

HTML
<dl>
    <dt>Chrome</dt>
    <dd>Best browser</dd>
    <dt>Firefox</dt>
    <dd>Pretty good browser</dd>
    <dt>Edge</dt>
    <dd>Not so good browser</dd>
    <dt>Internet Explorer</dt>
    <dd>Do not touch</dd>
</dl>

Output:

Chrome
Best browser
Firefox
Pretty good browser
Edge
Not so good browser
Internet Explorer
Do not touch

Challenge 1: Stacking

In your unordered list example, stack lists inside another.

Challenge 2: Todo List

  1. Create file todo.html
  2. Add title TODO list for that new page
  3. Add todo in your navigation
  4. Add few todo items to your todo list