Lists
Lists are used extensively on the HSE web and Intranet sites. They are used in the 'normal' sense, to create bulleted list and are also used for navigation and glossary type layout pages.
See also:
Types of normal bulleted list
- A generic list item.
[class=""]
- second list item
- A list item from a list of checkpoints
[class="tick"]
- second list item
Writing lists
Lists can are declared using the <ul> tag (or by setting "bullets" in a WSYIWYG editor). To declare a list of the non-default type, set the lists class to one of the list types. e.g:
See list links for more details about placing links in lists.
- An ordinary bulleted list. This the default, use this most of the time.
A link will take the default style.
<ul>
- This is a tick list, use this when listing a series of affirmatives.
<ul class="tick">
- This is a cross list, use this when listing a sseries of negatives or prohibitions.
<ul class="listcross">
List items
Every list item (bullet) must be enclosed in "<li>" tags. e.g:
- <li>Oranges</li>
- <li>Apples</li>
- <li>Pears</li>
Valid XHTML requires this discipline.
Nested Lists
It is possible to nest lists with List items. The markup for the following list is shown in the right hand column.
- List item 1
- List item 2, with sub list:
- List item 2.1
- List item 2.2
- List item 2.3
- List item 2.3.1
- List item 2.3.2
- List item 2.4
- List item 3
<ul>
<li>List item 1</li>
<li>List item 2, with sub list:
<ul class="listarrow">
<li>List item 2.1</li>
<li>List item 2.2</li>
<li>List item 2.3
<ul class="download">
<li>List item 2.3.1</li>
<li>List item 2.3.2</li>
</ul>
</li>
<li>List item 2.4</li>
</ul>
</li>
<li>List item 3</li>
</ul>
Be careful with nested lists - they can get very fiddly.
