1. ホーム
  2. html

[解決済み] HTMLでリストのキャプション、タイトル、ラベルを意味的に提供する方法

2022-12-13 15:25:53

質問

を提供する適切な方法は何でしょうか? セマンティック キャプションを提供する適切な方法は何ですか?例えば、以下のリストは、"title"/"caption"を持っています。

フルーツ

  • リンゴ
  • 洋梨
  • オレンジ

果物という単語は、リスト自体と意味的に関連付けられるように、どのように扱われるべきでしょうか。

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

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

ネストされたリスト

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