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

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

Вот фрагмент информации и макета, который я хотел бы отобразить:

Имя... MyName

Возраст................... туАде

электронной почты................ MyEmail

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

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

  • Таблица с разметкой (и <tr> , <td> ...)
  • Неупорядоченный список с <ul> markup (и <li> <div> ...)
  • Регулярные разметки с < h1 > , < h2 > ... <p>
  • Список определений с <DL> , <DT> и <DD>
  • <label> ...?

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

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

Ответы

Ответ 1

Ого. Мы действительно напугали всех: "Табличные макеты - это зло! Используйте CSS!" не так ли?

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

Ответ 2

Я думаю, что наиболее семантически корректным будет <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> доступна здесь.

Ответ 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;
}

Ответ 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 Node в CSS заключается в том, что если в будущем будет признанный способ сделать это, вам нужно будет только изменить имена Node в вашем HTML.