<ol>with Headings & Descriptions

What is the correct way to code a list where the headers must be numbered?

[jdnnj]

I need to create a page on a site that has the headers as the numbered list items with descriptive text below. The numbers that are generated by the browser need to be styled as the headers are, not as the description text.

<ol>
<li><h2>header</h2>
Descriptive text goes here</li>
<li><h2>header</h2>
Descriptive text....

Do I need to style the entire list as the header tag then using span or <p> tags, reverse that styling to appear as the normal text?
Ideally I need a numbered <dl> I believe.

[zollerwagner]

Hello,

I don't think you can wrap two different block elements around each other like that.

You may want to look at these CSS properties. I've never used them, but they appear to be pretty powerful. You'll want to test, since I'm not sure how widely supported they are.

counter
counter-increment
counter-reset
content
:after
:before
quotes

Of course, a simpler option might be to number the h1 elements by hand. <h1>1</h1>, etc.

BTW, if you have no significant content in your H1 elements, you may be missing out on a search engine optimization opportunity.

[g1smd]

I think this might help:

<ol class="theclass">
<li>
<h2> ... </h2>
<p> ... </p>
</li>
<li>
<h2> ... </h2>
<p> ... </p>
</li>
</ol>

Each List-Item contains a Heading and a Paragraph.

You can access these elements using these selectors in the CSS file:

ol, li { the style info; }
.theclass h2 { the style info; }
.theclass p { the style info; }

Notice that there is a comma in the ol, li entry but NOT in the other entries.

It validates. It is semantic.

You only need one "class="whatever" attribute for the whole construct.

[zollerwagner]

My goodness, you're right! I've never seen an example of a list used like that. Thanks for the illumination, g1smd.

[g1smd]

The key is this little-known, but most useful, CSS selector:

.theclass p { thestyle; }

which allows you reach deep into nested elements and style one type of element, using the class of the container element.

The class is not applied directly to the internal element. The class is inherited from "higher up".

This does away with the HTML code bloat that you would otherwise have:

<ol>
<li>
<h2 class="whatever"> ... </h2>
<p class="whatever"> ... </p>
</li>
<li>
<h2 class="whatever"> ... </h2>
<p class="whatever"> ... </p>
</li>
</ol>

with the class repeated over and over again. The CSS is slightly simpler, just:

h2.whatever { thestyle; }
p.whatever { thestyle; }

I feel it is far better to add an extra line in the CSS file, than to repeat something dozens of times in the HTML.

.

Using my first example, you simply apply the class to the bigger container, then reach inside it with that special .theclass p CSS selector. That's a lot more efficient.

[jdnnj]

Thanks all for the tips.
g1smd, I was actually attempting what you were suggesting, I just was messing up the text sizes somehow. I guess the only foolproof way is to use fixed font sizes for the elements?
Also I had looking into the counter and :before rules but they are not well supported yet though seem to be something useful for the future.
Upon really looking at the content in this instance the solution I came up with was to just eliminate the numbering as it was really quite arbitrary and the last section was an "other". People tend to want to number lists though if they will not be referred to by number or require a specific sequence then I don't believe numbering is semantically correct.

[Bonusbana]

I would go even further in the cascade and do this:

<ol>
<li>
<h2> ... </h2>
<p> ... </p>
</li>
<li>
<h2> ... </h2>
<p> ... </p>
</li>
</ol>

ol, li { the style info; }
ol li h2 { the style info; }
ol li p { the style info; }

That is one way of doing it. The other way wich I prefer is (if you can live without automatic numbering):

<dl>
<dt>Heading</dt>
<dd>Description</dd>
<dt>Heading</dt>
<dd>Description</dd>
</dl>

Then style it as:
.dt { header style; }
.dd { description style; }

[g1smd]

That too. There is always more than one way to code things; and, as time goes on, you'll find ever more efficient ways to do things.

If you don't beieve me then just look at something you did just a year or two ago, and see that there are loads of things in there that you would now do quite differently.