Какие html-разметки использовать для отображения данных метки / значения?

Question

Я хочу отобразить пользовательский контейнер профиля, который содержит список меток и связанных с ними значений.

Вот выдержка из информации и макета, которые я хотел бы показать:

Имя.......Мое имя

Возраст...................Мой возраст

Адрес электронной почты................Моя электронная почта

Я знаю, что есть масса доступных примеров, но проблема в том, что, похоже, общепринятого решения не существует.

До сих пор я видел следующее использование :

1. Таблица с разметкой (и < тр >,< td >...)
2. Неупорядоченный список с < ul > разметка (и < li >, < div >...)
3. Регулярные наценки с < h1 >,< h2 >...< p >
4. Список определений с < ДЛ >, < DT > и < DD >
5. < метка >...?

Что является наиболее семантически правильным?Что проще всего отобразить (в формате из 2 столбцов)?Что вы посоветуете мне использовать и по каким причинам?

(фрагменты кода html / css более чем приветствуются)

Answer 1

Ух ты.Мы действительно напугали всех заявлением “Сервировка столов - это зло!Используй CSS!”, не так ли?

Стол — с <th> для этикеток и <td> для значений — идеально применим к такого рода контенту, предоставляет вам желаемый рендеринг и, по крайней мере, столь же семантически корректен, как список определений, а возможно, и более того.Любой из них предпочтительнее, чем divs без семантики.

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

Я знаю, что на этот вопрос был дан ответ, но я думаю, что списки определений могут быть вполне уместны.
Я согласен с боббинс что таблицы всегда подходят для табличных данных...
Однако я использовал это в ряде случаев, где предпочитал избегать таблиц, и я не думаю, что это неправильный метод.

Списки определений:

<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%;
}

Причина отсутствия ссылки на какое-либо конкретное имя узла html в CSS заключается в том, что, если в будущем появится признанный способ сделать это, вам нужно будет только изменить имена узлов в своем HTML.