HTML & CSS: The Good Parts

Other Uses for Lists

Lists have two other fairly straightforward uses: outlines and inline serial lists.

Outlines

At its simplest, an HTML outline is nothing more than a series of appropriately nested ordered lists, accompanied by the following styles:

            ol { list-style-type: upper-roman; }
         ol ol { list-style-type: upper-alpha; }
      ol ol ol { list-style-type: decimal; }
   ol ol ol ol { list-style-type: lower-alpha; }
ol ol ol ol ol { list-style-type: lower-roman; }

Outline levels 6–10 repeat the same sequence as needed, though the second pass should probably involve deemphasized type (whether smaller or lighter) in tandem with the default indentation.

Inline Serial Lists

An uncommon but not unheard-of scenario involves the extensive use of the serial comma to separate several items in a list. There are a number of reasons why this approach might be taken in a web document, the most likely being to save space. Almost as likely is an editor’s insistence on seeing that list presented in serial format.

To implement an inline list, place your source paragraph within a div that’s been assigned a class of your choosing and split it on the list, which should leave you with two separate paragraphs separated by a list. Then add the following styles:

.foo p, .foo ul, .foo li { display: inline; }
                 .foo ul { list-style-type: none; }

If the content of each list item ends properly with a comma and a space (or the penultimate “and”, as needed), the result will satisfy both severe editorial and severe semantic ...