Coders' Guidebook

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' tags instead. 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 them as roman numerals.

<ol type="A">
</ol>
listtypes.png

Type the contents of your list on successive lines inside the opening and closing tags. Each new list item is contained within its own opening <li> and closing </li> 'li' tags. The 'li' tag is used regardless of whether it is an ordered or unordered list. Here is an example of how you might create an unordered list of different species of tree for our wildlife and nature blog (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

If you want to style a list then you should first assign it a class (e.g. species_list) in the HTML file. You can then refer to the class in your 'main.css' stylesheet and apply styling instructions. For example, you could style your list like this:

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

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').
listsstyle.png
  • 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.

<<< Previous

Next >>>