HTML Lesson 10: List

1
33

Introduction

HTML List is useful in creating the bullets. A list can be ordered list <ol> or unordered list <ul>. To start each list use <li> tag.

An HTML lists are of three types

  • Unordered List
  • Ordered List
  • Definition List

Following is a basic demonstration of of HTML List.

Source Code Output
  • List item 1
  • List item 2
  • List item 2

Unordered – List

Unordered list <ul> appears in a bullet points. By default a bullet appears in black circle/dot.

Source Code Output
List of Cars

  • Ford Mustang
  • Mercedes Benz
  • BMW

Unordered List Types

You can change the List type of Unordered list from Bullets to disc, square or circle for example type=”disc” is use for unordered disc list type.

List Type Output
Disc List of Cars

  • Ford Mustang
  • Mercedes Benz
  • BMW
Square List of Cars

  • Ford Mustang
  • Mercedes Benz
  • BMW
Circle List of Cars

  • Ford Mustang
  • Mercedes Benz
  • BMW
none List of Cars

  • Ford Mustang
  • Mercedes Benz
  • BMW

Ordered – List

Ordered list <ol> appears in a numbers instead of bullets.

Source Code Output
Subcontinents

  1. Asia
  2. Africa
  3. Eurpoe

Ordered List Type

You can change the List type of Ordered list from numbers to letter (uppercase and lowercase), roman (uppercase and lowercase)for example: type=”a” is use for Ordered lowercase letter list type.

List Type Output
Lowercase letter Subcontinents

  1. Asia
  2. Africa
  3. Eurpoe
Uppercase Letter Subcontinents

  1. Asia
  2. Africa
  3. Eurpoe
Uppercase Roman Numbers Subcontinents

  1. Asia
  2. Africa
  3. Eurpoe
Lowercase Roman Numbers Subcontinents

  1. Asia
  2. Africa
  3. Eurpoe

Definition – List

Definition list is a list of terms with description. It contain three tags i.e. description list <dl> and term <dt>, and the description <dd>.

Source Code Output
Car
– an atutomobile
Subcontinent
– a large landmass

Nested – List

You can create a nested list (lists inside lists). Here is a simple demonstration of it

Source Code Output
  • Sports Car
  • Car
    • Audi
    • BMW
  • Subcontinents

Summary

  • HTML List can be unordered, ordered and definition list.
  • <ul> represents unordered list.
  • type attribute is use to change unordered and ordered list type.
  • <ol> represents ordered list.
  • <li> to create a list item.
  • <dl> element defines a definition list.
  • <dt> element defines the definition term.
  • <dd> element defines the definition data.
  • Lists can be Nested inside lists.

Next Lesson

In the next lesson you will learn about HTML Tables.

.

1 COMMENT

Leave a Reply