Lists are an everyday part of life. To-do lists determine what to get done. Navigational routes provide a turn by turn list of directions. Recipes provide both a list of ingredients and a list of instructions. With a list for nearly everything, its easy to see how they have become popular online.
HTML provides three different types of lists to choose from when building a page, including unordered, ordered, and definition lists. Unordered lists are for lists of items where order isn’t of important. While ordered lists place strong importance on the order of items. In the case where there is a list of terms and descriptions, perhaps for a glossary, definition lists are available. Choosing what type of list to use, or to use a list at all, comes down to the content at hand and what is the most semantic choice for displaying the content in HTML.
With three different types of lists to use within HTML there are multiple ways to stylize them using CSS. Some of these options include deciding what type of bullet to use on a list. Maybe the bullet should be square, round, numeral, alphabetical, or perhaps not even exist at all. Also, deciding if a list should be displayed vertically or horizontally plays a hand in stylization.
Unordered List
Unordered lists are purely a list of related items, in which their order does not matter nor do they have a numbered or alphabetical list element. Creating an unordered list in HTML is accomplished using the unordered list,
ul, block level element. Each list item within an unordered list is individually marked up using the list item, li, block level element.
By default most browsers represent each list item with a solid dot. This solid dot is referred to as the list item element and can be changed using CSS.
<ul><li>iPad</li><li>iPhone</li><li>MacBook Air</li></ul>
Unordered List Demo
- iPad
- iPhone
- MacBook Air
Ordered List
The ordered list element,
ol, works just like the unordered list element, including how each individual list item is created. The main difference between an ordered list and an unordered list is that with an ordered list the order of which items are represented is important. Instead of showing a dot as the default list item element, an ordered list uses numbers. Using CSS, these numbers can then be changed to letters, Roman numerals, and so on.
<ol><li>iPad</li><li>iPhone</li><li>MacBook Air</li></ol>
Ordered List Demo
- iPad
- iPhone
- MacBook Air
With the introduction of HTML5 also came the introduction of two new attributes for ordered lists. These new attributes include
start and reversed. The start attribute determines from where an ordered lists should start. By default, ordered list start at 1. However, there may be a case where a list should start at 5. To do so simply set a start attribute value of 5. Even though a list might not be ordered using numbers, the start attribute only accepts integer values.
<ol start="30"><li>iPad</li><li>iPhone</li><li>MacBook Air</li></ol>
Start Attribute Demo
- iPad
- iPhone
- MacBook Air
The
reversed attribute allows a list to appear in a reversed order. A list of 5 items ordered 1 to 5 may be reversed and ordered from 5 to 1. The reversed attribute is a Boolean attribute so it doesn’t accept any values. Including it within the opening ol will reverse the list. As part of the HTML5 specification, not all browsers currently support the start andreversed attributes.
Additionally, the
value attribute may be used on an individual list item within an ordered list to change its value within the list. Any list item appearing below an item with an updated value attribute will then be recalculated accordingly. As an example, if the second item in a list has a value attribute of 9, the number of that list item will appear as the ninth item. All other items below this one will be calculated as necessary, starting at ten.
<ol><li>iPad</li><li value="9">iPhone</li><li>MacBook Air</li></ol>
Value Attribute Demo
- iPad
- iPhone
- MacBook Air
Definition List
Another type of list often seen online, yet quite different than that of an unordered or ordered list, is the definition list. Definition lists are used to outline multiple terms and descriptions, often in the case of a glossary. Creating a definition list in HTML is accomplished using the
dl element. Instead of using the li element to mark up list items, the definition list actually requires two elements: the definition term element, dt, and the definition description element, dd.
A definition list may contain numerous terms and descriptions, one after the other. Additionally, a definition list may have multiple terms per description as well as multiple descriptions per term. A single term may have multiple meanings and warrant multiple definitions. In comparison, a single description may be suitable for multiple terms.
In adding a definition term and description, the term must come before the description. Subsequently, the term and the following description will correspond to one another.
Definition lists do not have any list item elements, however the default styling of a definition list does indent any descriptions. To adjust this indention you may use the
margin and padding properties within CSS.
<dl><dt>study</dt><dd>the devotion of time and attention to acquiring knowledge on an academic subject, esp. by means of books</dd><dt>design</dt><dd>a plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made</dd><dd>purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object</dd><dt>business</dt><dt>work</dt><dd>a person’s regular occupation, profession, or trade</dd></dl>
Definition List Demo
- study
- the devotion of time and attention to acquiring knowledge on an academic subject, esp. by means of books
- design
- a plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made
- purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object
- business
- work
- a person’s regular occupation, profession, or trade
Nested Lists
One reason lists are extremely powerful within HTML is the ability to nest lists inside one another. Unordered lists can live within ordered or definition lists, definition lists can live within unordered and ordered lists, and vice versa. Every list has the ability to be placed within another list, nesting them continually. The potential to do so doesn’t provide free reign to build pages completely out of lists. Lists should still be reserved specifically for where they hold the most semantic value.
Building a nested list is fairly simple. Determine where a nested list should appear, and rather than closing a list item, begin a new list. Once the nested list is complete, close the wrapping list item and continue on with the original list.
<ol><li>Walk the dog</li><li>Fold laundry</li><li>Go to the grocery and buy:<ul><li>Milk</li><li>Bread</li><li>Cheese</li></ul></li><li>Mow the lawn</li><li>Make dinner</li></ol>
Nested Lists Demo
- Walk the dog
- Fold laundry
- Go to the grocery and buy:
- Milk
- Bread
- Cheese
- Mow the lawn
- Make dinner
