How to Format Lists for Your Web Page on the Raspberry Pi

By Sean McManus, Mike Cook

When creating a web page on the Raspberry Pi, you will likely need to know how to format a list. Lists are used more than you might think to communicate information, so there’s a standard way of formatting them using HTML.

There are two different types of list: an ordered list and an unordered list. An ordered list is used for items that must be in a particular order, such as step-by-step instructions for putting up a shelf.

An unordered list is used for items that could be in any order, such as a checklist of things to pack for a holiday. Ordered lists are shown onscreen with a number beside each item, and unordered lists appear with a bullet point beside them, although you can use CSS to change the presentation of lists. You can use links or any other HTML in each list item.

This web page has two lists on it. The list of photography tips would be an unordered list because the tips make sense in any order. Its HTML looks like this:

<h2>My top tips for travel photography</h2>
 <li>Always have a camera with you, even if it's a small pocket one.</li>
 <li>Whenever possible carry a spare fully-charged battery.</li>
 <li>Label your SD cards so you can tell them apart.</li>

You use the <ul> and </ul> tags to mark the start and end of the unordered list, and the <li> and </li> tags to mark the start and end of each list item. When you put this HTML in your web page and view it in your browser, the tips have bullets beside them.

[Credit: The Midori browser is written by Christian Dywan with artwork by Nancy Runge]
Credit: The Midori browser is written by Christian Dywan with artwork by Nancy Runge

The other list on this web page is less obvious. Most websites have a navigation bar on every page, a standardized set of links that enable you to move around all the pages on the site. From the point of view of HTML, that’s just a list of links. So to make a navigation bar, create a list to the different web pages the site will have, like this:

 <li><a href="index.html">Home</a></li>
 <li><a href="galleries.html">Galleries</a></li>
 <li><a href="tips.html">Photography tips</a></li>
 <li><a href="contact.html">Contact</a></li>

The first link is a link to the page they’re already on, which might seem illogical, but it’s less confusing to have exactly the same set of links on every page, than it is to have links appearing or disappearing in the navigation bar from page to page.

For now, that will look like a bulleted list at the top of the web page, but you can transform it into a proper navigation bar using CSS later.

If you want to create ordered lists, just change the <ul> and </ul> tags for <ol> and </ol> ones. When you look at an ordered list in your browser, you’ll see the bullets are replaced with numbers. You can test that by editing your unordered list temporarily to make it an ordered list, saving it and viewing the page in your browser.