如何在语义上为 HTML 中的列表提供标题、标题或标签

There is no caption-like tag for a list like a table has. So I'd just give it an <Hx> (x depending on your previously used headers).

While there is no caption or heading element structuring your markup effectively can have the same effect. Here are some suggestions:

Nested List

<ul>
<li>
Fruit
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Organge</li>
</ul>
</li>
</ul>

Heading Prior to List

<hX>Fruit</hX>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>

Definition List

<dl>
<dt>Fruit</dt>
<dd>Apple</dd>
<dd>Pear</dd>
<dd>Orange</dd>
</dl>

As far as I know, there are no provisions in current HTML specs for providing a caption for a list, as there are with tables. I'd stay with using either a classed paragraph, or a header tag for now.

<h3>Fruit</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>

In the future, when HTML5 gains wider adoption, you will be able to use the <legend> and <figure> tags to accomplish this slightly more semantically.

See this post on the W3C mailing list for more information.

Option 1

HTML5 has the ABC0 and figcaption elements, which I find work quite nicely.

Example:

<figure>
<figcaption>Fruit</figcaption>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
</figure>

These are then easily styled with CSS.

Option 2

Using CSS3's ::before pseudo-element can be a nice solution:

HTML:

<ul title="Fruit">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>

CSS:

ul[title]::before {
content: attr(title);
/* then add some nice styling as needed, eg: */
display: block;
font-weight: bold;
padding: 4px;
}

You can, of course, use a different selector than ul[title]; for example, you could add a 'title-as-header' class and use ul.title-as-header::before instead, or whatever you need.

This does have the side effect of giving you a tooltip for the whole list. If you don't want such a tooltip, you could use a data attribute instead (e.g., <ul data-title="fruit"> and ul[data-title]::before { content: attr(data-title); }).

You can always use <label/> to associate label to your list element:

<div>
<label for="list-2">TEST</label>
<ul id="list-1">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<label for="list-2">TEST</label>
<ol id="list-2">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>

To ensure screen readers connect the list to an associated heading, you could use aria-labelledby connected to a heading with an id like so:

<h3 id="fruit-id">Fruit</h3>


<ul aria-labelledby="fruit-id">
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>

As noted in a previous answer, make sure your heading level follows heading order in your document.

I know this is old but wanted to add the answer that I found for future people: https://www.w3.org/MarkUp/html3/listheader.html

use the <lh> element:

<ul>
<lh>Types of fruit:</lh>
<li>Apple</li>
<li>Orange</li>
<li>Grape</li>
</ul>

Since I was trying to find a solution with older browser support, I have what might be an over-simplified solution. Using table display styles and ids/classes:

    <ul>
<li id="listCaption">My List</li>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>

Then apply the display: table-row; style to the element in CSS:

    li#listCaption {
display: table-row;
font-size: larger;
text-decoration: underline; }

This works much better if you are using a description list, which is what I was doing when I had the same question. In that case, you can use <div> in the HTML and display: table-caption; in CSS, as div elements are supported within the dl list:

    <dl>
<div id="caption">Table Caption</div>
<dt>term</dt>
<dd>definition</dd>
</dl>

In CSS you can apply various styles to the caption:

    #caption {
display: table-caption;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
background: transparent;
caption-side: top;
text-align: center; }

I should note that table-caption does not work as well in ul/ol as it is treated as a block element and the text will be aligned vertically, which you probably don't want.

I tested this in both Firefox and Chrome.

<ul>
<p>YOUR CAPTION</p>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

It works. But i'm not sure that is the best way, i'm just a beginner