Teaching Presentation: HTML Lists

Unordered Lists

HTML markup of an unordered list A rendered unordered list

Tags Used

  • <ul> - Indicates the beginning and end of an Unordered List
  • <li> - Indicates the beginning and end of each List Item

"list-style-type" Attribute

The style of bullet point can be altered as seen in the images below. The types are disc (default), circle, square, and none.

HTML markup of different unordered list styles A rendering of different unordered list styles

Ordered Lists

HTML markup of an ordered list A rendered ordered list

Tags Used

  • <ol> - Indicates the beginning and end of an Ordered List
  • <li> - Indicates the beginning and end of each List Item

"type" Attribute

The numbering style can be altered as seen in the images below. The types are standard numerals (default), upper-case letters, lower-case letters, uppercase Roman numerals, and lower-case Roman numerals.

HTML markup of different ordered list styles A rendering of different ordered list styles

Description Lists

HTML markup of a description list A rendered description list

Tags Used

  • <dl> - Indicates the beginning and end of a Description List
  • <dt> - Indicates the beginning and end of each Term
  • <dd> - Indicates the beginning and end of each term's Definition