Quick Tip: How To Set The Start Number In An Ordered List

This is one of those tips that you read and think to yourself, “That’ll come in handy at some point!” Then you go off about your business, and when the time comes, you’ve completely forgotten about my little nugget of wisdom. Shame on you.

So, in order to prevent such a disastrous outcome, I want you to bear the following in mind: if you forget this tip and later come to need it, Tom from WPMU will find you, and he will slap you upside the head.

Now that we have that out of the way, I have a handy little tip for you – memorable too!

You may have read an article I posted about a week ago – From WordPress Beginner To Blogging Rockstar: 28 Awesome Tips. It was the one with the totally rockin’ dude at the top. You know it.

Anyway, I wanted to present a numbered list, but I had sub-headers within the list. Now I could have enclosed my <h2> tags within my <ol> tag, but then the margins of my headers aligned with the text in the numbered list. I am a fussy type, and I didn’t want that to be the case. So I decided instead to create separate lists, place headers in-between, and manually set the start number for each list (with exception to the first), so that the numbering remained constant. How did I do that?

Simple – like this:

{code type=html}

<ol start=”4″>

<li>Let’s get our list on!</li>

</ol>

 

And as if by magic:

4. Let’s get our list on!

Ta da! Believe it or not, whilst the “start” attribute was deprecated in HTML 4.01, it made a return for HTML 5.0. And quite bloody right too, as it is a practical and useful attribute.

For the clever clogs who are going to say that I could have used CSS to re-set the margin of my sub-headers whilst retaining the numbering of the list, I say “na na na, I’m not listening”. Seriously though, you could do it that way and put forward a good argument for doing so. However, there are plenty of other practical applications for manually setting a start number, so the advice still stands!

HTML5 icon courtesy of W3

Tags:

• HTML