86

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

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

<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の両方で、視覚的な観点からはるかに理にかなっています。前述の境界線のスタイル設定は簡単です。ただし、前述のように、セマンティクスはせいぜいあいまいです。

考え、コメント、質問？

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

4

14 に答える 14

60

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

ペアとは？一緒に 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>

もう1つ：

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

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

どう思いますか？

于 2010-07-19T19:43:09.607 に答える
12

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

<!-- 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したがって、次のものと組み合わせることができます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>
于 2013-02-27T17:50:18.810 に答える
6

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

Atableは 1 つの方法ですが、順序付けられていないリストはどうでしょうか?

<ul>
    <li class="key-value-pair">
        <span class="key">foo</span>
        <span class="value">bar</span>
    </li>
</ul>
于 2010-07-19T12:54:45.630 に答える
3

これは私の好みの解決策ではありませんが、セマンティック要素の巧妙な乱用です。

/ペア<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>

于 2013-06-27T21:31:50.740 に答える
2

もちろん、HTML カスタム要素をそのまま使用することもできます。(仕様)完全に有効な 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>

それ以上のセマンティックは得られません!

ただし、(実際の場所) に行きすぎて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>
于 2016-07-25T17:42:12.007 に答える
2

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

私よりも前に、コードで視覚的な定義を提供するという問題に対処した人がいます (かなりうまくいったと思います)。レンダリングと 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/

定義リストのスタイルを最適化して視覚的な分離を提供することを検討している場合、注目に値すると思うもう 1 つのポイント - CSS の自動番号付け機能 (counter-incrementおよびcounter-reset) は非常に便利です: http://www.w3.org/TR/ CSS2/generate.html#カウンター

于 2010-07-19T13:16:52.513 に答える
1

うーん。dt/ddこれに最適なサウンドであり、視覚的にオフセットすることは可能ですが、テーブルよりも難しいことには同意します。

ソースコードの可読性については、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>

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

于 2010-07-19T12:43:42.490 に答える
1

要素を除いて、<dl>HTML のすべてのオプション (限定的なもの) をほぼ要約しました。

ただし、道に迷ったわけではありません。残されたオプションは 1 つです。それは、HTML に変換できるマークアップ言語を使用することです。非常に良いオプションは Markdown です。

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

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

これはもちろん、Markdown を HTML に変換するためのビルド手順が必要であることを意味します。

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

于 2013-05-31T19:30:18.373 に答える
0

specからの行:

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

要素<dl>、<dt>およびの使用を想定しています<dd>。

于 2016-07-25T16:43:49.817 に答える
0

各ペアの間に空行を入れるだけではどうですか?

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

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

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

    <dt>Name</dt> 
    <dd>Value</dd> 
</dl>
于 2010-07-19T12:59:48.750 に答える
0

リストの使用についてはどうですか？

順序付けられました：

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

または<ul>、順序付けられていないリストに使用して、value="index"ビットをスキップします。

于 2013-02-14T06:39:42.243 に答える
-1

すべてを1行にまとめるというユニクロンのアイデアは気に入っていますが、別のオプションとして、定義名の下の値をインデントすることもできます。

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

この方法は、ばかばかしいほど長い定義では少し簡単かもしれません（ただし、ばかばかしいほど間違った定義を使用している場合は、定義リストが本当に必要なものではない可能性があります）。

画面上のレンダリングに関しては、ddに適用される太い下マージンは十分な視覚的分離です。

于 2010-07-19T12:48:12.183 に答える