BEC112

Internet Programming
CHAPTER 4: HTML LISTS
 HTML Lists

What are HTML Lists?

• Lists are used to group together related pieces of information, so they are clearly associated with each
other and easy to read.
• In modern web development, lists are important elements, frequently used for navigation as well as
general content.
• Lists are good from a structural point of view as they help create a well-structured and more accessible
document.
• They are also useful because they provide specialized elements to which you can attach CSS styles.

2024 LECTURER: TAPIWA J MUDHARA 2

 Html List Advantages

• Flexibility: If you have to change the order of the list items in an ordered list, you simply move around
the list item elements; when the browser displays the list, it will be properly ordered.
• Styling: Using an HTML list allows you to style the list properly using CSS. The list item tags are different
from the other tags; you can specifically target CSS rules to them.
• Semantics: HTML lists give the content the proper semantic structure. This has important benefits, such
as allowing screen readers to tell users with visual disabling that they are reading a list, rather than just
reading out a text and numbers.

2024 LECTURER: TAPIWA J MUDHARA 3

 List Types

HTML provides elements for marking up three types of lists:

• Unordered list: used to group a set of related items in no particular order
• Ordered list: used to group a set of related items in a specific order
• Description list: used to display name and value pairs such as terms and definitions
All list elements (the lists themselves and the items that go in them) are displayed as block elements by
default, which means that they start on a new line and have some space above and below. Each list type
has a specific purpose and meaning in a web page.

2024 LECTURER: TAPIWA J MUDHARA 4

 Unordered Lists

Unordered (bulleted) lists are used when a set of items can be placed in any order such as names,
components, thoughts, or options as unordered lists. In fact, most lists fall into this category. An example is
a shopping list:
• Milk
• Bread
• Butter
• Coffee beans

2024 LECTURER: TAPIWA J MUDHARA 5

 Unordered Lists

By default, unordered lists display with a bullet before each list item, CSS can be used to change the bullet
to one of several default styles. To identify an unordered list, mark it up as a ul element. The opening <ul>
tag goes before the first list item, and the closing tag </ul> goes after the last item. Each item in the list
marked up as a list item li, the opening tag <li> and enclosing tag </li>, For example:
<ul>
<li>bread</li>
<li>coffee beans</li>
<li>milk</li>
<li>butter</li>
</ul>

2024 LECTURER: TAPIWA J MUDHARA 6

 The Target Attribute

By default, unordered lists display with a bullet before each list item, CSS can be used to change the bullet
to one of several default styles.

Style Description

list-style-type:disc The list items will be marked with bullets (default)

list-style-type:circle The list items will be marked with circles

list-style-type:square The list items will be marked with squares

list-style-type:none The list items will not be marked

2024 LECTURER: TAPIWA J MUDHARA 7

 Example

For example the code below would append square bullets to the list.

<UL style = "list-style-type:square">

<LI>Apples</LI>
<LI>Oranges</LI>
<LI>Bananas</LI>
</UL>

2024 LECTURER: TAPIWA J MUDHARA 8

 Ordered Lists

Ordered (numbered) lists are used to display a list of items that should be in a specific order. An example
would be cooking instructions:
1. Gather ingredients
2. Mix ingredients together
3. Place ingredients in a baking dish
4. Bake in oven for an hour
5. Remove from oven
6. Allow to stand for ten minutes
7. Serve

2024 LECTURER: TAPIWA J MUDHARA 9

 Ordered Lists

Ordered lists are defined with the ol element (<ol> and </ol>). The browser automatically inserts numbers before ordered list
items, so there is no need to number them in the source document. This makes it easy to rearrange list items without
renumbering them. For example:
<ol>
<li>Gather ingredients</li>
<li>Mix ingredients together</li>
<li>Place ingredients in a baking dish</li>
<li>Bake in oven for an hour</li>
<li>Remove from oven</li>
<li>Allow to stand for ten minutes</li>
<li>Serve</li>
</ol>

2024 LECTURER: TAPIWA J MUDHARA 10

 Ordered Lists

Ordered lists can be displayed with several sequencing options that can be changed by CSS. The default
in most browsers is decimal numbers, but there are others available:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

2024 LECTURER: TAPIWA J MUDHARA 11

 Start Attribute

A common requirement in ordered list usage is to get them to start with a number other than 1. This is
done using the start attribute, which takes a numeric value. This is useful if there is a need to break up a
single list of items with a note or other related information.

2024 LECTURER: TAPIWA J MUDHARA 12

 Start Attribute Example

<ol>
<li>Gather ingredients</li>
<li>Mix ingredients together</li>
<li>Place ingredients in a baking dish</li>
</ol>
<p>Note:Before bake the ingredients, preheat the oven to 180 degrees for the next
step.</p>
<ol start="4">
<li>Bake in oven for an hour</li>
<li>Remove from oven</li>
<li>Allow to stand for ten minutes</li>
<li>Serve</li>
</ol>

2024 LECTURER: TAPIWA J MUDHARA 13

 Description Lists

Description lists associate specific names and values within a list such as questions and answers, articles
and authors, ingredient list and their descriptions, or any other terms and their information. Description
lists can associate more than one value with a single name, or vice versa, but there must be at least one
name and at least one value in each pair, For example:
coffee
a beverage made from coffee beans
a cup of coffee
a medium to dark brown colour

2024 LECTURER: TAPIWA J MUDHARA 14

 Description Lists

Or, associate more than one name with the same value. This is useful to show variations of a term, all of
which have the same meaning:
soda
7-Up
cola
a sweet, carbonated beverage

2024 LECTURER: TAPIWA J MUDHARA 15

 Description Lists

Or, associate more than one name with the same value. This is useful to show variations of a term, all of
which have the same meaning:
soda
7-Up
cola
a sweet, carbonated beverage

2024 LECTURER: TAPIWA J MUDHARA 16

 Description Lists

Description list is defined with the dl element (<dl> and </dl>). The names of a dl marked up as dt elements (<dt> and </dt>).
While the dd element (<dd> and </dd>) marked up their respective values. A simple description list of single names with single
values would look like as example below:
<Body>
<h2> List of Single Names with Single Values </h2>
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
</Body>

2024 LECTURER: TAPIWA J MUDHARA 17

 Example 1

Description list is defined with the dl element (<dl> and </dl>). The names of a dl marked up as dt elements (<dt> and </dt>).
While the dd element (<dd> and </dd>) marked up their respective values. A simple description list of single names with single
values would look like as example below:
<Body>
<h2> List of Single Names with Single Values </h2>
<dl>
<dt>Bread</dt>
<dd>A baked food made of flour.</dd>
<dt>Coffee</dt>
<dd>A drink made from roasted coffee beans.</dd>
</dl>
</Body>

2024 LECTURER: TAPIWA J MUDHARA 18

 Example 2

In the following example, more than one value is associated with a name, and vice versa.

<dl>

<dt>HTML</dt>

<dt>XML </dt>

<dd>Defines the structure of Web site.</dd>

<dd>Using a variety of tags.</dd>

<dt>CSS </dt>

<dd>Describe how that content should look.</dd>

<dt>JavaScript </dt>

<dd>Add interactivity to web pages.</dd>

<dd>Add behaviors to web pages.</dd>

<dt>PHP</dt>

<dt>ASP.Net</dt>

<dd>Server-side scripting language.</dd>

</dl>

2024 LECTURER: TAPIWA J MUDHARA 19

 Nesting Lists

unordered and description lists. It is useful for things like tables of contents that contain sub-sections, such
as:
1. Chapter One
a. Section One
b. Section Two
c. Section Three
2. Chapter Two
3. Chapter Three

2024 LECTURER: TAPIWA J MUDHARA 20

 Nesting Lists

<ol>
<li>Chapter One
<ol >
<li>Section One</li>
<li>Section Two </li>
<li>Section Three </li>
</ol>
</li>
<li>Chapter Two</li>
<li>Chapter Three </li>
</ol>

2024 LECTURER: TAPIWA J MUDHARA 21

 Nesting Lists

• Nested lists are quite useful, and often form the basis for navigation menus, as they are a good way to
define the hierarchical structure of the web site. They are also very flexible, as either ordered or
unordered lists can be nested inside either ordered or unordered list items.
• Although theoretically you can nest lists to any level, but in practice it can become confusing to nest lists
too deeply. For very large lists, it is better off splitting the content up into several lists with headings
instead. A good rule is, don’t nest lists deeper than three levels.

2024 LECTURER: TAPIWA J MUDHARA 22

 Activity

In this Activity you will create a series of lists to practise your HTML list-building skills.
1. Create list.html file in Notepad.
2. Underneath the text, create three lists as follows:
a. List one should be a circled bulleted (i.e. unordered) list, using square bullets, giving the days of the
week.
b. List two should be a numbered list of the months of the year. Make the numbers lowercase roman
numerals.
c. List three should be a definition list of the four seasons.
3. Save the file and view it in your Web browser to ensure that it displays as desired.
4. Reload format.html in Notepad and create a new bulleted list showing the four seasons. Within each season
create a numbered sub list of the appropriate months of the year.
5. Save the file and load it in your Web browser to examine the document

2024 LECTURER: TAPIWA J MUDHARA 23

Thank you

Tapiwa J Mudhara

[email protected]

www.hit.ac.zw