[解決済み] リストに意味的に見出しを追加する方法

質問

これはしばらく私を悩ませ、これを適切に行う方法についてコンセンサスがあるかどうか疑問に思っています。HTML リストを使用しているとき、リストのヘッダーを意味的に含めるにはどうしたらよいでしょうか。

1 つのオプションはこれです。

<h3>Fruits I Like:</h3>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

が、意味的には <h3> という見出しは明示的に関連付けられていません。 <ul>

もう一つの選択肢はこれです。

<ul>
    <li><h3>Fruits I Like:</h3></li>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

というのは、見出しは実際にはリストアイテムの一つではないからです。

このオプションはW3Cでは許可されていません。

<ul>
    <h3>Fruits I Like:</h3>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

として <ul> には一つ以上の <li> 's

古い "リストの見出し"。 <lh> が最も理にかなっています。

<ul>
    <lh>Fruits I Like:</lh>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

というのがありますが、もちろんこれは正式なHTMLの一部ではありません。

を使うように提案されているのを聞いたことがあります。 <label> をフォームと同じように使うという提案を聞いたことがあります。

<ul>
    <label>Fruits I Like:</label>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

というのがありますが、これはちょっと変で、いずれにせよ検証はされないでしょう。

リストヘッダーをスタイルしようとするとき、意味上の問題を見るのは簡単です。 <h3> タグを最初の <li> のようなもので、スタイリングの対象にします。

ul li:first-of-type {
    list-style: none;
    margin-left: -1em;
    /*some other header styles*/
}

の恐怖を味わってください。しかし少なくとも、この方法で私は <ul> をスタイルすることで、見出しを含むすべての ul タグを作成します。

これはどのような方法で行うのが正しいのでしょうか？何かアイデアがあれば教えてください。

どのように解決するのですか？

Felipe Alsacreationsがすでに述べているように、最初の選択肢は問題ありません。

リストの下にあるものが見出しに属すると解釈されないようにしたいのであれば、それはまさにHTML5のセクショニングコンテンツ要素のためのものです。ですから、たとえば次のようにすることができます。

<h2>About Fruits</h2>
<section>
  <h3>Fruits I Like:</h3>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ul>
</section>
<!-- anything here is part of the "About Fruits" section but does not 
     belong to the "Fruits I Like" section. -->