How to add lists of text to your website

In HTML, there are two kinds of list: ordered lists, in which each successive item is identified by a number or letter (e.g. 1, 2, 3... or A, B, C...), and unordered lists, where each successive item has the same list marker (e.g. bullet point, arrow etc.).

Ordered and unordered lists

Ordered lists are enclosed inside opening <ol> and closing </ol> ol tags, while unordered lists use <ul> and </ul> ul tags. By default, ordered lists will be numbered. You can change this though by declaring a 'type' in the opening <ol> tag. For example, type="A" will set the list increments as uppercase letters, while type="I" will set the list increments to roman numerals.

<ol type="A">
</ol>

Type the contents of your list on successive lines inside the opening and closing tags. Each new list item should be enclosed between opening <li> and closing </li> li tags. The li tag is used regardless of whether it is an ordered or unordered list. For example, the following code demonstrates how to create an unordered list detailing different species of tree (note we have assigned the list a class of 'species_list' for styling purposes):

<ul class="species_list">
    <li>Coral Tree</li>
    <li>Chestnut Tree</li>
    <li>Jellyfish Tree</li>
    <li>Poke-Me-Boy Tree</li>
    <li>Quiver Tree</li>
</ul>

Styling lists

To style a list, you can refer to the list tag (ul or ol) in your 'main.css' stylesheet and modify its properties in the usual way. For example, the following CSS code will modify the list style and line-height of all unordered lists on the webpage:

ul {
    list-style-type: circle;
    line-height: 0.2em;
}

Alternatively, you can apply style instructions to selected lists only by assigning the list a class. For example, the following CSS code applies style instructions only to lists that belong to the class species_list:

.species_list {
    list-style-type: circle;
    line-height: 0.2em;
}

The above CSS code modifies the list style type and line-height properties. Below we will explore what these properties mean in a little more detail:

• list-style-type - This property applies to unordered lists and determines whether the list item marker is a bullet point ('disc'), circle ('circle'), square ('square') or nothing at all ('none').

• line-height - Sometimes you may notice the gap between each list item is quite large. You can reduce this by setting the line-spacing property to a small value such as 0.2em.