The difference between ul and ol elements in HTML

Contents

The ul element means a bulleted list, and the ol element means a numbered list. They are useful elements when used this way. This document explains why it is pointless and misleading to pretend that these elements mean “unordered list” and “ordered list.”

Bulleted and numbered lists

Although the element names ul and ol are originally short for “unordered list” and “ordered list,” respectively, their real meanings have always been different. Authors use them to pro­duce bulleted and numbered lists, respectively, and browsers implement this. Nobody really expects browsers to treat ul lists as unordered and to freely reorder them. The order might be highly significant, or just some natural order, or completely irrelevant—the markup does not tell this.

Authors have different reasons to choose between ul, ol, or some other markup. Sometimes the choice may be understood as suggesting that the order is significant. In a food recipe, you might use ul for the list of ingredients and ol for the preparation instructions. But you would do this because you know that the default renderings are a bulleted list and a numbered list, respectively. And it does not mean that the number of ingredients would be unordered; it may well have a specific, well thought-of order.

The HTML 4.01 specification says, in an introductory text: “An ordered list, created using the OL element, should contain information where order should be emphasized, as in a recipe.” This is adequate, but it also means that it is not a matter of being ordered vs. unordered; it is about emphasizing order—something that we often do by numbering things.

The list concept

What’s a list? Technically a sequence (series) of items. A list is by definition ordered (a sequence)—we should call it a set or a collection if it isn’t ordered, This means that anything can be called a list and marked up as a list. A paragraph is a sequence of statements, so you could treat it as a list. Even if there is no real sequence, you can say that you have a list—contain­ing just one item. Even an empty string is a list in the abstract sense, just with zero items.

But the ul, and ol (and dl) elements in HTML are not supposed to be used for all lists. Even the syntax rules prevents that. Within a paragraph, a sequence like 1, 2, 3, 4, 5 is surely a list logically, but you cannot use any of the HTML list elements for them. They are block ele­ments and hence disallowed within a p element. And by default, they cause a block pre­sen­ta­tion with line breaks and margins before and after, thus breaking up the paragraph.

Thus, the crucial question is: When is it useful to mark something as a list? In pro­gram­ming—client-side JavaScript, in this sense–list markup might be useful when you wish to process a list sequentially. But this does not really require list markup. You can just as well use a div element containing div or a elements and process its children in sequence.

Yet, it has become common to use list markup for a sequence of links, as illustrated below (though the items are not real links here).

When the author really wants to render the items e.g. as button-like elements in a row, he needs to remove all of the default formatting that browsers use for a list. The approach is still feasible, though. It degrades well on nonvisual browsers, which will treat the contents as a list and render the items separately, not running them together. So this is a good motive for using ul even though the common bulleted list presentation is desired—it is just the desired fallback rendering. But using list markup just because it looks “semantically correct” is an illusion.

Physical markup in disguise

HTML specifications are rather silent or obscure about the true nature of ul, ol, and dl elements. They just present use the phrases “unordered list” and “ordered list.” with no explanation (what is an unordered list, really?) and then proceed to describe typical rendering.

The reason is that they are physical markup in disguise. They are markup for presenting a list of items as an offset list, with bullets or numbers, respectively (and, for dl, as a list of name/value pairs). You are not supposed to use them for lists in general, but the spec­i­fi­ca­tions don’t say this—because the real mental model that we are supposed to have is that of bulleted or numbered offset lists.

“Physical markup” is in this case rather abstract. It’s a matter of presenting a list with some list markers, “bullets” or “numbers” in some sense. So this is rather different from settings specific presentation features, like the style of numbers, or even the kind of numbers. It makes perfect sense to use list markers in speech presentation, for example.

Instead of such list markup, authors could include the list markers as characters or images into the document itself. This is often a good approach, especially if you need multi-level numbering. But the ul and ol elements have been convenient tools for a few reasons:

A demonstration: W3C usage

Let’s have a look at the table of contents in the HTML 4.01 specification. They use num­bered lists (ol) for the items contents, with nested lists according to structure. Then, in the Full Table of Contents, having used ol for three levels, they suddenly use ul at the fourth level—to produce rendering that uses bullets of a kind (small black rectangles):

  1. The global structure of an HTML document - The HEAD and BODY of a document
    1. Introduction to the structure of an HTML document
    2. HTML version information
    3. The HTML element
    4. The document head
      1. The HEAD element
      2. The TITLE element
      3. The title attribute
      4. Meta data

Does this mean that for the items under “Meta data,” the order is not relevant? They had the option of using ol markup and just changing the list marker to a bullet or a square or what­ever using CSS, but they didn’t. Why? Because here W3C people authored in a normal, natural way. They simply use ul when they want an unnumbered list, a list without automatic numbering, and typically with bullets of some kind.

Do we need new markup?

If ul and ol are presentational, should we introduce new, purely logical markup for lists? Say, a l element, with structure similar to ul and ol but denoting a list in general?

This is a useful thought experiment. What would the default rendering of such an element be? We would probably decide that some list markers are needed, and we would thus reinvent ul.

Well, if the designers of HTML had known SGML well enough, they would have picked up tag names from the examples of The SGML Handbook instead of inventing both absurdly short names like s and pointlessly long names like blockquote, and we would have had list and item from the beginning. On the other hand, the default rendering of list would probably similar to that of ul in current browsers.

But at this point, and in the foreseeable future, inventing new tags just for puristic reasons helps nothing. It would just add to the confusion.

If the presentational nature of the difference between ul and ol is regarded as too dis­turb­ing, it would not do much harm (or much good) to define ul simply as a list of items outside paragraph context and to declare ol as deprecated and obsolete. Authors would be advised to move to ul and use CSS if they want a numbered list, but as browsers would still be required to support ol and, most importantly, would actually keep supporting it, authors would not really need to change their authoring habits.

Incidentally, ul type=1 works fine in most browsers and produces a numbered list (though the current specifications disallow it). Some minority browsers ignore the attribute, though.

As a different issue, do we need set markup? Authors who use ulsurely don’t expect browsers to reorder the list, but if a new element were introduced, authors could use it to express the idea “these items may be presented in any order.” It would be a real “unordered list,” i.e. not a list at all but a collection. And it could be defined so that it may have children of different types, e.g. p, div, or maybe even li elements, so that only the children (not grand­children) may be reordered by browsers.

Browsers could render set elements as if the set markup were not there, or they might show it as a bulleted list by default (or even as numbered lists). Since if a set can be rendered in any order, it can just as well be rendered in the order written. But browsers could also provide a widget for sorting a set element, e.g. alphabetically, numerically, or by some other order—even though all orders are acceptable, they need not be all the same to the user.

There's a different aspect too: Search engines pay attention to proximity of words. It is natural for them to apply this to words in consecutive li elements of a ul or ol element, but the children of a set element should be regarded as equidistant.

It is improbable that should considerations, though theoretically sound, constitute a good enough reason for markup like set. But this would just prove that the idea of an “un­num­bered list” is not feasible even when converted to a logically sound idea.

Conveying the idea of unordered vs. ordered

If it is relevant to tell the user that the order of some items does not matter, or that it is important, you need to tell it verbally. The kind and style of list markers does not say that. And if the order is important, you may need to tell what the order is and why it matters.

At the simplest, you could write a list of instructions and precede it with text that says that the steps need be to be taken in the specified order. It would then be natural to number them, but numbering alone does not express the relevance of order.

Even a list of items in no particular order could well be numbered for the purposes of reference. That would make it possible to say “item 7” or “item g” when discussing the document outside the web context, and even on web pages, such references may be needed (as you cannot, in general, directly link to an item of a list).

So what markup should I use for lists?

Use whatever markup produces the most reasonable default rendering and can be styled conveniently. There is no law, or even a recommendation, saying that you should use ul or ol for all lists. At least the following cases can be considered:

We should also consider what may happen when our page (author) style sheets do not format elemens the way we like; see CSS Caveats (new edition). The markup we choose should be acceptable or at least tolerable as fallback. For example, it is OK to use ul for a list that you format as a horizontal list of items, if it is OK to you that in some circumstances it is rendered as a normal bulleted list.

We can also consider non-visual rendering. As Ian Hixon writes in a message in the help@lists.whatwg.org list under the title the limit of lists?, in a discussion about using list markup for form fields but apparently intended to be a general remark:

For <ol>, the judgement is easier, I think. Generally, if you would read the items out loud prefixed by a number, then <ol> is probably appropriate. For example, "Here's what I want you to do. One, go to the store, two, buy some tomatoes, and three, put them in the pantry" could be imagined as a <p> followed by an <ol>.

For <ul> it's harder, but again, a general rule of thumb is "would it be obviously wrong for each item to be prefixed by a bullet point?". Your suggestion of "would one write it on paper in list form" is a good rule of thumb also.

First published . Last modified 2014-09-05.

This page belongs to section Web authoring and surfing of the free information site IT and communication by Jukka “Yucca” Korpela.