html - HTML でリストのキャプション、タイトル、またはラベルを意味的に提供する方法

Question

HTML リストにセマンティックキャプションを提供する適切な方法は何ですか? たとえば、次のリストには「タイトル」/「キャプション」があります。

フルーツ

• アップル
• 梨
• オレンジ

リスト自体に意味的に関連付けられるように、「果物」という単語をどのように処理する必要がありますか?

Answer 1

マークアップを効果的に構造化するキャプションや見出し要素はありませんが、同じ効果が得られます。以下にいくつかの提案を示します。

ネストされたリスト

<ul>
    <li>
        Fruit
        <ul>
            <li>Apple</li>
            <li>Pear</li>
            <li>Organge</li>
        </ul>
    </li>
</ul>

---

リストの前の見出し

<hX>Fruit</hX>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

---

定義一覧

<dl>
  <dt>Fruit</dt>
  <dd>Apple</dd>
  <dd>Pear</dd>
  <dd>Orange</dd>
</dl>

Answer 2

私の知る限り、現在の HTML 仕様には、表のようにリストにキャプションを提供する規定はありません。今のところ、分類された段落またはヘッダー タグのいずれかを使用することにとどまります。

<h3>Fruit</h3>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

将来、HTML5 がより広く採用されるようになると、 タグ<legend>と<figure>タグを使用して、これをもう少し意味的に達成できるようになります。

詳細については、W3C メーリング リストのこの投稿を参照してください。

Answer 3

表のようなリストにはキャプションのようなタグはありません。だから私はそれに<Hx>（以前に使用したヘッダーに応じてx）を与えるだけです。