Automatic HTML (ul, ol, li) list generator

These HTML tags (ul, ol, and li) are used to create lists. The list must begin with a ul if it is an unordered list (bulleted), or a ol if it is an ordered list (numbered). Inside each list, each item must begin with a li tag and end with a close /li tag. Note that list items can contain another HTML tag, including another list (to create a “nested list”).

HTML list generator

Difference between ul and ol elements in HTML

Bulleted and numbered lists

Although the item names ul and ol were originally short for “unordered list” and “ordered list”, their literal meanings have always been different. Editors use them to create bulleted and numbered lists, respectively, and browsers implement it.

Authors have different reasons to choose between ul, ol, or any other markup. In a recipe, you can use ul for ingredient list and ol for preparation instructions.

How to create a list?

What is list? Technically a set of items (series). This means that anything can be called a list and marked as a list. A paragraph is a series of statements, so you can treat it as a list. You could say you have a list with only one item, even if it’s not an actual array. Even an empty string is a list with zero elements in the abstract sense.

However, ul and ol (and dl) in HTML are not expected to be used for all lists. Within a paragraph, a sequence such as 1, 2, 3, 4, 5 is necessarily a logical list, but you cannot use any of the HTML list items for them. They are block elements and therefore not allowed within a p element. And by default they cause a block presentation with line breaks and margins before and after, thus dividing the paragraph.

When the author really wants to create the list, he will treat the content as a list and render the items separately so that they do not overlap. So it’s a good reason to use ul when requesting a common bulleted list.

Creating lists with HTML and properties of lists

HTML specs are pretty quiet or vague about the actual structure of ul, ol, and dl. Only the terms “unordered list” and “ordered list” are used. This is because they are physical markings in disguise.

“Physical marking” is pretty abstract in this case. It’s important to present a list with some list markers, “bullets” or “numbers” in some sense. This is quite different from certain presentation features such as settings, style of numbers or even numbers. For example, it makes sense to use list markers in a speech presentation. Instead of such list markups, authors can insert list markers as characters or images into the document itself. This is generally a good approach, especially if you need multi-level enumeration. But the ul and ol elements have been suitable tools for several reasons:

They correspond to concepts that people know from word processors and other software. Markers are automatically generated by browsers. This is especially good for numbered lists when using simple authoring tools that cannot create lists. Markers and other presentation details can be changed using CSS.