What would be the best method for encoding a header / header for <ul> or <ol>, How do we have a <caption> in a <table>?

Question

What would be the best way to encode a <ul> or <ol> header? Like <caption> in <table> , and we don’t want to make them bold.

This is normal?

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

Or should headers 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 key is in the name :)

If you don't want them to be bold, change their style using 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 more clearly associate the title and list with the <section> element. ( <section> does not work properly in IE 8 and earlier without JavaScript.)

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

In HTML 4, you can do something like this:

 <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 this way:

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

Answer 2

Although this is old, I am updating it for others who may find this question when searching later.

@Matt Kelliher:

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

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 a header pseudo-element above it with the text set to the value in the aria-label attribute. Then you can easily adapt it to your needs.

The advantage of this in using the data- * attribute is that the ari-label will be considered a screen reader as a “label” for a list that is semantically correct for your intended use of this data.

Note. . IE8 supports: before attributes, but must use a single version of the colon (and must have a valid doctype type). IE7 does not support: before, but Modernizer or Selectivizr should fix this problem for you. All modern browsers support the old ones: before the syntax, but prefer to use the :: before syntax. Generally, the best way to handle this is to have an external style sheet for IE7 / 8 that uses the old format and a common style sheet using the new format, but in practice most simply use the old colon format, as it is still 100% cross browser even if this is not technically valid for CSS3.

Answer 3

I like to use css :before attribute and data-* for 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 a title on it, which is any text specified as a list data-header attribute. Then you can easily adapt it to your needs.

Answer 4

how to make the title a list item with different styles like

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

and CSS

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

optionally use CSS reset to set margins and shims directly to ul and li. here is a good CSS reset. after you have reset the fields and paddings, you can apply a certain field to the list items other than the fields of the header class to indent them.

Answer 5

h3 is an absolute better solution than h2, h1 or h6!

• You have to use a certain level: if you are in h1, use h2, if you are in h5, use h6 (if you are in h6 ... hum, use strong ones or for example, for example). This is not an obligation, but an issue of accessibility ( here the green part ).

• You do not need to specify a name for the list ... because this element does not exist. Therefore, the screen reader will not use anything special.

Consequently, the use of Hn is probably one of the best solutions, but certainly not a specific level.