html lists

Origninally html and it's various derivatives were meant to be a means to reproduce  research and academic text.
A consequence of this was, that care was taken to ensure that specific elements, lists and tables were implemented and able to handle the tasks they serve.

There are three different types of List defined in html these are Ordered lists, or more commonly know as Numbered lists
Then there are Unordered lists, or more commonly know as Bullet lists, and then Definition lists these are used as term and definition pairs.

On this page we will look at the basics for the three types of lists, and we will also look at the various formatting and syntax possibilities for lists in html.
All the lists in html share similar elements and follow the structure in the example below.

Definition lists are slightly different in their syntax this is because they have an item tag  ( <dt>  "definition item" ) and it also has a definition description tag  ( <dd> )

To create a list you need a list opening tag,  and a corresponding closing tag,  and then each individual item in the list needs opening and closing tags
The display format of each type of list is shown below.

• An ordered list precedes its items with a letter or a number.
• An unordered list precedes its items with a Bullet.
• A definition list has two pieces one for each item, these are term and definition items.
• Ordered lists can have their items preceded by the following:
  • Arabic numbers.
  • Roman numerals (Upper and/or Lowercase).
  • Letters (Upper and Lowercase).
  • Numerous other language specific numbers and letters.
• Unordered lists can have their items preceded by the following:
  • Several styles of bullets (filled circle, open circle, square, ect).
  • Images

There is more information on each type of list in the relevant sections of the page below.

To create an ordered list you use the ordered list tags,  to delimit the entire list, they look like this <ol>  </ol>.
Then, each item on the list is delimited with list item tags  which look like this <li>  </li>.
The elements or items in an ordered list are preceded by a number or a letter these are meant to provide a sequence or order to the list.
An example of this where the reader is taken step by step through a process or activity, which may resemble something like the example below of an ordered list.

Downloads:

Download the ordered list example. Download the source code in a text file.

Top of page

In the example above all the list elements are preceded by an Arabic number, this is the default in html for ordered lists.
You can specify a different identifier to preced the list items, using CSS styles, either directly or indirectly.
This can also be done directly with an attribute, in this manner <ol type="I"> this would cause the items in the list to be preceded with upper case Roman numerals.
It is much better practice to use CSS styles to achieve this effect the CSS style that is applied to the list in the example below will cause the list items to be preceded with an uppercase letter.

Downloads:

Download the uppercase list example. Download the source code in a text file.

The list-style-type property for ordered or numbered lists supports the following values.

• decimal
• decimal–leading–zero
• lower–roman
• upper–roman
• lower–greek
• lower–alpha
• lower–latin
• upper–alpha
• upper–latin
• hebrew
• armenian
• georgian
• cjk–ideographic
• hiragana
• katakana
• hiragana–iroha
• katakana–iroha
• none

Some of the list–style–types are font–dependent, meaning they are only supported by certain fonts.
If you wanted to use a type such as hiragana with a latin–based font the results will not be what you intended.

Ordered lists also support the list-style-position property this controls where the character or the number preceding the item appears, inside the margin or outside the margin, the default value is outside.
In the code snippet below the style that is applied will move the character to the inside of the margin, the style is applied to the the <ol> tag.

Downloads:

Download the list position example. Download the source code in a text file.

Both styles can be applied together, separate each style with a space as illustrated in the code snippet below.

Top of page

Unordered lists in html are very similar to ordered or numbered lists in syntax, the exception being they use bullets, instead of putting numbers or letters before each of the items in the list.
Unordered lists use the unordered list tags  which look like this <ul>  </ul> they delimit the entire list.
The list item tags  are then used to delimit each of the individual list items, they look like this <li>  </li>.
The items in an unordered or Bulleted list are preceeded by a small round filled bullet this is the default for unordered lists in html
A bulleted list is used when we want to provid a nonsequential list of items, this could be any simple list, for example this could be a list of food items in a shopping list like the one in the code example below.

Downloads:

Download the unordered list example. Download the source code in a text file.

Top of page

The unordered lists also support the list-style-type property, these are the values.

• Disc
• Circle
• Square
• None

The example snippet of code below illustrates how to change the bullet type by applying a CSS style to the opening list tag  <ul>.

Downloads:

Download the bullet type example. Download the source code in a text file.

Unordered lists also support the list-style-position property, which controls where the bullet appears, either outside or inside the margin.
In the example snippet of code below the CSS style is applied to the opening list tag <ul>.
This will cause the bullet to appear inside the margin.

Downloads:

Download the bullet position example. Download the source code in a text file.

Unordered lists also support one other type of bullet for each list item, an image, but it must fit the following criteria.

• The image is appropriately sized  to be used as a bullet.
• The image must also be of a suitable format for the web for instance .jpg, .png or .gif
• The most important thing is that the image is available via HTTP and must be deliverable from the same web server as the document or another web server.

To use an image as a bullet in an unordered list you need to specify the image by using the list-style-image property, the syntax for this property is illustrated in the example snippet of code below.

Downloads:

Download the bullet image example. Download the source code in a text file.

By using this property you can use specialty bullets that actually match the content to add dimension to standard list bullets.
The image that you use must be scaled down to a "bullet" size and also optimized and saved in a web firiendly format too, also they must be saved to the root directory on the server with the document.

There are a few references online  ect, that state that the closing </li> tags  are not really necessary in a list, eventhough many browsers will render the list without them, when you validate your code it will fail especially if you use the Strict DTD to validate the document.

Top of page

Downloads:

Download the definition list example. Download the source code in a text file.

Definition lists are more complex than the other types of lists, this is because they have two elements to each of the list items.
These two items are the item term and a definition, however the implementation of the definiton list is a little simpler because there are fewer formatting options.
A definiton list uses <dl> </dl> tags  to delimit the entire list.
The term part of the item element is delimited by the <dt> </dt> tags.
Then the definition part of the item element is delimited by the <dd> </dd> tags.
This is illustrated by the example of code for a definition list below.
To see the code example below rendered in a browser click on this link definiton list.

Top of page

Downloads:

Download the definition style example. Download the source code in a text file.

In order to add some clarity to your definiton lists, you will want to construct styles that specify a differnt font, font colour, or textual style ect.
For instance if you wanted to make all the definition terms red, bold and italic, applying the style below would accomplish this.
To see the code example below rendered in a browser click on this link definiton list style.

This type of style syntax construct is used when the style is applied via a class or the elements id, all the style examples so far have been directly applied to the elements tags  inline.
You can find more information here about creating style rules

Top of page

It is possible to nest lists of different types inside each other, as an example you may have a bulleted list and you need a numbered list beneath one of the items in the bulleted list.
At the top of the page the description of the list tags  is an example of a nested list the list is a bulleted list with two bulleted list nested inside it
The example below is an orderd list nested within a bulleted list.
To see the code example below rendered in a browser click on this link nested lists.

Downloads:

Download the nested list example. Download the source code in a text file.

You can find more information at the W3Schools web site on lists

	Enter your search terms Submit search form
	Web www.syntaxsandbox.co.uk