From virtualMV2015wiki
Jump to: navigation, search


There are times when you want to add a list of terms or references to your page.

We can do this either as an unordered (bulleted)

  • cat
  • dog
  • mouse

or ordered (numbered) list.

  1. Family
  2. Work

Icon Objective.png

Objective : Lists

By the end of this page you will be able to:

  • Add ordered and unordered lists to a web page
  • Change the bullet style and start numbering


The syntax is as follows:

  • For an unordered (bulleted) list the tags <ul> and </ul> surround the list
  • For an ordered (numbered) list the tags <ol> and </ol> surround the list
  • <li> and </li> are used for each line in the lists

So full syntax for a list is as follows;

  <li>List Item 1</li>
  <li>List Item 2</li>

Which will produce

  • List Item 1
  • List Item 2

and for an ordered list;

<p>My priorities</p>

Which will produce

My priorities

  1. Family
  2. Work
  3. study

Ordered List attributes

Html also has a selection of other list types. These are listed below.

Table: HTML list types
HTML tag list numberingDescription
<ol> 1) 2) 3) 4)
<ol type = i> i) ii) iii) iv) Roman numerals (lowercase)
<ol type = I> I) II) III) IV) Roman numerals (uppercase)
<ol type = a> a) b) c) d) Lowercase letters
<ol type = A A. B. C. D. Uppercase letters

For example;

<ol type = "I">
  <li>List Item 1</li>
  <li>List Item 2</li>
  1. List Item 1
  2. List Item 2

The starting value of the list can be changed using the start attribute

For example;

<ol start="4">
  1. Golf
  2. Tennis

Unordered list (Bullet) attributes

You can change the look of the bullets using the type attribute

Disc	<ul type="disc">
Circle	<ul type="circle">
Square	<ul type="square">

or using styles

Disc	<ul style="list-style-type:disc">
Circle	<ul style="list-style-type:circle">
Square	<ul style="list-style-type:square">



Icon Activity.png Activity: Lists Create a new web page links.htm as..

<title>**’s search engine links</title>
<h2>**’s search links</h2> 
<h3>New Zealand</h3>
  <li><a href = "">accessnz</a></li>
  <li>NZ Search Guide</li>
  <li>Microsoft bing</li>

Save then viewing in the web browser this should look something like;

**’s search links

New Zealand

  • accessnz
  • searchnz
  • NZ Search Guide


  1. google
  2. Microsoft bing
  3. yahoo

Now add the <a href..> tags to link to the search engines.

  • For example
    <li><a href = ""> google</a></li>

    URL's are


    Icon References.png References

    HTML/XHTML:Lists. (2017). In virtualMV's ( Michael Verhaart ) wiki. Retrieved December 18, 2017, from    (zotero)