What would be the best method to code heading/title for <ul> or <ol>, Like we have <caption> in <table>?

Question

What would be the best method to code heading/title of <ul> or <ol>? Like we have <caption> in <table>. and we don't want to make them bold

Example image:

This is ok

<p> heading </p>
<ul> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

or always headings should be used?

<h/3/4/5/6> heading </h/3/4/5/6>
<ul> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

Answer 1

Always use heading tags for headings. The clue is in the name :)

If you don’t want them to be bold, use CSS, e.g.

HTML:

<h3 class="list-heading">heading</h3>

<ul> 
    <li>list item </li>
    <li>list item </li>
    <li>list item </li>
</ul>

CSS

.list-heading {
    font-weight: normal;
}

In HTML5, you can associate the heading and the list more strongly by using the <section> element. (<section> doesn’t work properly in IE without some JavaScript though.)

<section>
    <h1>heading</h1>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</section>

You could do something similar in HTML 4:

<div class="list-with-heading">
    <h3>Heading</h3>

    <ul>
        <li>list item </li>
        <li>list item </li>
        <li>list item </li>
    </ul>
</div>

Then style thus:

.list-with-heading h3 {
    font-weight: normal;
}

Answer 2

how about making the heading a list-element with different styles like so

<ul>
 <li class="heading">heading</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
 <li>list item</li>
</ul>

and the CSS

ul .heading {font-weight: normal; list-style: none;}

additionally, use a reset CSS to set margins and paddings right on the ul and li. here's a good reset CSS. once you've reset the margins and paddings, you can apply some margin on the list-elements other than the one's with the heading class, to indent them.

Answer 3

h3 is absolutly a better solution than h2, h1 or h6 !

1/ You have to use specific level : if you're in a h1, use h2, if you're in a h5, use h6 (if you're in a h6... hum, use strong or em for exemple). It not a obligation but a question of accessibility (http://tinyurl.com/ylm4oqn, green part).

2/ You don't have to give title to list... because this element it doesn't exist. So screen reader will not use something special.

Therefore, using Hn is probably one of the best solution, but surely not a specific level.