What would be the best method to code heading/titl

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

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

In HTML5, you can associate the heading and the list more clearly by using the <section> element. (<section> doesn’t work properly in IE 8 and earlier 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

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 4

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 (Here, 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.

Answer 5

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 6

Would the use of <caption> be allowed?

<ul>
  <caption> Title of List </caption>
  <li> Item 1 </li>
  <li> Item 2 </li>
</ul>