Lists in HTML




Lists in general

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.





Ordered lists, typography

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:

<OL>
<LI>This is the first point</LI>
<LI>This is the second point</LI>
</OL>


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

  1. This is the first point
  2. This is the first point


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:

ValueEffect
noneNo numbering.
1Arabic numerials (1, 2, 3, 4...), which is the default value.
aAlphabetically ordered using lowercase (a, b, c, d...)
AAlphabetically ordered using uppercase (A, B, C, D...)
iRoman numerials using lowercase (i, ii, iii, iv...)
IRoman 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:

  1. This is the first point
  2. This is the second point


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:

ValueEffect
noneNo numbering.
decimalArabic numerials (1, 2, 3, 4...), which is the default value.
lower-alphaAlphabetically ordered using lowercase (a, b, c, d...)
upper-alphaAlphabetically ordered using uppercase (A, B, C, D...)
lower-romanRoman numerials using lowercase (i, ii, iii, iv...)
upper-romanRoman numerials using uppercase (I, II, III, IV...)

Besides these, I have found the following:

ValueEffect
decimal-leading-zeroThe numbers 1 to 9 shown as 01, 02, 03, 04...
lower-greekAlphabetically ordered using lowercase Greek letters (α, β, γ, δ...)
hebrewAlphabetically ordered using Hebrew letters (א, ב, ג, ד...)
armenianAlphabetically ordered using Armenian letters
cjk-ideographicAlphabetically ordered using ideographic numbering (Chinese numbers)
georgianAlphabetically ordered using traditional Georgian numbering
hiraganaAlphabetically ordered using traditional Hiragana numbering
hiragana-irohaAlphabetically ordered using traditional Hiragana-Iroha numbering
katakanaAlphabetically ordered using traditional Katakana numbering
katakana-irohaAlphabetically ordered using traditional Katakana-Iroha numbering
inheritAlphabetically 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:

  1. This is the first point
  2. This is the second point





Ordered lists, the value

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:

  1. This is the first point
  2. This is the second point


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

  1. This is the first point
  2. This is the second point


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:

  1. This is the first point
  2. This is the fifth point on position number two


Bullet lists/Un-ordered lists, standard settings

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:

<UL>
<LI>This is the first point</LI>
<LI>This is the second point</LI>
</UL>


When shown on the page, it looks like this:

  • This is the first point
  • This is the second point


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:

<UL>
<LI>This is the first point
<UL>
<LI>This is the first subpoint</LI>
<LI>This is the second subpoint</LI>
</UL>
</LI>
<LI>This is the second point</LI>
</UL>


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

  • This is the first point
    • This is the first subpoint
    • This is the second subpoint
  • This is the second point


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


Formatting of bullet lists

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

ValueEffect
list-styleSpecifies all values for a list in one declaration.
list-style-imageSpecifies an image as the bullet.
list-style-positionSpecifies whether the list's bullets is going to be inside or outside the text block.
list-style-typeSpecifies 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:

<UL STYLE="list-style-type:square;">
<LI>This is the first point</LI>
<LI>This is the second point</LI>
</UL>


On the page it looks like this:

  • This is the first point
  • This is the second point

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

ValueEffect
circleThe bullet is a cirkel.
discThe bullet is a disc. This is the default value for the first level in a <UL>.
noneNo bullet shown.
squareThe 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:

<UL STYLE="list-style-image:url('Graphics/US.gif')">
<LI>This is the first point</LI>
<LI>This is the second point</LI>
</UL>


On the page it looks like this:

  • This is the first point
  • This is the second point


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:

<UL STYLE="list-style-position:inside; list-style-image:url('Graphics/US.gif')">
<LI>This is the first point</LI>
<LI>This is the second point</LI>
</UL>


On the page it looks like this:

  • This is the first point
  • This is the second point

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":
  • Point 1, line 1
    Point 1, line 2
  • Point 2, line 1
    Point 2, line 2

Using "list-style-position:inside":
  • Point 1, line 1
    Point 1, line 2
  • Point 2, line 1
    Point 2, line 2


Bullet lists/Un-ordered lists, other types of bullets

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:


UL LI.SpecialBullet:before
{
content:"» ";
margin-left: -12px;
}

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:


<UL STYLE="list-style:none">
<LI CLASS="SpecialBullet">Point 1, line 1<BR>Point 1, line 2</LI>
<LI CLASS="SpecialBullet">Point 2, line 1<BR>Point 2, line 2</LI>
</UL>


On the page, it will look like this:

  • Point 1, line 1
    Point 1, line 2
  • Point 2, line 1
    Point 2, line 2




Spacing between bullets and lists

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:

  • This is the first point, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    • This is the first subpoint, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    • This is the second subpoint, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • This is the second point, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • This is the third point, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • This is the fourth point, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla


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:

<UL>
<LI STYLE="margin-bottom:5px">This is the first point, bla...
<UL>
<LI STYLE="margin-bottom:5px">This is the first subpoint, bla...</LI>
<LI STYLE="margin-bottom:5px">This is the second subpoint, bla...</LI>
</UL>
</LI>
<LI STYLE="margin-bottom:5px">This is the second point, bla...</LI>
<LI STYLE="margin-bottom:5px">This is the third point, bla...</LI>
<LI STYLE="margin-bottom:5px">This is the fourth point, bla...</LI>
</UL>


When shown, it looks like this on the page:

  • This is the first point, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    • This is the first subpoint, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    • This is the second subpoint, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • This is the second point, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • This is the third point, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • This is the fourth point, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla


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:

<LI STYLE="margin-bottom:5px">Her er det andet underpunkt, bla...</LI>
</UL>
</LI><BR>
<LI STYLE="margin-bottom:5px">This is the second point, bla...</LI>


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:

<UL>
<LI STYLE="margin-bottom:5px">This is the first point, bla...
<UL STYLE="margin-bottom:15px">
<LI STYLE="margin-bottom:5px">This is the first subpoint, bla...</LI>
<LI STYLE="margin-bottom:5px">This is the second subpoint, bla...</LI>
</UL>
</LI>
<LI STYLE="margin-bottom:5px">This is the second point, bla...</LI>
<LI STYLE="margin-bottom:5px">This is the third point, bla...</LI>
<LI STYLE="margin-bottom:5px">This is the fourth point, bla...</LI>
</UL>


On the page, it looks like this:

  • This is the first point, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    • This is the first subpoint, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
    • This is the second subpoint, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • This is the second point, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • This is the third point, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  • This is the fourth point, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla


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

<UL>
<LI STYLE="margin-bottom:5px">This is the first point, bla...
<UL>
<LI STYLE="margin-bottom:5px">This is the first subpoint, bla...</LI>
<LI STYLE="margin-bottom:15px">This is the second subpoint, bla...</LI>
</UL>
</LI>
<LI STYLE="margin-bottom:5px">This is the second point, bla...</LI>
<LI STYLE="margin-bottom:5px">This is the third point, bla...</LI>
<LI STYLE="margin-bottom:5px">This is the fourth point, bla...</LI>
</UL>


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:

<LI STYLE="margin-bottom:5px">This is the second subpoint, bla...</LI>
</UL>
<BR></LI>
<LI STYLE="margin-bottom:5px">This is the second point, bla...</LI>

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.