[html5] connecting ol elements

Brian Tremblay webmaster at tsmchughs.com
Mon Mar 31 15:07:49 PDT 2014


It would be nice to link <ol> elements such that the numbering would be 
connected. Then you could place list items in different sections, or put 
non-list things in between them, and have the browser determine the 
correct number for each item.

My suggestion would be something like connecting form labels with form 
controls:

<section>
  <h1>foobar</h1>
  <ol id="beginning">
   <li>foo</li>
   <li>bar</li>
  </ol>
</section>

<section>
  <h1>batbaz</h1>
  <ol liststart="beginning">
   <li>bat</li>
   <li>baz</li>
  </ol>

  <aside>
   <p>
    Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.
   </p>
  </aside>

</section>

<section>
  <h1>bangwhiz</h1>
  <ol liststart="beginning">
   <li>bang</li>
   <li>whiz</li>
  </ol>
</section>

which would give us

foobar
1. foo
2. bar

batbaz
3. bat
4. baz

Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.

bangwhiz
5. bang
6. whiz



Real world page:

http://www.tenmercer.com/recipes/prawns-app

I've used the start attribute to get the numbers right, but found myself 
renumbering them as I moved sections around. Not the end of the world, 
but it seems like this is something browsers could handle pretty easily.

-- 
Brian Tremblay



More information about the Help mailing list