web-dev-qa-db-ja.com

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

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

フルーツ

  • Apple
  • 梨
  • オレンジ

単語「果物」は、リスト自体に意味的に関連付けられるように、どのように処理されるべきですか？

htmlhtml-listssemantic-markup
60
Jon P

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

ネストされたリスト

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

オプション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]_;とは異なるセレクターを使用できます。たとえば、「タイトルとしてのヘッダー」クラスを追加し、代わりに_ul.title-as-header::before_を使用するか、必要なものを使用できます。

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

32
megaflop

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

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

将来、HTML5が広く採用されるようになると、<legend>および<figure>タグは、これをもう少し意味的に実現します。

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

12
sixthgear

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

1
I.devries

いつでも使用できます<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>
0
HelpNeeder