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.

Is this okay?

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

Or should headings always be used?

<h3|4|5|6>heading</h3|4|5|6>
<ul>
  <li>list item</li>
  <li>list item</li>
  <li>list item</li>
</ul>

Answer 1

Though this is old, I'm updating it for others who might find this question when searching later.

@Matt Kelliher:

Using the css :before and a data-* attribute for the list is a great idea, but can be modified slightly to be more handicap accessible as well:

HTML:

<ul aria-label="Vehicle Models Available:">      <li>Dodge Shadow</li>     <li>Ford Focus</li>     <li>Chevy Lumina</li> </ul> 

CSS:

ul:before{     content:attr(aria-label);     font-size:120%;     font-weight:bold;     margin-left:-15px; } 

This will make a list with the "header" pseudo element above it with text set to the value in the aria-label attribute. You can then easily style it to your needs.

The benefit of this over using a data-* attribute is that aria-label will be read off by screen readers as a "label" for the list, which is semantically correct for your intended use of this data.

Note: IE8 supports :before attributes, but must use the single colon version (and must have a valid doctype defined). IE7 does not support :before, but Modernizer or Selectivizr should fix that issue for you. All modern browsers support the older :before syntax, but prefer that the ::before syntax be used. Generally the best way to handle this is to have an external stylesheet for IE7/8 that uses the old format and a general stylesheet using the new format, but in practice, most just use the old single colon format since it is still 100% cross browser, even if not technically valid for CSS3.

Answer 2

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

If you don’t want them to be bold, change their style with CSS. For example:

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; } 

You can associate the heading and the list more explicitly by using the <section> element, if they comprise a section of the document:

<section class=“list-with-heading”>     <h3>heading</h3>      <ul>         <li>list item </li>         <li>list item </li>         <li>list item </li>     </ul> </section> 

Then style thus:

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

Answer 3

I like to make use of the css :before and a data-* attribute for the list

HTML:

<ul data-header="heading"> 
<li>list item </li>
<li>list item </li>
<li>list item </li>
</ul>

CSS:

ul:before{
    content:attr(data-header);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

This will make a list with the header on it that is whatever text is specified as the list's data-header attribute. You can then easily style it to your needs.

Answer 4

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.