How to design lists in HTML code

1 of 4

by Lime Red Tetrahedron

Created on: February 15, 2009 Last Updated: February 23, 2010

Effective presentation of information is the goal of any website. Accessibility of data can be improved through a variety of data abstraction and organizational methods. One of these methods is the list, a simple method used to organize data which logically falls into this category. Lists are very simple to implement in html code, and add flair to any web site design. There are two types of lists in html - ordered and unordered lists, which differ only in how each item is bulleted (delineated). In this article, we will explore how to implement both types of lists, as well as suggest some possible uses for each.

Using the Unordered List Structure in HTML

The simplest way to illustrate list use in html is with a simple example. Copy the following example into a text file, name it "example1.html", and open it in a web browser:

<html>

<head><title>Lists in HTML - Example 1</title></head>

<body>

<h1>Example Unordered List in HTML</h1>

<ul>

<li>This is the first Element</li>

<li>This is the second Element</li>

<li>This is the third Element</li>

<li>This is the fourth Element</li>

<li>This is the fifth Element</li>

<li>This is the sixth Element</li>

</ul>

</body>

</html>

In this example, the <ul> tag specifies the beginning of the list. "Ul" stands for "unordered list" - a list in which each element is not preceded by a number indicating its position. Each <li> tag specifies an element of the list. Elements are displayed in the order in which they appear in the html source.

How the Unordered List Appears to the End User

So, you may wonder, what exactly does an unordered list look like to the end user? To answer that question, each item in the list is delineated by a simple bullet. No numbering is used to mark the position of each element in the list (hence 'unordered'). Here is an example of how such a list may appear:

- This is the first Element

- This is the second Element

- This is the third Element

... and so on. If you would prefer to have some indication as to the order of list elements (useful when a list spans a great many pages), look ahead to the 'ordered' list.

Using the Ordered List Structure in HTML

An ordered list is remarkably similar to an unordered list. The only real difference is that the list elements are preceded by an identifying number.

Below are the top articles rated and ranked by Helium members on:

How to design lists in HTML code