HTML / CSS autonumber headings?

Question

Is there a way (ideally easy) to make headings and sections autonumber in HTML/CSS? Perhaps a JS library?

Or is this something that is hard to do in HTML?

I'm looking at an application for a corporate wiki but we want to be able to use heading numbers like we always have in word processors.

Answer 1

Could possibly be done either serverside or with JavaScript. Don't know about any premade scripts that does it though.

Impossible to do with HTML/CSS, at least - unless you manually add all numbers into your headings.

Answer 2

It is possible to implement auto numbering using HTML itself using ordered lists, and nesting them if necessary. Below there is a link to a live example of this, example I found after a fast search on Google.

http://archive.corewebprogramming.com/Chapter2/Nested-Ordered-Lists.html

There is also an possibility to use Unordered Lists and CSS as shown in this example:

http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/

Hope this helps, Constantin TOVISI

Answer 3

The simplest method would be Numbered Lists

<ol>
<li> Section
    <ol>
      <li>Nested one</li>
      <li>Nested two</li>
    </ol>
</li>
<li>Section</li>
<li>Section</li>
<li>Section</li>
<ol>

will be something like:

1. Section
   I. Nested one
   II. Nested two
   
2. Section
3. Section
4. Section

Answer 4

See this other question if you're wondering how to do it in CSS, the answer might be what you are looking for. But titel has a good proposition too, depending how your HTML document is made.

// Edit:

It should be noted that, as Triptych said in another comment, this is of interest only if it's for an internal tool where you have control over which browsers are used and using CSS is worth it because modifying the HTML would be hard for example. Support of this CSS feature is limited.

It would of course be easy to use something like jQuery to do the increment also. Something like this untested snippet:

$(document).ready(function() {
  $('h1').each(function(index) {
    $(this).html((index + 1) + '. ' + $(this).html());
  });
});

Don't forget to include the jquery.js file in your document of course.

Answer 5

Definitely possible using css counters - just make sure you watch out for browser compatibility...:

This will make h2 get 1., 2., h3 gets 1.1, 2.1, 2.2 etc...

{style}
   body{counter-reset: section}
   h2{counter-reset: sub-section}
   h3{counter-reset: composite}
   h4{counter-reset: detail}

   h2:before{
     counter-increment: section;
     content: counter(section) " ";
   }
   h3:before{
     counter-increment: sub-section;
     content: counter(section) "." counter(sub-section) " ";
   }
   h4:before{
     counter-increment: composite;
     content: counter(section) "." counter(sub-section) "." counter(composite) " ";
   }
   h5:before{
     counter-increment: detail;
     content: counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) " ";
   }
   {style}

As lpfavreau says, it's the same as another question I believe.

Also note that using css will not change the heading (e.g. selected text will give you the heading without the numbers). This may or may not be desirable. lpfavreau's (accepted) answer will give you the jquery code to modify the heading text.

Answer 6

Lists do it, why not other elements? http://www.w3.org/TR/CSS2/generate.html#scope

Answer 7

<ol>
  <li>Heading 1</li>
  <li>Heading 2</li>
  <li>Heading 3</li>
</ol>