如何义提供一个标题，标题或标签的一个列表中HTML

Question

什么是适当的方式提供一个 语义 标题为HTML名单？例如，下面列出具有"标题是"/"标题".

水果

• 苹果
• 梨
• 橙色

应该如何单词"果"处理，在这种方式，它是语义上的相关名单本身？

Answer 1

同时，没有标题或项元素结构你的标记可以有效地也有同样的效果。这里有一些建议：

嵌套的列表

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

---

标题前列表

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

---

定义列表

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

Answer 2

备选案文1

HTML5有 figure 和 figcaption 元素, 我找到工作的相当不错。

例如：

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

这些都是那么容易采用CSS。

---

备选案文2

使用CSS3：前伪元素可能是一种好的解决方案：

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

你当然可以，使用不同的选择比 ul[title];例如，可以添加一个'标题为标题'类和使用 ul.title-as-header::before 相反，或者任何你需要的。

这个没有副作用，给你一个提示对整个清单。如果你不想这样的提示，可以使用的数据属性，而不是(例如， <ul data-title="fruit"> 和 ul[data-title]::before { content: attr(data-title); }).

Answer 3

据我所知，没有规定在当前HTML前用于提供一个标题的列表，作为没有表。我会留与使用任何一类的段落，或者一头的标签现在.

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

在未来，当HTML5得更广泛通过，你将能够使用 <legend> 和 <figure> 标签来实现这个稍微更多的语义上.

看看 这个职位 在W3C的邮件列表了解更多信息。

Answer 4

没有字幕样的标签一个名单如表。所以我只是给它一个 <Hx> (x取决于你以前使用的标题).

Answer 5

你可以随时使用 <label/> 关联的标签给你名单的元素：

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