Question

AFAIK，没有专用元素 - 例如<caption>用于表格，<figcaption>用于数字等 - 用于标记列表的标题。我应该使用什么标记？

在HTML 3.0中，there was an element <LH>但现在已弃用。

Lorem ipsum dolor sit amet，   奉献精神。法无   eget enim nec metus feugiat porta。   Suspendisse convallis格言   tincidunt。 Vestibulum ante ipsum   faucibus orci luctus et   ultrices posuere cubilia Curae; Morbi   在nisl suscipit rutrum中的简历。

我爱的水果：



菠萝



莓



香蕉



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   胡斯托。整数vel pellentesque magna。   Donec quis nisi lacus，accumsan   rhoncus leo。 Quisque tempor metus   简历nisl eleifend aliquet。保护者   adipiscing purus magna。

Answer 1

看起来你想要一个HTML5答案。如果您的所有列表都有标题，我会使用<dl>（现在意为 description 列表），其中包含一个<dt>标题，列表项为<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

你可以做的事情很少：

将HTML5用作schot pointed out
使用HTML3，正如您所注意到的那样：）
我会使用标题，这些标题非常适合导航和标记页面的一般语义结构：

<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 :: Add-ons for Firefox

如何标记HTML列表的标题

4 个答案: