Lesson 6

Unordered, Ordered, & Definition Lists

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, it’s 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

  1. iPad
  2. iPhone
  3. 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

  1. iPad
  2. iPhone
  3. 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 and reversed 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

  1. iPad
  2. iPhone
  3. 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

  1. Walk the dog
  2. Fold laundry
  3. Go to the grocery and buy:
    • Milk
    • Bread
    • Cheese
  4. Mow the lawn
  5. Make dinner

List Item Stylization

Unordered and ordered lists come with a list item element by default. For unordered lists this is typically a solid dot while ordered lists typically use numbers. Using CSS the content and position of this element may be adjusted.

List Style Type Property

The list style type, list-style-type, property may be used to set the content and style of a list item. The available values range from squares, decimal numbers, all the way to Armenian numbering. Any list style value can be added to either unordered or ordered lists. In this sense it is possible to number an unordered list and vice versa. Doing so is not recommended as it defeats the purpose of the chosen element and works against semantics.

A list style may be applied to an entire list or single list items, all depending on how the CSS is structured. It’s rare that a single list item would need to be stylized differently than the rest, however it is possible.

List Style Type Values

  • none No list item
  • disc A filled circle
  • circle A hollow circle
  • square A filled square
  • decimal Decimal numbers
  • decimal-leading-zero Decimal numbers padded by initial zeros
  • lower-roman Lowercase roman numerals
  • upper-roman Uppercase roman numerals
  • lower-greek Lowercase classical Greek
  • lower-alpha / lower-latin Lowercase ASCII letters
  • upper-alpha / upper-latin Uppercase ASCII letters
  • armenian Traditional Armenian numbering
  • georgian Traditional Georgian numbering
ul {
  list-style-type: circle;
}

List Style Type Demo

  • iPad
  • iPhone
  • MacBook Air

Using an Image as a List Item

There may come a time when the default list style type values are not enough, or you simply want to customize your own list item element. Changing the list item element is completely possible. There are a few different ways to do so.

The original way is to use the list style image, list-style-image, property and pass it a URL value of an image to be used as the list item. While this works, it may not be considered the best solution. A better way to use an image as a list item would be to use a background image in combination with some padding.

Setting a background image on the list item element, removing any default list-style, and then adding in some padding on the left hand side provides a list item a new element style. Using a background image, as opposed to the list style image property, provides more control over positioning, allows the use of sprites, and offers other advantages.

li {
  background: url('tick.png') 0 0 no-repeat;
  list-style: none;
  padding-left: 20px;
}

Using an Image as a List Item Demo

  • iPad
  • iPhone
  • MacBook Air

Using Characters as List Item Elements

For browsers that support the :before pseudo-element, the content property can be used to pass any HEX-escaped character encoding as the list item element. To start, the default list item element needs to be removed by setting the list-style property to none. Next, the :before pseudo-element needs to be used in conjunction with the content property. The value for the content property can be any HEX escaped character encoding. Lastly, a right margin is added to provide spacing between the character and the list item content.

Mark Newhouse wrote an article for A List Apart a while back outlining this technique as well as many other different ways of taming lists.

li {
  list-style: none;
}
li:before {
  content: "\2708";
  margin-right: 6px;
}

Demo

  • iPad
  • iPhone
  • MacBook Air

List Style Position Property

By default the list item element is to the left of the content within the list element. This list style positioning is described as outside, meaning that all of the content will appear directly to the right of the list item element. Using the list-style-position property we can change the default value of outside to inside or inherit.

The main difference between the outside and inside values is that the outside property places the list item element to the left of the list item and doesn’t allow any content to wrap around it. Using the inside value places the list item element inline with the first line of text of the list item and allows other lines of text to wrap below it as needed.

ul {
  list-style-position: inside;
}

List Style Position Demo

  • iPad – iPad is a magical window where nothing comes between you and what you love. Now that experience is even more incredible with the new iPad.
  • iPhone – The faster dual-core A5 chip. The 8MP camera with all-new optics also shoots 1080p HD video. And introducing Siri. It’s the most amazing iPhone yet.
  • MacBook Air – The new MacBook Air is faster and more powerful than before, yet it’s still incredibly thin and light. It’s everything a notebook should be. And more.

Shorthand List Style Property

All of the list style properties discussed thus far can be combined into one short hand list-style property. In using the list-style property, you can pass one or all three list style values. The order of these values should be presented as list-style-type, list-style-position, and list-style-image.

ul {
  list-style: circle inside;
}
ol {
  list-style: outside;
}

Horizontally Displaying List

Occasionally lists may need to be displayed horizontally rather than vertically. Perhaps you want to structure a list into multiple columns, build a navigational list, or simply have a few list items in a single row. Depending on the content and desired outcome, there are a few different ways to display lists as a single line, including inline display list items and floating list items.

Inline Display List

The quickest way to display a list within a single line is to set the list item to have a display property of inline. Doing so turns the list item into an inline level element rather than a default block level. Changing this display level allows the list items to stack up next to each other horizontally.

When changing the display value to inline, the list item element, bullet or number, is removed. Additionally, the list items will sit right next to each other with a single space between them. Ideally margins or padding should be added to better space these elements apart.

li {
  display: inline;
  margin: 0 10px;
}

Inline Display List Demo

  • iPad
  • iPhone
  • MacBook Air

Floating List

Changing the display property to inline is quick, however it doesn’t provide much control over how to stylize the list items and removes the list item element. In the case where a list item element is needed, a specific width should be set. Or if greater control is desired, floating the list items will work better than changing the display property.

Setting the list item float property to left will stack all of the list items directly next to each other without any space in-between them. Additionally the list item element is still displayed by default. To clean up the list, and to prevent the list item element from being displayed on top of other list items, margins or padding need to be set.

Floating list items leave them as block level elements, allowing greater control over styling, however it also breaks the flow of the page. Always remember to clear the floats after the list to return the page back to its intended flow.

li {
  float: left;
  margin: 0 20px;
}

Floating List Demo

  • iPad
  • iPhone
  • MacBook Air

Resources & Links

Complete! Any questions?

Please feel free to contact me on Twitter if you have any questions. Also, if you enjoyed this lesson please share it with your friends.

An Advanced Guide to HTML & CSS

An Advanced Guide to HTML & CSS

An Advanced Guide to HTML & CSS takes a deeper look at front-end design & development, teaching the latest for any designer looking to round out their skills.

View the Advanced Guide to HTML & CSS