Lists in HTML

In general you have two types of lists, ordered lists and un-ordered lists. The ordered lists are the ones with 1, 2, 3, etc. and the un-ordered lists are the ones with various types of bullets, e.g. •

The tags for ordered and un-ordered lists are <OL> (ordered list) and <UL> (un-ordered list). The individual lines/entries in the lists are made with the tag <LI> (list item). Obviously there is a number of attributes for these tags, to provide some diversity in how the lists look.

The ordered lists are the lists with the points 1, 2, 3, etc., or a, b, c, etc.

A standard ordered list with two points will, as code, look like this:



On the page, when shown, it looks like this:



Note that it isn't necessary to use <BR> after each list item.

I general, never place any codes between </LI> and <LI>, <OL> and <LI> or </LI> and </OL>.

Default setting for the OL-tag is Arabic numerials, i.e. 1, 2, 3... That can be changed. For the most part, this is done with the attribute TYPE, and there is six types to choose from:

Value	Effect
none	No numbering.
1	Arabic numerials (1, 2, 3, 4...), which is the default value.
a	Alphabetically ordered using lowercase (a, b, c, d...)
A	Alphabetically ordered using uppercase (A, B, C, D...)
i	Roman numerials using lowercase (i, ii, iii, iv...)
I	Roman numerials using uppercase (I, II, III, IV...)

If you need something else, you have to use STYLE and list-style. This will be shown a bit further down.

So, if you need an ordered list in uppercase Roman numerials, the code will be <OL TYPE="I">, making it look like this:



The attributten TYPE is limited in options, but for the common user, it will be fine and easy to use. If you need to do more advanced numbering, you have to use the attribute STYLE and the variable list-style-type. If we start with the types we just covered:

Value	Effect
none	No numbering.
decimal	Arabic numerials (1, 2, 3, 4...), which is the default value.
lower-alpha	Alphabetically ordered using lowercase (a, b, c, d...)
upper-alpha	Alphabetically ordered using uppercase (A, B, C, D...)
lower-roman	Roman numerials using lowercase (i, ii, iii, iv...)
upper-roman	Roman numerials using uppercase (I, II, III, IV...)

Besides these, I have found the following:

Value	Effect
decimal-leading-zero	The numbers 1 to 9 shown as 01, 02, 03, 04...
lower-greek	Alphabetically ordered using lowercase Greek letters (α, β, γ, δ...)
hebrew	Alphabetically ordered using Hebrew letters (א, ב, ג, ד...)
armenian	Alphabetically ordered using Armenian letters
cjk-ideographic	Alphabetically ordered using ideographic numbering (Chinese numbers)
georgian	Alphabetically ordered using traditional Georgian numbering
hiragana	Alphabetically ordered using traditional Hiragana numbering
hiragana-iroha	Alphabetically ordered using traditional Hiragana-Iroha numbering
katakana	Alphabetically ordered using traditional Katakana numbering
katakana-iroha	Alphabetically ordered using traditional Katakana-Iroha numbering
inherit	Alphabetically ordered using the same numbering as the parent element (only for kun for sublists)

Be aware, that not all variables work on all browsers.

It is thus possible, should the need arise, to have an ordered list using Armenian letters by using STYLE="list-style-type:armenian". The result looks like this:

The default value for the first number is 1, but this can also be changed, according to you need. This is done with the attribute VALUE, and it goes on the LI tag. If you want to start e.g. with number 10, it looks like this <LI VALUE="10">, and the result looks like this:



There is no problem in starting with a negative number, e.g. -1, then it looks like this:



In the same manner, you can skip a number by setting the VALUE on another LI tag than the first, e.g. point 2 is changed to point 5:

The un-ordered lists are the lists with bullet points, e.g. • or -, commonly known as bullet lists.

A standard bullet list with two points will look like this as code:



When shown on the page, it looks like this:



Note that it isn't necessary to use <BR> after each list item.

I general, never place any codes between </LI> and <LI>, <UL> and <LI> or </LI> and </UL>.

When making sublists in a bullet list, the tag will automatically format the subpoints. Most browers will automatically use another bullet for the sublist, than the one used for the main list, but if you want to ensure a uniform look in all browsers, you have to specify which bullet to use (show a bit further down). For a standard bullet list with two points, of which the first has two subpoints, the code will look like this:



On the page, when shown, it looks like this:



Of course, this can be extended with sub-subpoints etc.

Formatting of the bullets is done by STYLE="" and one of the following variables:

Value	Effect
list-style	Specifies all values for a list in one declaration.
list-style-image	Specifies an image as the bullet.
list-style-position	Specifies whether the list's bullets is going to be inside or outside the text block.
list-style-type	Specifies the type of bullet.

The variable 'list-style' is a combinaton variable, where you can combine 'list-style-image' and 'list-style-position' or 'list-style-type' and 'list-style-position', instead og specifying the individual variables e.g. STYLE="list-style:square outside" instead of STYLE="list-style-type:square; list-style-position:outside". A pragmatic coding I use myself is 'list-style' for types, because that's the one I use the most, and the specific -position and -image for the rest, to make the code easier to assess.

List-style-type is the most common of the formattings (shortened to list-style), most likely because as authors we a bit boring when it comes to typography, and the standard values fully cover our need for readability of bullet lists. I could be e.g. a black square we need:



On the page it looks like this:


For list-style-type you have the following options:

Value	Effect
circle	The bullet is a cirkel.
disc	The bullet is a disc. This is the default value for the first level in a <UL>.
none	No bullet shown.
square	The bullet is a square.

If you want to use graphic elements instead of the common bullets, e.g. smileys or flags, this can be done by using list-style-image. If we want to make a list using e.g. small Stars and Stripes, the file US.gif in the directory Graphics, the code looks like this:



On the page it looks like this:



List-style-position defines whether your bullets are inside or outside the text blocks for your LI. You have two options: inside and outside, with a third called inherit, where you inherit the value from the parent element. Default is outside. If we take our list with the flags from above and set the position to inside, the code looks like this:



On the page it looks like this:


As long as you only have one line per bullet, the only effect you see is an increase in indent. The actual effect becomes clearer, when you have multiple lines:

Using "list-style-position:outside":

Using "list-style-position:inside":

If you find the standard HTML options a bit boring, you can, so to say, go off the reservation and define your own bullets. It is a slightly tedious process, but the effect is quite good.

It is said that the method allows the use of all types of special characters, but so far, the method apparently only works well, when using characters that don't require codes. In other words, you have to be able to write a character like ♔ directly, without having to use the code &#9812;. Here there is an advantage in using the file format UTF-8 and set CHARSET="UTF-8", so you have the widest range of special characters at your disposal.

The method consists of two parts. The first part is a selector called 'before', applied on your list item. To limit the effect to the list items where you want to use them, you specify a class named SpecialBullet. The syntax looks like this:


This is inserted in the style sheet for the page.

This line "UL LI.SpecialBullet" means that list items (LI) in un-ordered lists (UL) with the class SpecialBullet (CLASS="SpecialBullet") has to start with '» ' (the character » + space). To ensure that the lines don't look as if you are using "list-style-position:inside" as shown above, the first line has to be pulled a little to the left. This is done using margin-left. The margin-left value depends on the bullets being used. For '» ' the value is -12px.

On the list itself, you have to do two things: you have to specify that the list don't use bullet, using 'list-style:none' in the UL tag, and set CLASS="SpecialBullet" on the LI tags. The code will look like this:



On the page, it will look like this:

Lists have a preset space between the list and the following paragraph, equivalient to the space between two paragraphs. If you put in subpoints, these will also have a fixed space. This may reduce the readability of the page, when having a lot of text for each bullet, because it becomes a massive block of text. In that case, you often want to loosen up the spacing.

If we look at a list with a lot of text, like this, with a standard set-up:



the readability is quite limited. What you do is expand the bottom margin for each LI a little. If we set margin-bottom to 5px, it looks like this:



When shown, it looks like this on the page:



The choice in distance is a matter of personal taste. If you get a better reading experience by having a different space for the subpoints, then that's what you do.


Occasionally you may want to have som extra space on the block of subpoints, to make the text easier to look through. It is tempting to put a break in between the LI tags, like this:



This, however, is a bad idea. Most browsers can read the code and use it correctly, but not all of them, and the code can't be validated, so you risk that the search engines register the page as poor, and you get buried on page 100 in searches.

The way to do it is by declaring a margin-bottom on the UL tag for the subpoints, like this:



On the page, it looks like this:



In principle, you could also set margin-bottom on the second subpoint to 15px:



This solution is not recommended. First of all, this type of layout is not done by declaring a STYLE on each LI tag, but by specifying margin-bottom for both LI and UL tag in a stylesheet, possibly as a CLASS, is you use more than one layout for the used lists. If you have to add more subpoints, or make subpoints for other bullets, it also becomes more bothersome than is has to be, using this solution. For a couple of pages, the solution is okay, but you easily get a lot of pages on a site, and that's when you need simple and robust solutions for your code, to keep the number of errors on an absolute minimum.

IF you really want a solution with a break, you have to have it right before </LI>, like this:


BUT, this a crappy solution. First of all you can't adjust the distance to give the best reading experience, and it has to be corrected manually everywhere, if you decide you want things to look differently, instead of just having to adjust a single variable in your stylesheet, and then everything looks right everywhere on the site.