HTML: Лучший тег для "меток" вне форм

Ответ 1

A список определений может быть здесь полезен:

<dl>
    <dt>Name</dt>
    <dd>John</dd>
    <dt>Age</dt>
    <dd>40</dd>
    <dt>City</dt>
    <dd>Frankfurt</dd>
    <dt>Country</dt>
    <dd>Germany</dd>
    <dt>Status</dt>
    <dd>Active</dd>
</dl>

http://www.w3.org/TR/html401/struct/lists.html#h-10.3 - Списки определений, созданные с помощью элемента DL, обычно состоят из серии пар терминов/определений (хотя списки определения могут иметь другие приложения).

Однако только потому, что вы хотите полужирное форматирование, это не означает, что вы ограничены <strong> или <b>. Вы можете использовать не семантический <span> и просто применять форматирование с помощью CSS.

Кроме того, вы можете использовать CSS для добавления двоеточий, а не для их разметки:

dt:after { content:":"; }

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

http://www.w3.org/TR/html5/grouping-content.html#the-dl-element - Элемент dl представляет собой список ассоциаций, состоящий из нулей или нескольких групп имен (список описаний).

Ответ 2

Это правильное место для структуры DL:

<dl>
   <dt>Name</dt>
   <dd>John</dd>

   <dt>Age</dt>
   <dd>40</dd>

   <dt>City</dt>
   <dd>Frankfurt</dd>

   <dt>Country</dt>
   <dd>Germany</dd>

   <dt>Status</dt>
   <dd>Active</dd>
</dl>

Обратите внимание, что вам нужно добавить стиль, чтобы он выглядел так, но это правильная логическая структура.

Ответ 3

Возможно, вы можете использовать список определений (dl, dt, dd), но это тоже не так.

Поскольку W3C говорит, что он представляет собой подпись для элемента управления формой, текст рядом с меткой не является элементом управления, поэтому атрибут for становится бессмысленным.

Я бы просто пошел с strong, также потому, что это лучшее представление без CSS.

Edit

Так как это касается людей, вы также можете использовать эквивалент vCard для HTML: hCard. Пример:

<div class="vcard">
    <div class="fn">
        <strong class="type">Name</strong>:
        <span class="value">John</span>
    </div>
    <div class="note">
        <strong class="type">Age</strong>:
        <span class="value">40</span>
    </div>
    <div class="adr">
        <div class="locality">
            <strong class="type">City</strong>:
            <span class="value">Frankfurt</span>
        </div>
        <div class="country-name">
            <strong class="type">Country</strong>:
            <span class="value">Germany</span>
        </div>
    </div>
    <div class="note">
        <strong class="type">Status</strong>:
        <span class="value">Active</span>
    </div>
</div>

Затем вы можете использовать столько из них в <ul> или <ol>. Некоторые браузеры распознают эти свойства и превратят их в ссылки для использования с приложением. Например, свойства adr могут ссылаться на инструмент сопоставления.

Это просто стандарт, он не должен быть семантически правильным. Насколько я знаю, вы можете использовать любую разметку (HTML-теги), которая вам нравится в этих hCards. Подробнее см. Ссылку.

Ответ 4

Я бы поспорил для использования тега <dfn>.

Он короткий, семантический и может быть легко стилизован.

<dfn> элемент обозначает определяемый термин; Определение член должен быть задан окружающим <p> , < & секции GT; или группы списка определений (обычно a <dt> , < & дд GT; пара).

Источник: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn

Ответ 5

Я согласен с другими ответами, что список <dl> - это самый семантический вариант. Раньше я никогда не был уверен, что это было правильное использование <dl>, потому что все официальные описания элемента <dl>, который я видел, описывали его как "список определений", который должен использоваться для фактического определения терминов, как в глоссарии ( см. мои комментарии на @Cristian ответ). Однако, посмотрев на последний проект редактора спецификации HTML 5, я заметил, что он был переименован в "список описания", список определения ", а приведенный пример на самом деле очень похож на пример в этом вопросе.

<dfn>, с другой стороны, кажется, предназначен только для фактического определения терминов. Вот некоторые цитаты из приведенной выше ссылки:

Сам элемент dt, когда он используется в элементе dl, не указывает что его содержание определяется термином, но это может быть указано используя элемент dfn.

...

Элемент dfn представляет собой определяющий экземпляр термина. Параметр, группа списка описаний или раздел, который является ближайшим предком элемента dfn, также должен содержать определение для термина, заданного элементом dfn.

Итак, в заключение я бы рекомендовал использовать элемент <dl>, хотя его стиль по умолчанию отличается от примера OP.

Здесь многократно используемый класс CSS для <dl> в стиле примера:

.dl-inline dt, .dl-inline dd {display:inline; margin:0;}
.dl-inline dt:after {content:': '}
.dl-inline dd + dt:before {content:''; display:block;}

<dl class="dl-inline">
	<dt>Name</dt>
	<dd>John</dd>
	<dt>Age</dt>
	<dd>40</dd>
	<!-- ... -->
</dl>