Wie auszuzeichnen Beschriftung für HTML-Listen

Question

AFAIK, gibt es kein spezielles Element - wie <caption> für Tabellen, <figcaption> für Zahlen, etc .-- den Header einer Liste zu markieren. Was Markup soll ich verwenden?

In HTML 3.0, gibt es ein Element <LH> aber es ist veraltet jetzt.

  

Lorem ipsum dolor sit amet,   consectetur adipiscing elit. nulla   eget enim nec metus feugiat porta.   Suspendisse convallis Diktum   tincidunt. Vestibulum ante ipsum   primis in faucibus Orci et luctus   ultrices posuere cubilia Curae; Morbi   vitae erat in nisl suscipit rutrum.

     

Obst Ich liebe:

     

  

• Ananas

  

• Raspberry

  

• Banana

  

     

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.

Answer 1

Es sieht aus wie Sie eine HTML5 Antwort wollen. Wenn alle Ihre Listen-Header haben würde ich einen <dl> verwenden (jetzt Sinn Beschreibung Liste) mit einem einzigen <dt> Header und die Listenelemente als <dd> suchen:

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

Wenn Sie eine Menge von Listen mit / ohne Header mischen würde ich Stick mit <ul> / <ol> und normalen <hX> des verwenden. Wickeln Sie das <hX> und die Liste in einer <div> die Semantik zu erhalten:

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

Answer 2

ich einen regulären Kopf verwenden würde, vorzugsweise in der Ebene unterhalb Ihre bisher verwendeten ein.

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>

Es gibt keinen Grund zur Verwendung irgendetwas anderes als ein Absatz in diesem Fall. figcaption würde in einem anderen Umstand angemessen sein:

<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

Es gibt nur wenige Dinge, die Sie tun können:

1. Verwenden Sie HTML5, wie schot wies darauf hin,
2. Verwenden Sie HTML3, wie Sie vielleicht bemerkt:)

3. ich die Überschriften verwenden würde, die für die Navigation sehr gut ist und die Kennzeichnung allgemeine semantische Struktur der Seite:

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

(Sorry für diese Formatierung)

Wenn Sie Firefox verwenden, würde ich HeadingsMap empfehlen eindeutig die Seitenstruktur finden Sie unter:

HeadingsMap :: Add-ons für Firefox