HTML Tags Web development basics

HTML Lists

HTML Lists are used to display items in a list, or ones in relation to one another.

Unordered Lists

Unordered list represents items not in order. The list begins with <ul> tag. All list items are contained in <li> tag.List items ares marked with bullets disc (by default).
Example

  • Blue
  • Black
  • Green
  • Red
  • Pink

Unordered HTML Lists -Change the list marker

The CSS list-style-type property or the HTML attribute type of <ul> tag can be used to define the style of the list marker. The values can be:-

Value Description
disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

Example- Square

  • Blue
  • Black
  • Green
  • Red
  • Pink

Example -Circle

  • Blue
  • Black
  • Green
  • Red
  • Pink

Example -none

  • Blue
  • Black
  • Green
  • Red
  • Pink

Ordered List

Ordered list beings with <ol> tag. Items are contained in <li> tag.List items are marked with numbers by default.

  1. Blue
  2. Black
  3. Green
  4. Red
  5. Pink

Ordered HTML Lists-change the list marker

the type attribute of <ol> tag is used to define the list marker. The values can be:

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

Example-Uppercase letters

  1. Blue
  2. Black
  3. Green
  4. Red
  5. Pink

Example- lowercase letters

  1. Blue
  2. Black
  3. Green
  4. Red
  5. Pink

Example- lowercase roman numbers

  1. Blue
  2. Black
  3. Green
  4. Red
  5. Pink

Example- uppercase roman numbers

  1. Blue
  2. Black
  3. Green
  4. Red
  5. Pink

Description list

List with items having description. The <dl> tag defines a description list. <dt> defines the terms, and < dd> holds the description.
Example:

Coffee
Black hot drink
Milk
– white cold drink

Nested HTML Lists

List can be contained inside another list, this is called nesting of lists.
Example:

  1. Blue
  2. Black
    • Blue
    • Black
    • Green
    • Red
    • Pink
  3. Red
  4. Pink