如何标记HTML列表的标题

Question

AFAIK，没有专用的元素-像<caption>对表， <figcaption>为数字，等-来标记列表的标题。 我应该使用什么标记？

在HTML 3.0中， 有一个元素<LH>但现在已弃用。

Lorem ipsum dolor坐下来，精致的adipistur elit。 Nulla eget enim nec metus feugiat porta。 Suspendisse convallis dictum tincidunt。 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum。

我爱的水果：

• 凤梨

• 覆盆子

• 香蕉

在mauris vel diam eleifend adipiscing中。 Proin id neque quam，eu mattis ipsum。 Nulla facilisi。 Sed id sapien eget mi cursus placerat vel sed justo。 整数vel pellentesque magna。 Donec quis nisi lacus，accumsan rhoncus leo。 Quisque tempor metus vitae nisl eleifend aliquet。 Maecenas adipiscing purus magna。

Answer 1

看起来你想要一个HTML5答案。 如果你的所有列表都有标题，我会使用带有单个<dt>标题的<dl> （现在意义描述列表），列表项为<dd> ：

<dl>
    <dt>Fruits I love:</dt>
    <dd>Ananas</dd>
    <dd>Strawberry</dd>
</dl>

如果你把很多列表和/或不混合使用，我会坚持使用<ul> / <ol>并使用普通的<hX> 。 将<hX>和列表包装在<div>以保留语义：

<div class="list">
    <h2>Fruits I love:</h2>
    <ul>
        <li>Ananas</li>
        <li>Strawberry</li>
    </ul>
</div>

Answer 2

我会使用常规标题，最好是在您之前使用过的标题之下。

Answer 3

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>

<p>Fruits I love:</p>
<ul>
  <li>Ananas</li>
  <li>Raspberry</li>
  <li>Banana</li>
</ul>

<p>In in mauris vel diam eleifend adipiscing. Proin id neque quam, eu mattis ipsum. Nulla facilisi. Sed id sapien eget mi cursus placerat vel sed justo. Integer vel pellentesque magna. Donec quis nisi lacus, accumsan rhoncus leo. Quisque tempor metus vitae nisl eleifend aliquet. Maecenas adipiscing purus magna.</p>

在这种情况下，没有理由使用除段落之外的任何内容。 figcaption适用于另一种情况：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>

<p>I love <a href=#fruits>some fruits</a>!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget enim nec metus feugiat porta. Suspendisse convallis dictum tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi vitae erat in nisl suscipit rutrum.</p>

<p>In in mauris vel diam eleifend adipiscing. Proin id neque quam, eu mattis ipsum. Nulla facilisi. Sed id sapien eget mi cursus placerat vel sed justo. Integer vel pellentesque magna. Donec quis nisi lacus, accumsan rhoncus leo. Quisque tempor metus vitae nisl eleifend aliquet. Maecenas adipiscing purus magna.</p>

<figure id=fruits>
  <figcaption>List 1: Fruits I love</figcaption>
  <ul>
    <li>Ananas</li>
    <li>Raspberry</li>
    <li>Banana</li>
  </ul>
</figure>

Answer 4

你可以做的事情很少：

1. 正如schot所指出的，使用HTML5
2. 正如您所注意到的那样使用HTML3 :)

3. 我会使用标题，这些标题非常适合导航和标记页面的一般语义结构：

   <h3>Things I love</h3>

   <h4>The list</h4>
<ul>
<li>Ananas</li>
<li>Raspberry</li>
<li>Banana</li>
</ul>

   <h4>Elaborated description</h4>

   <p>Lorem ipsum…</p>

（抱歉这种格式化）

如果您使用Firefox，我建议使用HeadingsMap清楚地看到页面结构：

HeadingsMap :: Firefox的附加组件