Web design development. Everything about unordered lists

One of the best organizing tools in HTML is the list: A collection of items, ordered or unordered, with some common connection. The basics: Creating an unordered list.

Unordered lists are presented to the user with some sort of bullet in front of each item. Each item is a complete, separate text flow and can contain any HTML element, including other lists. A simple unordered list might look like this:

Pink Floyd
Alanis Morsette
Rush

Depending on your browser, you might see a hollow or filled circle or square in front of each item.

The HTML to create an unordered list is straightforward. The entire list is enclosed within the <ul> (unordered list) tag; each item is contained within an <li> (list item) tag. While the HTML standard requires that each <li> tag end with a corresponding </li> tag, these are almost always omitted.

Putting this all together, the HTML to create the example above is:

<ul>

  <li>Pink Floyd

  <li>Alanis Morsette

  <li>Rush

</ul>

The <ul> tag breaks the text flow containing it much like the  tag, causing the first item in the list to start one line below the current line. Within the list, each <li> tag causes a break in the flow, causing the item to start on the next immediate line. Finally, the closing </ul> tag causes a  style break, and the content after the list begins one line below the end of the list.

Spacing and indentation

If you need to add extra space within your list, use tags to create the extra space. Place one  at the end of each list item, before the next <li> tag, to create space within the list. Here is the same list, with a  tag after all items aligned to the left of the page:

Pink Floyd

Alanis Morsette

Rush

Changing list indentation is trickier, requiring manipulation of various style properties to get the desired effect.

Nested lists

Nested unordered lists are fairly well-behaved. To distinguish the nesting, the browser will indent each nested level further to the right and change the bullet symbol. The bullets used are browser-dependent; the following example should demonstrate your browser's capabilities:

Pink Floyd
Alanis Morsette

Level two, Pink Floyd
Level two, Alanis Morsette

Level three, Pink Floyd
Level three, Alanis Morsette

Level four, Pink Floyd
Level four, Alanis Morsette
Level four, Rush

Level three, Rush

Level two, Rush

Rush

What symbols did your browser use for each level?

Notice that nested lists are not preceded by a line of space. Instead the browser tightens up the vertical spacing, placing the list adjacent to the last item of the containing list. To override this behavior, place a before the nested list.

<< BACK

Dealing With Font: Unordered Lists