web-dev-qa-db-ja.com

ラベル/値データを表示するために使用するHTMLマークアップは何ですか？

ラベルとそれに関連する値のリストを含むプロファイルユーザーコンテナをレンダリングしたいと思います。

これが私が表示したい情報とレイアウトの抜粋です：

名 ....... MyName

年齢 ................... MyAge

メール ................ MyEmail

利用できる例がたくさんあることは知っていますが、問題は、一般的に受け入れられている解決策がないように見えることです。

これまでのところ、私は次の使用法を見てきました：

  1. マークアップのあるテーブル（および<tr>、<td> ...）
  2. <ul>マークアップ（および<li>、<div> ...）の順序なしリスト
  3. <h1>、<h2> ... <p>の通常のマークアップ
  4. <DL>、<DT>および<DD>の定義リスト
  5. <ラベル> ...？

最も意味的に正しいものは何ですか？ （2列のレイアウトで）表示するのが最も簡単なものは何ですか？何を使用するように、そしてどのような理由で私にアドバイスしますか？

（html/cssコードスニペットは大歓迎です）

htmlcssmarkupsemantic-markup
39
fabien7474

ワオ。私たちは本当にみんなを怖がらせました。「テーブルのレイアウトは悪です！ CSSを使用してください！」もの、そうではありませんか？

テーブル— <th>ラベル用および<td> for the values —はこの種のコンテンツに完全に適用可能であり、必要なレンダリングを提供し、少なくとも定義リストと同じくらい意味的に正確であり、おそらくそれ以上です。セマンティクスのないdivよりもどちらかが望ましいです。

18
bobince

表示しているものは事実上名の定義であるため、最も意味的に正しいのは<dl>、<dt>、および<dd>だと思います。 、年齢および電子メール。

<dl>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>[email protected]</dd>
</dl>

ただし、明らかに、テーブルに表示する最も簡単な方法は、<table>、<th>、および<td>を使用することです。次のようなものを使用して、定義リストを使用してテーブルレイアウトを一緒にハックすることができます。

dt { float: left; clear: left; width: 6em; font-weight: bold; }
dd { float: left; }

利用可能な<dl>タグの詳細 ここ 。

31
Dominic Rodger

私はこれが答えられたことを知っていますが、定義リストは完全に適切であると思います。
私はbobinceテーブルが常に表形式のデータに適していることに同意します。
しかし、私はテーブルを避けたいと思った多くの場所でこれを使用しました-そしてそれは間違った方法ではないと思います。

定義リスト：

<dl>
  <dt>Label</dt>
  <dd>Value</dd>

  <dt>Label 2</dt>
  <dd>Value 2</dd>
</dl>

CSSの場合：

dl dt {
  float: left;
  width: 200px;
  text-align: right;
}

dt dd {
  margin-left: 215px;
}
4
cstrat