Skip Navigation.

NWE Help: Web: Authoring: HTML: Lists

NWE Home :: Help :: Web :: Authoring :: HTML

Ordered and Unordered Lists

There are several list types available in HTML. The main two are ordered (numbered) and unordered lists (bulleted). Both of these require the list item tag <li> </li> for each list item. See the examples below.

The ORDERED LIST tag <OL> </OL> is used to create a numbered list to display your list text.

The Code and the Way it Appears on a Webpage

<OL>
<LI>List item 1
<LI>List item 2
<LI>List item 3
<LI>List item 4
</OL>
  1. I am the first!
  2. I am the second!
  3. The Third!
  4. And so on!

The UNORDERED LIST tag <uL> </uL> is used to create a bulleted list to display your list text:

<uL>
<LI>Bullet
<LI>Bullet
<LI>Bullet
<LI>Bullet Again!
</uL>
  • bulleted
  • again
  • same
  • same

Definition Lists

Definition Lists align one word to be flushleft and then have a section below for the text, which is indented slightly to the right. This is a handy way to offer instructions, or to provide definitions, hence the name.

<dL>
<dt>title </dt>
<dd>text
</dd>
<dd>Text here
</dd>
</dL>

 ............
Title or word
Definition area - lots of space to type here and to see how this works. It really looks great if you bold the word or words within the DT tag because of the contrast.
Title or word
Definition area - lots of space to type here and to see how this works. It really looks great if you bold the word or words within the DT tag because of the contrast.

Replacing Standard Bullets With Graphic Bullets

You can use graphic bullets to replace the standard text bullets by using the "Definition List" tag. <DL>

<DL>
<DD><IMG SRC="yourimage.gif">List Item one</DD>
<DD><IMG SRC="yourimage.gif">List Item two</DD>
<DD><IMG SRC="yourimage.gif">List Item three</DD>
<DD><IMG SRC="yourimage.gif">List Item four</DD>
</DL>

This works out to look like this:

List Item 1
List Item 1
List Item 1
List Item 1

Changing the type of Bullet in Lists

To change the type of bullet used in an unordered list, add the type attribute to the unordered list tag: <ul type="disc" >

type="disc"
Solid circular bullets; this is the default value.

type="square"
Solid square bullets.

type="circle"
Hollow circular bullets.

Changing the Numbering Style on an Ordered List

To change the type of ordering in an ordered list, add the type attribute to the unordered list tag: <<ol type="a" >/P>

type="a"
Orders the list by lowercase letters (i.e. a, b, c, d).

TYPE="A"
Creates a list ordered by capital letters (i.e. A, B, C, D).

TYPE="I"
Creates a list ordered by capital Roman numerals (i.e. I,II, III, IV).

type="i"
Creates a list ordered by lower-case Roman numerals (i.e. i, ii, iii, iv).

type="1"
Creates a list ordered by digits (i.e. 1, 2, 3, 4, this is the default).

Back: Anchors
Next: Color