Skip to main content

Section 12 List Calisthenics

Subsection 12.1 Lists, Generally

Use ol to make an ordered list, and ul to make an unordered (bulleted) list. In both cases, use li for each entry. If an entry contains more than one paragraph, then each must be wrapped in p.

This section contains nested lists, to demonstrate how they get assigned labels (numbering, symbols). But we begin with two simple lists, demonstrating an ordered list and an unordered list. See the end of section for an example of a description list. Note in the source the optional use of a paragraph (p) for the list items of the list of colors.

  1. First.
  2. Second.
  3. Third.
  • Red

  • Green

  • Yellow

  • Purple

Next, we have a list with no customization and multiple levels to test the defaults. allows a maximum of four levels of ordered/numbered lists, and a total of six levels if some unordered lists are mixed in. The second-level defaults (lower-case Latin) are formatted slightly different in versus HTML. The HTML style is not easy to adjust, but you can specify the version to match if it is important.Note that to have nested lists you must structure your list items as paragraphs, since a list may only appear within a <p> element.

  1. Level 1, first.

  2. Level 1, second.

    1. Level 2, first.

    2. Level 2, second.

      1. Level 3, first.

      2. Level 3, second.

        1. Level 4, first.

        2. Level 4, second.

        3. Level 4, third.

      3. Level 3, third.

    3. Level 2, third.

  3. Level 1, third.

Items in ordered lists (only) may be be give an xml:id and then may be the target of an xref. We test three here, referencing down into the hierarchy above. Level 1, second: 2. Level 3, second: 2.b.ii. Level 4, third: 2.b.ii.C. Note that if a list item of an ordered list is contained within a list item of an unordered list, then its number will not be defined.

And now a four-level deep unordered list with the default labels supplied by MBX (disc, circle, square, disc). Again, the defalt order for Markdown/Jupyter (disc, square, circle, circle) is different than for and HTML (disc, circle, square, disc)

  • Level 1, first.

  • Level 1, second.

    • Level 2, first.

    • Level 2, second.

      • Level 3, first.

      • Level 3, second.

        • Level 4, first.

        • Level 4, second.

        • Level 4, third.

      • Level 3, third.

    • Level 2, third.

  • Level 1, third.

And a total of six levels with a mix of ordered and unordered lists, the most that out-of-the-box- is able to handle.

  1. Level 1, first.

  2. Level 1, second.

    1. Level 2, first.

    2. Level 2, second.

      • Level 3, first.

      • Level 3, second.

        1. Level 4, first.

        2. Level 4, second.

          1. Level 5, first.

          2. Level 5, second.

            • Level 6, first.

            • Level 6, second.

            • Level 6, third.

          3. Level 5, third.

        3. Level 4, third.

      • Level 3, third.

    3. Level 2, third.

  3. Level 1, third.

Now, nested lists with the defaults replaced by custom choices. First, an ordered list, three deep, upper Roman numerals, then upper-case Latin, then more traditional Arabic numerals on the three elements of the third level. Note the adornments of the labels will be rendered in LaTeX, but not in HTML.

  1. Level 1, first.

  2. Level 1, second.

    1. Level 2, first.

    2. Level 2, second.

      1. Level 3, first.

      2. Level 3, second.

      3. Level 3, third.

    3. Level 2, third.

  3. Level 1, third.

A nested unordered list, with labels given as squares on the outer list and nothing (blank) on the inner lists.

  • Level 1, first.

  • Level 1, second.

    • Level 2, first.

    • Level 2, second.

  • Level 1, third.

A nested ordered list, to test intramural cross-references.

  1. Level 1, first.

  2. Level 1, second.

    • Level 2, first.

    • Level 2, second.

  3. Level 1, third. With a cross-reference to second list item, 2.

  4. Level 1, fourth. Whose number should not change when the knowl just prior is opened.

The next definition is very poorly worded. It is meant to test leading off with a list (bad form), for which normally begins right after the heading.

Definition 12.1 Group
  1. There is a binary operation, denoted “\(\cdot\)”.
  2. The operation is associative.
  3. There is an identity element, \(e\text{.}\)
  4. For every element \(b\text{,}\) there is an element \(c\) (the inverse), such that

    \begin{equation*} b\cdot c=c\cdot b = e\text{.} \end{equation*}

If these conditions are met for a set \(G\text{,}\) then we say \(G\) is a group.

Exercises and References are specialized subdivisions you can put anywhere. They are implemented as top-level lists, so should share behavior. For example, an exercise may have many parts and when expressed as a list, should have the expected labels.

Similarly, References may have lists in their annotations. Unlikely? But possible.

The next two subdivisions are an Exercises subdivision and a References subdivision, which have lists within an exercise and a bibliographic item (respectively).

Subsection 12.2 List Spacing, I

This is a short list that ends a subsection, so can be used to address the necessary spacing. We also test two XML elements separated by a space (which should not go missing).

  1. One item.
  2. Two ducks.
  3. Three items. Plus a few more words to check that long entries in a two column list look good.
  4. Four items.
  5. Another long entry that simultaneously tests that long entries look good in a list, and also tests an odd number of entries in a two column list.

Subsection 12.3 List Spacing, II

This is another short list that ends a subsection, so can be used to address the necessary spacing.

  • Uno item.
  • Dos items.
  • Tres item.
  • Quattro items.

And a paragraph after that list so that spacing can be checked.

Subsection 12.4 Description Lists

Use dl to make a description list. Inside of those tags, use li for each entry. Then, use title to specify the term being described and p to specify the description.

A “description” list has a short term or phrase that is prominent, followed by a short description. It is modeled on the lists of similar structure in both and HTML. It makes for a nice medium-weight way to define terms, somewhere in-between the term tag which just makes a term prominent in a sentence, and a definition, which is set off, has a heading, a number, and a title. Do not try to manage the separation between the title and the description by employing punctuation (but you can include a question-mark or exclamation-point if necessary). For example, do not include a colon to the end of the title. This example is from Bob Plantz.

Central Processing Unit (CPU)

Controls most of the activities of the computer, performs the arithmetic and logical operations, and contains a small amount of very fast memory.

Memory

Provides storage for the instructions for the CPU and the data they manipulate.

Input/Output (I/O)

Communicates with the outside world and with mass storage devices (e.g., disks).

Bus

A communication pathway with a protocol specifying exactly how the pathway is used.

Some presentations can be assisted by a hint from the author about the lengths of the titles. You can choose to provide a width attribute on a dl element with possible values narrow, medium, and wide. Conversion to ignores this attribute, and conversion to HTML only reacts to narrow (medium is the default, and wide behaves identically).

Red

The color of the sun at sunset.

Blue

The color of a clear sky.

Aqua

The color of shallow tropical waters.

Math \(x^2\)

Sorry, not a color but testing titles with math in them.

Subsection 12.5 Named Lists

A list can be wrapped with a <list> element, so that it earns a number, can be given a title and have an introduction and conclusion. Cross-references to individual list items get a bit involved as they are prefixed with the number of the list and then the number of the item, so conceivably you could get a number like 4.5.3:2.a.ii. The colon is used to indicate the transition from the number of the list within divisions and the numbers coming from the list hierarchy, since it has two small dots.

Because the colors are always in the same order, an ordered list is natural here. The colors change continuously, but are often divided up into large ranges that human perception can easily distinguish.

  1. Red

  2. Orange

  3. Yellow

  4. Green

  5. Blue

  6. Indigo

  7. Violet

So some people use the acronym ROY-G-BIV to remember this sequence.

List 12.2 Colors of the Rainbow

This next list is used for testing cross-references to it. See Section 17.

This is the introduction to this named list, which references an item within, via the hybrid @text attribute: Item B.c.

    1. A and i
    2. A and ii
    3. A and iii
    1. B and a
    2. B and b
    3. B and c (target of some cross-references)
    • The next three cross-references point to a list item, just above. It is interesting because the list is named, hence numbered. The global reference uses the full number, while the local reference uses the number from within the list. The hybrid reference recognizes that the target is within the same named list, so the number can be shorter. An identical hybrid cross-reference appears within the <introduction> to this list, an immediately following, but outside the <list>.
    • Cross-reference within named list (global): Item 12.3:B.c
    • Cross-reference within named list (hybrid): Item B.c
    • Cross-reference within named list (local): Item B.c
      1. C and bullet and 1
      2. C and bullet and 2
      3. C and bullet and 3
    • C and bullet
    • C and bullet
List 12.3 A named list of targets

This is a paragraph just outside the preceding named list, which references an item within, via the hybrid @text attribute: Item 12.3:B.c.

This is a paragraph with three lists contained within it. For HTML output we have to “inside-out” the lists.

  1. A one item ordered list.

In other words, the text before, after, and between, needs to each be encapsulated as an HTML p element of its own.

  • A one item unordered list.

Including definition lists.

Define Me

A one item definition list.

That's all!

A one item list, whose item is a paragraph with two contained ordered lists, separated by text.

  • Introductory text.

    1. First item, first list.

    Intermediate text.

    1. First item, second list.

    Concluding text.

Subsection 12.6 Testing List Decompositions

A list in a paragraph is a construction in HTML that browsers try to correct, which leads to unpredictable results, so we have to decompose an author's paragraph with lists into a sequence of HTML paragraphs, interrupted by lists. This subsection is only relevant to HTML output, and only for testing.

  1. This paragraph opens with an ordered list.
  2. Testing the id, and other info that should be at the top of the paragraph.

Now the paragraph continues, and we have an index item here, so we can test cross-references back here.

Subsection 12.7 Exercises (with lists)

1

This exercise should have several parts, and labels should follow the defaults for second-level lists (since the exercise is numbered according to the top-level default).

  1. Exercise 1, first part.

  2. Exercise 1, second part.

    1. Exercise 1, second part, first refinement.

  3. Exercise 1, third part.

2
1111, 2222 3333
aaaa bbbb,cccc
AAAA BBBB CCCC
Table 12.4 Table Alignment Example

This exercise (a list item really) has a table first. Default aligns it vertically above the exercise number. Placement here tests correcting that alignment.

A small test of cross-references to subsidiary parts of exercises. Exercise 1, third part: 12.7.1.c. Exercise 1, second part, first refinement: 12.7.1.b.i.

Subsection 12.8 References (with lists in Annotations)

[1]
  
Some book would be listed here.
Note

Here is the annotation and an ordered list as part of that annotation.

  1. Book 1, first part.
  2. Book 1, second part.
  3. Book 1, third part.