web-dev-qa-db-ja.com

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

これは私をしばらく悩ませており、これを適切に行う方法についてコンセンサスがあるかどうか疑問に思っています。 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>には1つ以上の<li>のみを含めることができるため

古い「リストの見出し」<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>全体、見出しなどを制御できます。

これを行う正しい方法は何ですか？何か案は？

htmlhtml-lists
105
Tomas Mulder

フェリペ・アルサクリエーションズがすでに言ったように、最初の選択肢は大丈夫です。

リストの下にあるものが見出しに属するものとして解釈されないようにしたい場合、それがまさに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. -->
71
Alohci

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

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

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

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

編集：W3C HTML5および5.1のエディターの1人であるSteve Faulknerは、定義をスケッチ of lt element を持っています。これは 非公式のドラフト であり、彼はHTML 5.2について議論しますが、これ以上はありません。

9
FelipeAls

<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...
5
Evert

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

1
Rambobafet

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

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