Skip to content

HTML Lists

HTML has several types of lists:

  1. Unordered lists
  2. Ordered Lists
  3. Definition Lists

Unordered Lists

This is just a simple list with markers called "bullets" at the front of every new list item. We used the <ul> tag to start an unordered list and we use the <li> tag to specify each list item.

1
2
3
4
5
<ul>
   <li>Apples</li>
   <li>Bananas</li>
   <li>Pears</li>
</ul>
  • Apples
  • Bananas
  • Pears

Ordered lists

  1. Apples
  2. Bananas
  3. Pears

```

  1. Apples
  2. Bananas
  3. Pears

Definition lists

These are lists that have a definition title (<dt>) at the front of each item. The item then has a definition description <dd> right after the title. Each item can have it's own distinct label. Definition lists are ideal for creating a dictionary list where the label is the term and the description is the definition of the word.

Here is an example of a definition list.

Engage
Where we introduce our topic and any background motivation.
Elicit
Where we ask the students what their prior knowledge and how it might be related to the new topic.
Explore
Where students get a chance to interact with the elements and try out some sample code.
Explain
Where we explain what each component does.
Elaborate
Where we dive into the details of how the components interact.
Extend
Where we ask students to extend the example code.
Evaluate
Where we check if the students comprehend the lesson