About The Author

Louis is a front-end developer, writer, and author based in Toronto, Canada. He curates the newsletters Web Tools Weekly and Tech Productivity and blogs about … More about Louis ↬

Email Newsletter

Weekly tips on front-end & UX .
Trusted by 200,000+ folks.

In an online world now dominated by CSS layouts, CSS-styled HTML lists have become invaluable tools in a CSS developer’s toolbox, due to the HTML lists versatile and graphically flexible nature. All this despite some of the obvious browser inconsistencies that can affect the styling of the different types of lists available in HTML coding.

If you’re new to CSS, this article should provide a good overview of the different types of lists available, as well as some of the browser quirks that occur in relation to HTML lists, with some helpful advice that should prevent those quirks from becoming major road blocks to good design.

You might be interested in the following related posts:

In addition, we’ll look at a showcase of various uses, techniques, and tutorials that utilize HTML lists . All of this should put strong emphasis on the importance of using lists in modern web design, reminding even experienced coders how HTML lists can improve the flexibility and maintainability of a website.

More after jump! Continue reading below ↓

Available List Options

Unordered Lists:

    Unordered lists are the most commonly used lists. Here is an image showing what an unstyled unordered list looks like in different browsers:

    Unordered lists in multiple browsers

    As you can see above, the default settings for unordered lists are somewhat different across various browsers. Of course, nowadays it is rare to see a naked unordered list on any website. Also, a good CSS reset will normalize those differences, bringing the list down to bare text with no bullets and no margins or padding.

    CSS properties that are specific to unordered lists include list-style-type , list-style-position , and list-style-image. These properties set the type of marker (or bullet), the position of the marker, and an image to replace the marker. These three properties can be combined using the shorthand list-style property.

    The list-style-type property can be set to a number of different values, some of which are shown in the chart below:

    Unordered list markers

    Depending on the user’s browser and system, certain values for list-style-item may not appear correctly, often defaulting to decimal . Using an incrementing value for an unordered list is not recommended since that would take away the semantic value of the unordered list.

    The list-style-position property specifies the position of the list marker, and can be set to either outside (the default) or inside . This property would also set the position of an image, if the list-style-image property is set.

    The list-style-image property can be used to give the unordered list a custom look with unique “bullets”. Unfortunately, this method of adding a bullet to an unordered list is buggy in Internet Explorer , and is rarely used. A much better solution is to add a background image to the

  • elements on the list, adjusting the position of the background image accordingly, and setting it to no-repeat . This solution is explained through a series of steps at maxdesign.com , and works nicely in all browsers.

    Ordered Lists:

      Ordered lists are used when a list of items requires a visible incrementing value before each item. The value for the marker on an ordered list can be set to any of the values also available for an unordered list, as discussed above. In most cases, an ordered list would either have an incrementing marker on the list items, or no marker at all. So, it would be unlikely that you would change the marker from an incrementing one to a non-incrementing one on an ordered list , since that would remove the semantic value of the items.

      Definition Lists:

      Definition lists are used to mark up lists of items that have definitions. They consist of definition terms (

      ) along with definitions (
      ). The pairings for definition list items do not have to be exactly paired up. The following is perfectly valid in XHTML Strict:

      A machine used for making numerical calculations.

      Thus, you could have more than one

      with a single
      , or even have multiple
      tags and only one

      The visual display of a definition list, by default, is virtually the same across all browsers, as shown in the image below:

      A definition list

      Deprecated Lists: &


      and elements also, technically, qualify as “HTML lists”, but they are deprecated in XHTML, so I won’t discuss those in detail here.

      Lists in HTML5

      In HTML5, the unordered list has basically remained the same, although now it seems to be referred to simply as a “list”. The new