Lists

Lists of information

Demo

API

Tags

Name Type Content
ul Native element <li> children
ol Native element <li> children
dl Native element <dt> and <dd> children

Attributes

Name Value Description

For ul only:

type
  • disc default
  • square
  • circle
  • none
Sets the marker type

For ol only:

type
  • 1 default
  • A
  • a
  • I
  • i
Sets the marker type
reversed Boolean attribute Reverses the order of items
start Number Sets the starting number

Guidelines

Lists are for lists

List elements are meant for content that is a list. It's tempting to overuse these for layout, so take time to think about some better alternatives to list elements that could be used. One common alternative for navigation is this:

Accessibility

Use the correct list parent elements for your use case, i.e. ol when the list order is meaningful and ul when it isn't.