Need someone to lead product or development at your software company? I lead product and engineering teams and I'm looking for my next opportunity. Check out my resume and get in touch.

Outline numbering

Freshness Warning
This article is over 16 years old. It's possible that the information you read below isn't current.

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.

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 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

Your comments:

Text only, no HTML. URLs will automatically be converted to links. Your email address is required, but it will not be displayed on the site.


Not your company or your SEO link. Comments without a real name will be deleted as spam.

Email: (not displayed)

If you don't feel comfortable giving me your real email address, don't expect me to feel comfortable publishing your comment.

Website (optional):

Recently Written

A framework for onboarding new employees (May 15)
There’s no single good way to onboard an employee that works for every role. Here's a framework for creating a process that you can adapt to each situation.
TV hosts as a guide for software managers (May 10)
Software managers can learn a lot from journalists or late night TV hosts and how they interview people.
The Improvement Flywheel (Apr 29)
An incredible flywheel for the improvement of a development team. Fix a few things, and everything starts getting better.
Managers and technical ability (Dec 26)
In technical fields, the closer you are to the actual work being done, the closer your skills need to resemble those of the people doing the work.
Dysfunctions of output-oriented software teams (Sep 17)
Whatever you call it, the symptom is that you're measuring your progress by how much you build and deliver instead of measuring success by the amount of customer value you create.
Evaluative and generative product development (Aug 30)
Customers never even talk to the companies that don't fit their needs at all. If the only product ideas you're considering are those that meet the needs of your current customers, then you're only going to find new customers that look exactly like your current customers.
Product Manager Career Ladder (Aug 19)
What are the steps along the product management career path?
Building the Customer-Informed Product (Aug 15)
Strong products aren't composed of a list of features dictated by customers. They are guided by strong visions, and the execution of that vision is the primary focus of product development.


What I'm Reading


Adam Kalsey

+1 916 600 2497


Public Key

© 1999-2020 Adam Kalsey.