ラベル/値データを表示するにはどのような HTML マークアップを使用しますか?

Question

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

表示したい情報とレイアウトの抜粋は次のとおりです。

ファーストネーム.......自分の名前

年...................私の年齢

Eメール................私のメール

利用可能な例が山ほどあることは承知していますが、問題は、一般的に受け入れられている解決策が存在しないように見えることです。

これまでのところ、次のような使用法を見てきました。

1. マークアップ付きのテーブル (および < tr >、< td >...)
2. < ul > マークアップ (および < li >、< div >...) を含む順序なしリスト
3. < h1 >、< h2 >...< p > による通常のマークアップ
4. < DL >、< DT >、および < DD > による定義リスト
5. <ラベル>...?

意味的に最も正しいものは何ですか?2列レイアウトで表示するのはどれが一番簡単ですか?何を使用するようアドバイスしますか?またその理由は何ですか?

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

Answer 1

うわー。私たちは本当にレイアウトが悪です「表で皆をオフにおびえています！ CSSを使用してください！」もの、私たちが持っていない？

テーブル - 値のラベルと<th>ため<td>とは - この種のコンテンツに完全に適用され、あなたがしたいレンダリング与え、間違いなくより多くのように、少なくとも定義リストのように意味的に正しいです。どちらかがセマンティクスフリーのdivに好ましいます。

Answer 2

私は何を表示していることは効果的にの定義の最初の名前、年齢、電子メールのであるため、ほとんど意味的に正しいが、<dl>、<dt>と<dd>ことだと思います。

<dl>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>foo@bar.com</dd>
</dl>

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

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

ここの<dl>タグ利用できるのの詳細情報。

Answer 3

私は、これは回答されている知っているが、私は定義リストは完全に適切なものとすることができると思います。
私はと同意の 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;
}

Answer 4

これは良い質問であり、また、これを行うことのない固定方法はありませんbecasue、多くの議論に開かれているものです。

、それらの多くの引数がありますが、私は個人的に、私はそれをシンプルに保つでしょう。

<div class="profile">
    <p>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </p>
    <p>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </p>
    <p>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </p>
</div>

または

<ul class="profile">
    <li>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </li>
    <li>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </li>
    <li>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </li>
</ul>

CSSは次のようになります。

.profile p {
    overflow: hidden;
}

.profile .label {
    vertical-align: top;
    float: left;
    width: 40%;
}

.profile .value{
    vertical-align: top;
    float: left;
    width: 60%;
}

CSS内の任意の特定のHTMLノード名を参照していない理由は、将来的にこれを行うの認識方法がある場合にのみ、あなたのHTML内のノード名を変更しなければならないということです。