Lists

Discussion

We've already encountered lists in the general discussion about writing good HTML. The subject was raised there because it's common to find that lists are ignored in favour of some bodged construction which barely serves.

Well formed HTML lists can include pretty much anything—headings and paragraphs, images, tables, etc.—in fact any block-level or inline element can be embedded in a list, which makes them a powerful but easy way to add meaningful structure into a document when the content demands that sort of order. Not just one element but several can be included in each list item.

The reason lists are so ignored is because they can be tricky to get right, especially when several lists are nested one within the other. The reason they're tricky is that how they work is not understood, and it helps to have the tools for the job. We intend to clarify how to go about making lists, but it might take some concentration.

Types of list

Unordered lists

  • Unordered lists are sometimes known as bullet lists
  • Use unordered lists for lists which don't need to enumerated
  • The code for simple lists is quite straightforward
  • Unordered lists can be used to contain longer passages of text too
  • Lists can be nested within other lists of the same or different type

Ordered lists

  1. Ordered lists number each item automatically
  2. There are no numbers in the code so moved items don't need re-numbering
  3. Ordered lists can be short or long
  4. Ordered lists can be used to number sections of a document
  5. Lists can be nested within other lists of the same or different type

Definition lists

Definition lists take a slightly different form to ordered and unordered lists and have a page to themselves.

While definition lists are clearly lists, just what counts as a definition is open to debate. There's little in the official documentation to give us a clue. In the main it's used poorly, often to force a marginal alignment (I've done it myself) since the usual default style is to indent the description.

Definition lists consist of any number of definition terms <dt></dt> and definition descriptions <dd></dd> all within an overall definition list tag <dl></dl>.

Technique

[to come]

Uses

[to come]

Footnotes