There are lots of occasions when we need to use lists. Who doesn't love a good list?

HTML provide us with 3 different types:

• Ordered lists.
• Unordered lists.
• Definition lists.

Browsers indent lists by default.

Ordered Lists

The ordered list is created with the <ol> element. Each item in the list is placed between <li> and </li> tags.

Each item in this list, as you might have guessed, is numbered.

Check the example below, which lists our modules:

See the Pen Ordered list by Command Shift (@manchestercodes) on CodePen.

Unordered Lists

The unordered list is created with the <ul> element. Each item in this type of list is also placed between <li> and </li> tags.

These lists use bulletpoints.

Check the example below with the instructors per module:

See the Pen Unordered lists by Command Shift (@manchestercodes) on CodePen.

Definition Lists

These lists are comprised of a set of terms along with the definitions. They're created with <dl> element and tends to have pairs: the term, represented by <dt>, and the definition, by <dd>.

Sometimes you might see a list where there are two terms used for the same definition or two different definitions for the same term.

Check the example below with the analogy we made at the beginning around HTML, CSS and Javascript:

See the Pen Definition lists by Command Shift (@manchestercodes) on CodePen.

Nested Lists

As an extra, know that you can put a second list inside of an <li> element to create a sublist/nested list. The browser will display this nested list further indented than the parent list.

In a nested unordered list, the browser will usually change the style of the bullet point too.

Check the example below and look at how we would nest the list of instructors, inside the respective module:

See the Pen Nested lists by Command Shift (@manchestercodes) on CodePen.

Practical

1. Create a new section in your document structure.
2. Add a new heading element and add the text "Qualities".
3. Create an ordered list that tells the reader your top 3 qualities.
4. Create a new section and add the heading "Hobbies & Interests".
5. Create an unordered list that tells the user your hobbies.
6. Once you're happy with the result, add the file to the staging area, commit it with a meaningful message and push it to GitHub.

Your portfolio is now getting in shape.

Once you've done this, proceed.