CODEWITHSUNDEEP
htmlcssoutliner
user54636
user54636

Reputation: 1

Multi-level numbered headings in HTML5 for outlining the document

So I am writing a manual in html5, and it's going to need numbering.

Just to be difficult, the manual will have tables and images, so they will need to be numbered, also eg

"Fig 4.03 A cat. Most of the images on the internet are of cats."

Also, there are lots of process lists in the manual. It would be nice if these were numbered under the subheadings eg

4.05 A simple process

4.05.01 Pull a leaf from the tree
4.05.02 Eat it
4.05.03 Now you are a caterpillar
4.05.04 Turn into a beautiful butterfly

I've been researching the different ways to number my headings, subheadings, figures, and lists. I'm finding answers, just not good answers.

imperfect solution 1: use CSS counters

These can't be copied to editing programs (word etc) They also apparently don't work with screen-readers

imperfect solution 2: Use ordered lists

These won't 'fail gracefully' afaik - if all my headings are a 'heading' class of ordered list, They will just look like a plain list without CSS.

Has someone solved this problem already? What's the solution?

Super extra kudos for anyone who can supply a smart way of auto-updating my figure cross references!

Upvotes: 0

Views: 1419

Answers (1)

unor
unor

Reputation: 96607

Use text.

<h3>4.01: the first point you need to know about some stuff</h3>

The numbering is not just styling (you might want to reference these numbers, right?), so a CSS solution is out of question.

Using ol can work in some cases, but it has many drawbacks:

  • You don’t want to use an ol for your whole document, do you?
  • User-agents don’t have to render any numbers at all.
  • Many user-agents will not allow to search for or copy the numbers.
  • You can’t get the exact kind of numbering scheme you want to have (e.g., nested ol typically don’t render a delimiter like . but start again with the first value).

Upvotes: 1

Related Questions