web-dev-qa-db-ja.com

名前と値のペアのセマンティクスと構造

これは私がしばらく苦労してきた質問です。名前/値のペアをマークアップする適切な方法は何ですか？

<dl>要素は好きですが、問題があります。1つのペアを別のペアから分離する方法はありません。一意のコンテナがありません。視覚的に、コードには定義がありません。意味的には、これは正しいマークアップだと思います。

<dl>
    <dt>Name</dt>
    <dd>Value</dd>
    <dt>Name</dt>
    <dd>Value</dd>
</dl>

上記のコードでは、コードとレンダリングの両方で視覚的にペアを適切にオフセットすることは困難です。たとえば、各ペアの周囲に境界線が必要な場合は、問題になります。

テーブルを指す場合があります。名前と値のペアは表形式のデータであると主張できます。それは私には間違っているように思えますが、私は議論を見ます。ただし、HTMLは、位置、またはクラス名の追加を除いて、名前と値を区別しません。

<table>
    <tr>
        <td>Name</td>
        <td>Value</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Value</td>
    </tr>
</table>

これは、コードとCSSの両方で、視覚的な観点からはるかに理にかなっています。前述の境界線のスタイル設定は簡単です。ただし、前述のように、セマンティクスはせいぜいあいまいです。

考え、コメント、質問？

編集/更新おそらくこれは構造に関して明示的に言及すべきだったのかもしれませんが、定義リストにはペアを意味的にグループ化しないという問題もあります。 ddとdtの間の順序と暗黙の境界線は簡単に理解できますが、それでも少し気分が悪くなります。

htmlcsssemantic-websemantic-markupsemantics
68
Ryan Kinal

この興味深い質問をありがとう。ここで考慮すべきことがいくつかあります。

ペアとは何ですか？一緒に2つの要素。そのため、このためのタグが必要です。 pairタグだとしましょう。

 <pair></pair>

ペアにはキーと対応する値が含まれます。

 <pair><key>keyname</key><value>value</value></pair>

次に、ペアをリストする必要があります。

<pairlist>
     <pair><key>keyname</key><value>value</value></pair>
     <pair><key>keyname</key><value>value</value></pair>
</pairlist>

次に考慮すべきことは、ペアの表示です。通常のレイアウトは表形式です。

key value
key value

オプションの区切り文字。通常はコロンです。

key : value
key : value

コロンはCSSを介して簡単に追加できますが、これはIEでは機能しません。

上記のケースは理想的なケースです。しかし、これに簡単に適合する有効なHTMLマークアップはありません。

総括する：

dlは、キーと値の単純なケースでは意味的に最も近いですが、視覚スタイルを適用するのは困難です（たとえば、ペアをインラインで表示したり、ホバーしたペアに赤い枠を追加したりする）。 dlに最も適合するケースは用語集です。しかし、これは我々が議論する場合ではありません。

この場合に見える唯一の選択肢は、次のようにtableを使用することです。

<table summary="This are the key and value pairs">
    <caption>Some notes about semantics</caption>
    <thead class="aural if not needed">
        <tr><th scope="col">keys</th><th scope="col">values</th></tr>
    </thead>
    <tbody class="group1">  
        <tr><th scope="row">key1</th><td>value1</td></tr>
        <tr><th scope="row">key2</th><td>value2</td></tr>
    </tbody>
    <tbody class="group2">
        <tr><th scope="row">key3</th><td>value3</td></tr>
        <tr><th scope="row">key4</th><td>value4</td></tr>
    </tbody>
</table>

もう一つ：

<ul>
  <li><strong>key</strong> value</li>
  <li><strong>key</strong> value</li>
</ul>

または：

<ul>
  <li><b>key</b> value</li>
  <li><b>key</b> value</li>
</ul>

または、キーがリンクされる可能性がある場合：

<ul>
  <li><a href="/key1">key1</a> value</li>
  <li><a href="/key2">key1</a> value</li>
</ul>

キーと値のペアは通常データベースに保存され、通常は表形式のデータが保存されるため、テーブルは私見に最適です。

どう思いますか？

51
takeshin

XHTML 2では、di要素を使用して用語と定義をグループ化する機能が導入されました

<!-- Do not us this code! -->
<dl>
    <di>
        <dt>Name</dt>
        <dd>John</dd>
    </di>
    <di>
        <dt>Age</dt>
        <dd>25</dd>
    </di>
</dl>

X/HTML 5 vs XHTML 2>定義リストの機能強化

残念ながら、XHTML 2は死んでおり、HTML5にはdi要素がありません

したがって、ul > li with dl > dt + dd：

<ul>    
    <li>
        <dl>
            <dt>Name</dt>
            <dd>John</dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>Age</dt>
            <dd>25</dd>
        </dl>
    </li>
</ul>
12
Yukulélé

定義リストはおそらく悪い考えだと思います。意味的には、定義に使用されます。他のKey-Valueリストは、多くの場合、定義のタイトルや説明とは異なります。

tableは行く方法の1つですが、順序付けられていないリストについてはどうでしょうか。

<ul>
    <li class="key-value-pair">
        <span class="key">foo</span>
        <span class="value">bar</span>
    </li>
</ul>
6
gpmcadam

Alexandr Antonovが提供する 仕様 （および 詳細 ）に従います：use dl、dt 、dd、およびオプションでdiv。

dl、dt、およびddの組み合わせは、キーと値のペアに対して意味的に問題ありません。

<dl>
    <dt>Key1</dt>
    <dd>Value1</dd>
    <dt>Key2</dt>
    <dd>Value2</dd>
</dl>

スタイリングや解析を簡単にするために、divsをdlの子として使用してキーと値のペアをグループ化できます（そしてdtとddを孫にすることができますdl）：

dl { display: table; }
dl > div { display: table-row; }
dl > div > dt, dl > div > dd { display: table-cell; border: 1px solid black; padding: 0.25em; }
dl > div > dt { font-weight: bold; }
<dl>
  <div>
    <dt>Key1</dt>
    <dd>Value1</dd>
  </div>
  <div>
    <dt>Key2</dt>
    <dd>Value2</dd>
  </div>
</dl>
6
Danny Lin
dl {
  display: grid;
  grid-template-columns: auto auto;
}

dd {
  margin: 0
}
<dl>
  <dt>key</dt>
  <dd>value</dd>
  <dt>key</dt>
  <dd>value</dd>
</dl>

<dl><dt><dd>を使用し、グリッドでスタイルを設定しました

3
Michiel Bruggenwirth

これは私の好みのソリューションではありませんが、セマンティック要素の巧妙な乱用です。

<dl>/<dt>ペアごとに新しい<dd>を使用します。

<div class="terms">
    <dl><dt>Name 1</dt><dd>Value 1</dd></dl>
    <dl><dt>Name 2</dt><dd>Value 2</dd></dl>
</div>

Cssフロートとホバー上の赤い境界線の例：

dt:after { content:":"; }
dt, dd { float: left; }
dd { margin-left: 5px }
dl { float: left; margin-left: 20px; border: 1px dashed transparent; }
dl:hover { border-color: red; }
<div class="terms">
    <dl>
        <dt>Name 1</dt>
        <dd>Value 1</dd>
    </dl><!-- etc -->
    <dl><dt>Name 2</dt><dd>Value 2</dd></dl>
    <dl><dt>Name 3</dt><dd>Value 3</dd></dl>
    <dl><dt>Name 4</dt><dd>Value 4</dd></dl>
    <dl><dt>Name 5</dt><dd>Value 5</dd></dl>
    <dl><dt>Name 6</dt><dd>Value 6</dd></dl>
</div>
3
Iiridayn

もちろん、単に HTMLカスタム要素 を使用できます。 （ spec ）これらは完全に有効なHTML5です。

残念ながら、ブラウザのサポートはそれほど優れていませんが、セマンティクスを扱うとき、ブラウザのサポートなどの歩行者のことをめったに気にしません。 :-)

あなたがそれを表すことができるそのような方法の1つ：

以下のように新しいファンシー要素を登録した後：

var XKey = document.registerElement('x-key');
document.body.appendChild(new XKey());

次のようにマークアップを記述します。

<ul>
  <li>
    <x-key>Name</x-key>
    Value
  </li>
</ul>

HTMLカスタム要素が持つ唯一の条件は、ダッシュが必要であることです。もちろん、あなたは今、非常に創造的であることができます...部品のリストとシリアル番号で自動車部品倉庫を構築している場合：

<ul>
  <li>
    <auto-part>
      <serial-number>AQ12345</serial-number>
      <short-description>lorem ipsum dolor...</short-description>
      <list-price>14</list-price>
    </auto-part>
  </li>
</ul>

それ以上のセマンティックを取得することはできません！

ただし、そこにIS私がsemantic-shangri-la-la（実際の場所）で、もう少し一般的なものにスケールダウンしたくなるかもしれません。

<ul>
  <li class='auto-part' data-serial-number="AQ12345">
      <p class='short-description'>lorem ipsum dolor...</p>
      <p class='list-price'>14</p>
  </li>
</ul>

またはおそらくこれ（私がキーを視覚的にスタイル設定して表示する必要がある場合）

<ul>
  <li class='auto-part'>
      <x-key>AQ12345<//x-key>
      <p class='short-description'>lorem ipsum dolor...</p>
      <p class='list-price'>14</p>
  </li>
</ul>
2
Armstrongest

コードとレンダリングの両方で視覚的にペアを適切にオフセットすることは困難です。たとえば、各ペアの周囲に境界線が必要な場合は、問題になります。

私の前の他の人たちは、コードで視覚的な定義を提供するという問題に対処しました（かなりよく思います）。レンダリングとCSSの問題が残ります。ほとんどの場合、これは非常に効果的に実行できます。最大の例外は、dt/ddsの各セットの周囲に境界線を配置することです。これは明らかに非常にトリッキーです-確実にスタイルを設定することはおそらく不可能です。

できること：

dt,dd{ border:solid; }
dt{ margin:10px 0 0 0; border-width:1px 1px 0 1px; }
dd{ margin:0 0 10px 0; border-width:0 1px 1px 1px; padding:0 0 0 10px; }
dd::before{ content:'→ '; }

これはキーと値のペアで機能しますが、次のように1つの「セット」内に複数のddがある場合に問題が発生します。

<dt>Key1</dt>
  <dd>Val1.1</dd>
  <dd>Val1.2</dd>
<dt>Key2</dt>
  <dd>Val2.1</dd>
  <dd>Val2.2</dd>

ただし、ボーダースタイルの制限は別として、セット（背景、番号付けなど）を関連付けるために他のことを行うことはCSSで非常に可能です。ここにニースの概要があります： http://www.maxdesign.com.au/articles/definition/

視覚的な分離を提供するために定義リストのスタイルを最適化する場合、CSSの自動番号付け機能（counter-incrementおよびcounter-reset）は非常に便利です： http://www.w3.org/TR/CSS2/generate.html#counters

2
lucideer

<dl>要素を除き、HTMLのすべてのオプション、つまり制限されたオプションをほぼまとめました。

失われたわけではありませんが、1つのオプションがあります。HTMLに翻訳できるマークアップ言語を使用することです。非常に良いオプションはMarkdownです。

一部のマークダウンエンジンが提供するテーブル拡張を使用すると、次のようなコードを作成できます。

| Table header 1 | Table header 2 |
-----------------------------------
| some key       | some value     |
| another key    | another value  |

これは、もちろん、MarkdownをHTMLに変換するビルドステップが必要であることを意味します。

このようにして、意味のあるマークアップ（表形式データのテーブル）と保守可能なコードを取得します。

1
Florian Margaine

うーん。 dt/ddはこれに最適であり、視覚的にそれらをオフセットすることができますis。

ソースコードの読みやすさについては、それらを1行に入れるのはどうですか？

<dl>
    <dt>Name</dt> <dd>Value</dd>
    <dt>Name</dt> <dd>Value</dd>
</dl>

私はそれが100％完璧ではないことに同意しますが、インデントにスペース文字を使用できると考えています：

<dl>
    <dt>Property with a looooooooooong name</dt>   <dd>Value</dd>
    <dt>Property with a shrt name</dt>             <dd>Value</dd>
</dl>

それが一番いい方法かもしれません。

1
Unicron

各ペアの間に空白行を置くだけではどうですか？

これには、長い値に対する特別な処理は必要ありません。

<dl> 
    <dt>Name</dt> 
    <dd>Value</dd> 

    <dt>Name</dt> 
    <dd>Value</dd> 

    <dt>Name</dt> 
    <dd>Value</dd> 
</dl>
0
Philip Smith

リストの使用はどうですか？

順序付けられました：

<ol>
  <li title="key" value="index">value</li>
  …
</ol>

または、<ul>を番号なしリストに使用し、value="index"ビットをスキップします。

0
Dave Sag

spec の行：

名前と値のグループは、用語と定義、メタデータのトピックと値、質問と回答、または名前と値のデータのその他のグループです。

要素の使用は<dl>、<dt>および<dd>。

0
Alexandr Antonov