Outline numbering

Freshness Warning
This blog post is over 18 years old. It's possible that the information you read below isn't current and the links no longer work.

Site membership agreements and other legal documents typically use outline numbering. Outline numbering can be accomplished on the Web by using nested ordered lists and a bit of CSS. Nest ordered lists several levels deep and then simply define a list style for each level of the list.

    <li>Item 1</li>
    <li>Item 2
            <li>Sub paragraph 1
                     <li>Ad nauseum</li>

And the CSS would be:

&lt;style type="text/css">
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: lower-roman; }

August 8, 2003 2:12 AM

If you want to be standard-compliant there is a problem. You have to nest each sublist in a li element to validate. This create an ugly effect on numeration that continues on the fake li. So you have to use more css to restore the right numeration, I haven't yet tried, I only nest unordered list. They are simpler ;) Sorry for my rusted english

Adam Kalsey
August 8, 2003 8:43 AM

In my example each item is nested in an LI. The numbering problem is avoided because the sublist is nested directly inside its parent item. That's the way you're supposed to do it, not create a new list item for your child lists. This validates as XHTML 1.1. http://validator.w3.org/check?uri=http%3A%2F%2Fkalsey.com%2Ftools%2Fcss%2Foutline.html&charset=%28detect+automatically%29&doctype=Inline&ss=1&verbose=1

Scott Johnson
August 8, 2003 1:40 PM

This seems like an interesting method for creating outlines. Do you have a sample page that employs the technique?

Adam Kalsey
August 8, 2003 1:50 PM

Clint Laskowski
August 11, 2003 9:34 AM

If you use HTML-Kit, there is a plugin called "IncludeHTML" at http://rosenlundnielsen.dk/software/product_includehtml.php. IncludeHTML can be set to automatically number outlines, up to four levels deep.

October 13, 2004 5:09 PM

It seems that most HTML tutorials don't address one obvious question: Is it possible, using HTML ordered lists, to create an outline menu like this: 1. fdsag   1.1. gsag   1.2. fsada 2. gfehtr   2.1. hytjytr     2.1.1. gweht   2.2. hgfdh ... etc.... If not, is there some appropriate way to do it (other than cheating by typing the numbers directly)? Thanks, Luis

This discussion has been closed.

Recently Written

The Trap of The Sales-Led Product (Dec 10)
It’s not a winning way to build a product company.
The Hidden Cost of Custom Customer Features (Dec 7)
One-off features will cost you more than you think and make your customers unhappy.
Domain expertise in Product Management (Nov 16)
When you're hiring software product managers, hire for product management skills. Looking for domain experts will reduce the pool of people you can hire and might just be worse for your product.
Strategy Means Saying No (Oct 27)
An oft-overlooked aspect of strategy is to define what you are not doing. There are lots of adjacent problems you can attack. Strategy means defining which ones you will ignore.
Understanding vision, strategy, and execution (Oct 24)
Vision is what you're trying to do. Strategy is broad strokes on how you'll get there. Execution is the tasks you complete to complete the strategy.
How to advance your Product Market Fit KPI (Oct 21)
Finding the gaps in your product that will unlock the next round of growth.
Developer Relations as Developer Success (Oct 19)
Outreach, marketing, and developer evangelism are a part of Developer Relations. But the companies that are most successful with developers spend most of their time on something else.
Developer Experience Principle 6: Easy to Maintain (Oct 17)
Keeping your product Easy to Maintain will improve the lives of your team and your customers. It will help keep your docs up to date. Your SDKs and APIs will be released in sync. Your tooling and overall experience will shine.


What I'm Reading


Adam Kalsey

+1 916 600 2497


Public Key

© 1999-2022 Adam Kalsey.