HTML supports three types of lists: ordered; bulleted (unordered); and definition. Sub-lists, one list inside of another, are supported.
I have used and seen the first two, ordered and bulleted, types of list used extensively on websites. However definition lists appear to be rarely used.
Bulleted Lists
A bulleted list of items is defined using the <ul> </ul> tag pair.
Each item in the list is defined using the <li></li> tag.
Historically it was possible to only use the opening list item tag. The browser would know when the next item would start and render the list correctly. It is now considered to be bad practise not to include the closing tags when required and can be considered as a negative mark against the site regards SEO. It is better to include the closing tags. You will know for sure then where the list item ends and avoid confusion when you look at the code in a few months time and prevent unexpected rendering.
The example below shows a simple list of 3 countries with the default rendering,
<ul> <li>Italy</li> <li>Switzerland</li> <li>Nepa</li>l </ul>
- Italy
- Switzerland
- Nepal
A list can also be placed within another list. In the example below some of the Nepalese mountains are shown. Note that this list of mountains is placed within the Nepal list item, its closing tag appearing afterwards.
<ul> <li>Italy</li> <li>Switzerland</li> <li>Nepal <ul> <li>Annapurna</li> <li>Dhaulagiri</li> <li>Kanchenjunga</li> </ul> </li> <li>Austria</li> </ul>
- Italy
- Switzerland
- Nepal
- Annapurna
- Dhaulagiri
- Kanchenjunga
- Austria
Numbered Lists
The numbered list is similar in implementation to the unordered list. The only change to be made is in the wrapping tag <ul> becomes <ol>. Thus the numbered list is defined using the <ol> </ol> tag pair.
No change is required regards the list item tags.
The example below is the seconds example from above changed to numbered items.
<ol> <li>Italy</li> <li>Switzerland</li> <li>Nepal <ol> <li>Annapurna</li> <li>Dhaulagiri</li> <li>Kanchenjunga</li> </ol> </li> <li>Austria</li> </ol>
- Italy
- Switzerland
- Nepal
- Annapurna
- Dhaulagiri
- Kanchenjunga
- Austria
Definition Lists
Definition lists comprise a title together with the associated description, which is then shown on the next line. Most website authors use a series of headings, followed by content in paragraphs, rather than making use of the definition list.
<dl> <dt>Italy</dt> <dd>Country in southern Europe</dd> <dt>Nepal</dt> <dd>Country in Asia</dd> </dl>
Italy Country in Southern Europe Nepal Country in Asia
Customisation
Lists can be customised using CSS to change the padding associated with an item and to change the styling of the bullets used.
UL Attributes
Attributes can be added to the ul tag to change how it is rendered. A list of the parameters, together with their associated values and a description of each is given in the table below.
| Attribute | Description |
|---|---|
| id | Giving the list a unique identifier allows it to be referenced either in CSS or by JavaScript. Note only one item on a web page can have the same id. |
| lang | Configuring a list against a particular country will cause the browser to render some of the content, for example quotation marks, according to the rules for that country. |
| class | Classes are used to enable CSS to be applied to the list. More than one class can be assigned, separating each class with a space. For example <ul class=”transport cars”> |
| clear | The clear parameter can be used to cancel the floats defined in the preceding tags. It can also be used to move the list down until a prescribed minimum space is available, for example. |
| plain | This removes the bullet from the list item. the attribute has no parameters, appearing on its own <ul plain> |
| src | Use this attribute to specify an image for the bullet. |
| md | Allows the specification of an MD5 checksum, ensuring that the image specified by the src attribute is the correct one. |
| dingbat | Dingbats are icons as originally listed under HTML3. It replaces the bullet image. |
| wrap | Determines whether the list should wrap horizontally or vertically. Specifying wrap=”vert” will list the items in a number of columns, as determined by the browser and the user agent. |
| compact | This attribute could be used to reduce the spacing between list items. However, it was better to realise this through the use of CSS which is more flexible in the options available.. Not supported under HTML5. |
| type | The type attribute can be used to specify the type of bullet used. There are three types available: disc, circle and square.Example <ul type=”square”> item 1 item 2 item 3 |
OL Attribute
As with the unordered lists attributes can be added to the ol tag to change how it is rendered. A list of the attributes, together with associated values is given in the table below. reversedThis is a new attribute, introduced in HTML5. It is used to indicate that the list is descending.
| Attribute | Description |
|---|---|
| id | The id is a means to uniquely identify the list. |
| start | This allows the starting number to be defined. for example to start at 9 Example <ol start=”9″> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> item 1 item 2 item 3 |
| type | Rather than using numbers for the sequence letters and Roman numerals can be used. Whilst a useful sounding attribute it is not supported in HTML5. It has been replaced by CSS or the use of the style attribute.E xamples of its use are: <ol type=”i”> <ol type=”a”> |
| class | Classes are used to apply CSS styling to the list. More than one class can be included, separated by a space, for example <ol class=”fruit month”> |
| clear | sdf |
CMS Editors
The editors used by CMS websites typically provide the option to add lists. For example the WordPress editor has an icon for each of ordered and unordered, with drop down options for the type of bullet and the use of Roman, Greek and alpha characters.
It is usual for the editor to understand that a double return after the last list item signifies the end of the list.
If the presentation of your CMS editor list has gone wrong, select the source HTML view of the content and look for the list content.
Work through the list to ensure that it has the correct opening tags <ol> & </ol> or <ul> & </ul>. Ensure that the individual list items are wrapped with their opening and closing tags <li> & </li>
