How to mark up caption for HTML lists

 

AFAIK, there is no dedicated element--like <caption> for tables, <figcaption> for figures, etc.--to mark the header of a list. What markup should I use?

In HTML 3.0, there was an element <LH> but it is deprecated now.

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.

Fruits I love:

  • Ananas

  • Raspberry

  • Banana

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

    It looks like you want a HTML5 answer. If all your lists have header I would use a <dl> (now meaning description list) with a single <dt> header and the list items as <dd> 's: 

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

    If you mix a lot of lists with/without headers I would stick with <ul> / <ol> and use normal <hX> 's. Wrap the <hX> and the list in a <div> to preserve the semantics: 

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

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

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

    There's no reason to use anything else than a paragraph in this case. figcaption would be appropriate in another circumstance: 

    <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>
    链接地址: http://www.djcxy.com/p/88574.html

    上一篇: 悬停时突出显示文本块中的单个单词

    下一篇: 如何标记HTML列表的标题