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>

Assurbanipal

possible duplicate of Best practice for provding a caption, title or label for a list in HTML – Industrialism

Why you haven't accepted an answer? The top one was good! – Associate

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.

Suberin

The margin-left is really arbitrary, and is whatever you think would look best. The best way to handle this would likely be with global styling, such as: ul { margin-left: 0px; } ul li { margin-left: 16px; font-size: 16px; } ul:before { content:attr(aria-label); font-size:120%; font-weight:bold; display:block; margin-left:-16px; } Again, note that the negative margin is completely arbitrary, and you could position and style the header in any way that makes sense for your site's designs. – Suberin

Thanks. In my case I wanted to avoid having to specify a numeric margin at all (because I didn't specify margins in the beginning) but wanted the heading to just cancel the additional margin of li and be aligned with things outside ul. – Viyella

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

Sheryl

but i'm using <h3> somewhere else in same page in bold style. and how to make relation between list and heading like table and caption – Assurbanipal

although ur answer looking good but will wait some more suggestion – Assurbanipal

Sure: that’s what the class is for on the <h3>, to give you a hook to style it differently. There’s no way in HTML 4 to actually associate the <h3> and the <ul>. HTML5 has sectioning elements (<section>, <article>) that wrap associated content. The nearest in HTML 4 is <div>. – Sheryl

@Paul. Since you mention HTML5, do you think that "figure" might be more appropriate than "section"? Then the h3 would become "figcaption". – Scarlettscarp

Ooh, hadn’t heard of <figure> yet. I’d guess that in the example given in the question, the list is part of the document’s normal flow, and wouldn’t make much sense if removed. Thus it doesn’t sound like the description of what figure is for: “...illustrations, diagrams, photos, code listings, etc, that are referred to from the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content” (See dev.w3.org/html5/spec/Overview.html#the-figure-element). Complete judgment call though. – Sheryl

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.

Piperidine

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.

Gray

but how screen reader will know first li is heading of all other li – Assurbanipal

@Jitendra: You could use an "aria-labelledby" attribute on the ul to point to the first li to inform screen readers of the relationship. – Scarlettscarp

The heading is not part of the list and should not be li. – Cestus

Answer 5

Would the use of <caption> be allowed?

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

Phenomenal

Simple search query return <caption\>'s documentation resource claiming that <caption\> is only used in tables. – Forkey

Answer 6

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.

Merl

My question is not "Which heading level should be used"? – Assurbanipal

Yup: the <h3> in my answer is just an example. In HTML 4, you’d use whatever heading level is appropriate at that point in the document. (Whereas in HTML5, you’d throw a <section> around it, stick in an <h1>, and get on with your life.) – Sheryl