Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 569
viam0Zah Avatar asked Aug 04 '10 13:08

viam0Zah


1 Answers

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>
like image 75
schot Avatar answered Sep 16 '22 12:09

schot