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

オプション1

HTML5には、 figure そして figcaption 要素, 、これは非常にうまく機能すると思います。

例：

<figure>
    <figcaption>Fruit</figcaption>
    <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Orange</li>
    </ul>
</figure>

これらは CSS で簡単にスタイル設定できます。

---

オプション 2

CSS3 の ::before 疑似要素を使用すると、優れた解決策となる可能性があります。

HTML:

<ul title="Fruit">
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

CSS:

ul[title]::before {
    content: attr(title);
    /* then add some nice styling as needed, eg: */
    display: block;
    font-weight: bold;
    padding: 4px;
}

もちろん、別のセレクターを使用することもできます。 ul[title];たとえば、「title-as-header」クラスを追加して、次のように使用できます。 ul.title-as-header::before 代わりに、または必要なものは何でも。

これには、リスト全体のツールチップが表示されるという副作用があります。このようなツールチップが不要な場合は、代わりにデータ属性を使用できます (例: <ul data-title="fruit"> そして ul[data-title]::before { content: attr(data-title); }).

Answer 3

テーブルにあるように、

私の知る限りでは、現在のHTML仕様には規定は、リストのキャプションを提供するためにはありません。私は今のクラス化、段落、または見出しタグのいずれかを使用していたいます。

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

HTML5が広く採用を獲得したときに

将来的には、あなたはもう少し意味的にこれを実現するために<legend>と<figure>タグを使用することができるようになります。

W3Cメーリングリスト上この記事を参照してください。詳細については、ます。

Answer 4

は、テーブルのようなリストには、キャプションのようなタグはありません。だから、僕はそれを<Hx>（あなた以前に使用ヘッダーに応じてX）を与えると思います。

Answer 5

あなたは常にあなたのリストの要素にラベルを関連付けるために<label/>を使用することができます：

<div>
    <label for="list-2">TEST</label>
    <ul id="list-1">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <label for="list-2">TEST</label>
    <ol id="list-2">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>