레이블/값 데이터를 표시하는 데 사용할 HTML 마크 업은 무엇입니까?

Question

레이블 목록과 관련 값이 포함 된 프로필 사용자 컨테이너를 렌더링하고 싶습니다.

다음은 표시하고 싶은 정보와 레이아웃의 발췌문입니다.

이름.......내 이름

나이...................내 나이

이메일................내 이메일

사용 가능한 많은 예제가 있다는 것을 알고 있지만 문제는 일반적으로 허용되는 솔루션이없는 것 같습니다.

지금까지 나는 다음과 같은 사용을 보았습니다.

1. 마크 업이있는 테이블 (및 <tr>, <td> ...)
2. <ul> Markup (및 <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

이것은 좋은 질문이며,이를 수행하는 고정 된 방법이 없기 때문에 많은 논쟁에 열려있는 질문이기도합니다.

많은 사람들에게는 논쟁이 있지만 개인적으로는 간단하게 유지할 것입니다.

<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에서 노드 이름 만 변경하면됩니다.