The Web Design Survival Guide

Part 1 | Getting Started

3. HTML Lists

This section of the guide introduces HTML Lists. HTML Lists are commonly used to structure information in Web design. HTML Lists are also used to create menus and navigation links. It is important to have a basic understanding of these elements before moving on to more complex topics in Web page design and Web page layout.

– “You make mistakes. Mistakes don’t make you.”

2. CSS Overview

Home
Part 1 | Getting Started | 3. HTML Lists

HTML LISTS

HTML LISTS | HTML Example 4
HTML Lists are an important element in Web Design and are used for a wide variety of purposes. Therefore, the beginner should become familiar with HTML lists early in the learning process.

The <ul> tag defines an Unordered List in HTML and displays bullets by default.

The <ol> tag defines an Ordered List in HTML and displays numbers by default.

The <li> tag defines a List Item in HTML and are nested inside <ul> or <ol> tags.

The inline-style-type CSS property can define the <ul> tag list marker style:

<ul style=”list-style-type:disc“>
(List Items display a bullet – default value)

<ul style=”list-style-type:circle“>
(List Items display a circle bullet)

<ul style=”list-style-type:square“>
(List Items display a square bullet)

<ul style=”list-style-type:none“>
(List Items display no marker))

The type attribute can define the <ol> tag list marker style:

<ol type “1“>
(List items are numbered with numbers – default value)

<ol type “A“>
(List items are numbered with uppercase letters)

<ol type “a“>
(List items are numbered with lowercase letters)

<ol type “I“>
(List items are numbered with uppercase roman numerals)

<ol type “i“>
(List items are numbered with lowercase roman numerals)

Note: Lists can also be nested inside other lists to create sub lists. This is known as a “UL Tree” and is often used to create website navigation links and menus when styled with CSS. This will be covered in more detail later in this guide.

HTML Example 4

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title of the document</title>
</head>
  <body data-rsssl=1>
    <ul>
     <li>Unordered list item default</li>
     <li>Unordered list item default</li>
     <li>Unordered list item default</li>
    </ul>
    <ul style="list-style-type:circle">
     <li>Unordered list item with the circle property</li>
     <li>Unordered list item with the circle property</li>
     <li>Unordered list item with the circle property</li>
    </ul>
    <ul style="list-style-type:square">
     <li>Unordered list item with the square property</li>
     <li>Unordered list item with the square property</li>
     <li>Unordered list item with the square property</li>
    </ul>
    <ul style="list-style-type:none">
     <li>Unordered list item with the none property</li>
     <li>Unordered list item with the none property</li>
     <li>Unordered list item with the none property</li>
    </ul>
    <ol>
     <li>Ordered list item default</li>
     <li>Ordered list item default</li>
     <li>Ordered list item default</li>
    </ol>
    <ol type="A">
     <li>Ordered list item with "A" attribute</li>
     <li>Ordered list item with "A" attribute</li>
     <li>Ordered list item with "A" attribute</li>
    </ol>
     <ol type="a">
     <li>Ordered list item with "a" attribute</li>
     <li>Ordered list item with "a" attribute</li>
     <li>Ordered list item with "a" attribute</li>
    </ol>
    <ol type="I">
     <li>Ordered list item with "I" attribute</li>
     <li>Ordered list item with "I" attribute</li>
     <li>Ordered list item with "I" attribute</li>
    </ol>
    <ol type="i">
     <li>Ordered list item with "i" attribute</li>
     <li>Ordered list item with "i" attribute</li>
     <li>Ordered list item with "i" attribute</li>
    </ol>
  </body>
</html>

Live Demo | Result:

Title of the document

Unordered list item default
Unordered list item default
Unordered list item default

Unordered list item with the circle property
Unordered list item with the circle property
Unordered list item with the circle property

Unordered list item with the square property
Unordered list item with the square property
Unordered list item with the square property

Unordered list item with the none property
Unordered list item with the none property
Unordered list item with the none property

Ordered list item default
Ordered list item default
Ordered list item default

A. Ordered list item with "A" attribute
B. Ordered list item with "A" attribute
C. Ordered list item with "A" attribute

a. Ordered list item with "a" attribute
b. Ordered list item with "a" attribute
c. Ordered list item with "a" attribute

I. Ordered list item with "I" attribute
II. Ordered list item with "I" attribute
III. Ordered list item with "I" attribute

i. Ordered list item with "i" attribute
ii. Ordered list item with "i" attribute
iii. Ordered list item with "i" attribute

Part 1 | Getting Started

HTML LISTS

HTML Example 4

Questions?