意味的にリストに見出しを追加する方法

これはしばらくの間私を悩ませてきました、そして私はこれを適切に行う方法についてコンセンサスがあるかどうか疑問に思っています。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>

しかし、見出しは実際にはリストアイテムの1つではないため、これは少し汚いようです。

このオプションは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. -->

この場合、定義リストを次のように使用します。

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>

あなたの最初のオプションは良いものです。それは最も問題の少ないものであり、他のオプションを使用できなかった正しい理由はすでにわかっています。

ちなみに、あなたの見出しは明示的にに関連付けられてい<ul>ます：リストの直前です！;）

編集：W3C HTML5および5.1の編集者の1人であるSteve Faulkner が、要素の定義をスケッチしました。これは彼がHTML 5.2について議論する非公式の草案であり、それ以上のものはありません。lt

<div>はコンテンツ内の論理的な分割です。意味的には、見出しをリストとグループ化したい場合、これが最初の選択肢になります。

<div class="mydiv">
    <h3>The heading</h3>
    <ul>
       <li>item</li>
       <li>item</li>
       <li>item</li>
    </ul>
</div>

次に、次のCSSを使用してすべてを1つのユニットとしてスタイルすることができます

.mydiv{}
.mydiv h3{}
.mydiv ul{}
.mydiv ul li{}
etc...

<figure>要素を使用して、次のように見出しをリストにリンクすることもできます。

<figure>
    <figcaption>My favorite fruits</figcaption>    
       <ul>
          <li>Banana</li>
          <li>Orange</li>
          <li>Chocolate</li>
       </ul>
</figure>

出典：https : //www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element（例162）

CSSで新しいクラスulheaderを定義してみてください。p.ulheader〜ulは、My Headerの直後に続くすべてを選択します

p.ulheader ~ ul {
   margin-top:0;
{
p.ulheader {
   margin-bottom;0;
}

w3.orgによると（このリンクは期限切れのHTML 3.0ドラフト仕様にあることに注意してください）：

順不同リストは、通常、箇条書きの項目リストです。HTML 3.0では、箇条書きをカスタマイズしたり、箇条書きなしで実行したり、複数列リストのリストアイテムを水平方向または垂直方向に折り返したりすることができます。

開始リストタグはでなければなりません<UL>。その後に、オプションのリストヘッダー（<LH>caption </LH>）が続き、最初のリストアイテム（<LI>）が続きます。例えば：

<UL>
  <LH>Table Fruit</LH>
  <LI>apples
  <LI>oranges
  <LI>bananas
</UL>

これは次のようにレンダリングできます。

テーブルフルーツ

• りんご
• オレンジ
• バナナ

注：一部のレガシードキュメントでは、最初のLI要素の前にヘッダーまたはプレーンテキストが含まれている場合があります。HTML 3.0ユーザーエージェントの実装者は、不適切な形式のレガシードキュメントを処理するために、この可能性に対応することをお勧めします。

見出しをulの中に入れました。ULにはLI要素のみを含める必要があるというルールはありません。