Web Development And Design #3: HTML Lists

Lists are a part of our daily activities. List of text books for school, list of ingredients for that new recipe we found on the Internet, list of students that are absent, list of students that are present etc…

In web development, there are many scenarios where we need to use lists. HTML provides us with 3 different types of lists:

1. Ordered Lists

This is a type of list where each item in the list is numbered. For example, a list of tasks ordered according to how important they are.

2. Unordered Lists

In this type of list, the items are not numbered. Instead, they are bulleted.

3. Definition Lists

Definition Lists are made up of a set of terms along with their definition.

Ordered Lists

The element <a> is used for creating ordered lists. Each item in the list is placed between an opening <li> tag and a closing </li> tag. (The li stands for list item.)

Browsers indent lists by default. Sometimes you may see a type attribute used with the <ol> element to specify the type of numbering (numbers, letters, roman numerals and so on).

Unordered Lists

The unordered list is created with the <ul> element. Each item in the list is placed between an opening <li> tag and a closing </li> tag. (The li stands for list item.)

Browsers indent lists by default.

Sometimes you may see a type attribute used with the <ul> element to specify the type of bullet point (circles, squares, diamonds and so on).

Definition Lists

The definition list is created with the <dl> element and usually consists of series of terms and their definitions.

Within the <dl> element, you will, often, find the <dt> and <dd> elements.

The <dt> element is used to indicate a term. Within the <dl> element, you will find the definition. They are mostly found next to each other, with <dt> element always before the <dl> element.

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

Nested Lists

A list can be nested within another list. This is very possible in HTML. The nested listed is usually put inside a <li> element to create a sub-list or nested list.

Browsers display nested lists indented further than the parent list. In nested unordered lists, the browser will usually change the style of the bullet point too.

A Web Page Sample With Lists

Here you can see a main heading followed by an introductory paragraph. An unordered list is used to outline the ingredients and an ordered list is used to describe the steps.

HTML And CSS: Design And Build Websites By Jon Ducket