Семантика и структура пар именных значений

Ответ 1

Спасибо за этот интересный вопрос. Здесь есть еще несколько вещей.

Что такое пара? Два элемента вместе. Поэтому для этого нам нужен тег. Скажем, это тег pair.

 <pair></pair>

Пара содержит ключ и соответствующее значение:

 <pair><key>keyname</key><value>value</value></pair>

Затем нам нужно указать пары:

<pairlist>
     <pair><key>keyname</key><value>value</value></pair>
     <pair><key>keyname</key><value>value</value></pair>
</pairlist>

Следующее, что нужно учитывать, - это отображение пар. Обычный макет является табличным:

key value
key value

и необязательный разделитель, который обычно имеет двоеточие:

key : value
key : value

Двоеточия могут быть легко добавлены через CSS, но это, безусловно, не будет работать в IE.

Случай, описанный выше, является идеальным. Но нет допустимой HTML-разметки, чтобы легко вписаться в это.

Подводя итог:

dl является семантически близким, для простых случаев ключа и значения, но трудно применять визуальные стили (например, чтобы отобразить пары inline или добавить красную границу только к паре с парой). Наиболее подходящим для dl является глоссарий. Но это не тот случай, который мы обсуждаем.

Единственной альтернативой, которую я вижу в этом случае, является использование table, например:

<table summary="This are the key and value pairs">
    <caption>Some notes about semantics</caption>
    <thead class="aural if not needed">
        <tr><th scope="col">keys</th><th scope="col">values</th></tr>
    </thead>
    <tbody class="group1">  
        <tr><th scope="row">key1</th><td>value1</td></tr>
        <tr><th scope="row">key2</th><td>value2</td></tr>
    </tbody>
    <tbody class="group2">
        <tr><th scope="row">key3</th><td>value3</td></tr>
        <tr><th scope="row">key4</th><td>value4</td></tr>
    </tbody>
</table>

Еще одно:

<ul>
  <li><strong>key</strong> value</li>
  <li><strong>key</strong> value</li>
</ul>

или

<ul>
  <li><b>key</b> value</li>
  <li><b>key</b> value</li>
</ul>

или, если ключи могут быть связаны:

<ul>
  <li><a href="/key1">key1</a> value</li>
  <li><a href="/key2">key1</a> value</li>
</ul>

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

Как вы думаете?

Ответ 2

XHTML 2 вводит возможность группировать термины и определения с помощью элемента di

<!-- Do not us this code! -->
<dl>
    <di>
        <dt>Name</dt>
        <dd>John</dd>
    </di>
    <di>
        <dt>Age</dt>
        <dd>25</dd>
    </di>
</dl>

X/HTML 5 vs XHTML 2 > Расширение списков определений

unfortunatly XHTML 2 мертв, а HTML5 не имеет элемента di

Итак, вы можете комбинировать ul > li с dl > dt + dd:

<ul>    
    <li>
        <dl>
            <dt>Name</dt>
            <dd>John</dt>
        </dl>
    </li>
    <li>
        <dl>
            <dt>Age</dt>
            <dd>25</dt>
        </dl>
    </li>
</ul>

Ответ 3

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

A table - один из способов, но как насчет неупорядоченного списка?

<ul>
    <li class="key-value-pair">
        <span class="key">foo</span>
        <span class="value">bar</span>
    </li>
</ul>

Ответ 4

Это не мое предпочтительное решение, но это умное злоупотребление семантическим элементом:

Используйте новую пару <dl> per <dt>/<dd>:

<div class="terms">
    <dl><dt>Name 1</dt><dd>Value 1</dd></dl>
    <dl><dt>Name 2</dt><dd>Value 2</dd></dl>
</div>

Пример с float css и красной рамкой при наведении:

dt:after { content:":"; }
dt, dd { float: left; }
dd { margin-left: 5px }
dl { float: left; margin-left: 20px; border: 1px dashed transparent; }
dl:hover { border-color: red; }

<div class="terms">
    <dl>
        <dt>Name 1</dt>
        <dd>Value 1</dd>
    </dl><!-- etc -->
    <dl><dt>Name 2</dt><dd>Value 2</dd></dl>
    <dl><dt>Name 3</dt><dd>Value 3</dd></dl>
    <dl><dt>Name 4</dt><dd>Value 4</dd></dl>
    <dl><dt>Name 5</dt><dd>Value 5</dd></dl>
    <dl><dt>Name 6</dt><dd>Value 6</dd></dl>
</div>

Ответ 5

Хм. dt/dd лучше всего подходит для этого, и визуально можно их компенсировать, хотя я согласен с этим сложнее, чем для таблицы.

Что касается читаемости исходного кода, как насчет их ввода в одну строку?

<dl>
    <dt>Name</dt> <dd>Value</dd>
    <dt>Name</dt> <dd>Value</dd>
</dl>

Я согласен, что не на 100% отлично, но вижу, как вы можете использовать пробелы для отступов:

<dl>
    <dt>Property with a looooooooooong name</dt>   <dd>Value</dd>
    <dt>Property with a shrt name</dt>             <dd>Value</dd>
</dl>

это может быть самым приятным способом.

Ответ 6

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

Остальные передо мной разобрались (довольно хорошо, я думаю) с проблемой предоставления визуального определения в коде. Что оставляет проблему рендеринга и CSS. В большинстве случаев это можно сделать довольно эффективно. Самым большим исключением является размещение границы вокруг каждого набора dt/dds, что, по общему признанию, чрезвычайно сложно - возможно, невозможно надежно стилизовать.

Вы можете сделать:

dt,dd{ border:solid; }
dt{ margin:10px 0 0 0; border-width:1px 1px 0 1px; }
dd{ margin:0 0 10px 0; border-width:0 1px 1px 1px; padding:0 0 0 10px; }
dd::before{ content:'→ '; }

Что работает для ключевых значений PAIRS, но представляет проблемы, если у вас есть несколько dds в одном "наборе", например:

<dt>Key1</dt>
  <dd>Val1.1</dd>
  <dd>Val1.2</dd>
<dt>Key2</dt>
  <dd>Val2.1</dd>
  <dd>Val2.2</dd>

Тем не менее, ограничения на пограничный стиль в стороне, что делает что-то еще для объединения наборов (фоны, нумерация и т.д.), вполне возможно с помощью CSS. Здесь хороший обзор: http://www.maxdesign.com.au/articles/definition/

Еще один момент, о котором я думаю, стоит отметить, если вы ищете оптимальный стиль определения списков для обеспечения визуального разделения - функции автоматической нумерации CSS (counter-increment и counter-reset) могут оказаться весьма полезными: http://www.w3.org/TR/CSS2/generate.html#counters

Ответ 7

За исключением элемента <dl>, вы в значительной степени суммировали все варианты HTML: ограниченные.

Однако вы не потерялись, остается один вариант: использование языка разметки, который можно перевести в HTML. Очень хороший вариант - Markdown.

Используя расширение таблицы, которое предоставляют некоторые механизмы разметки, вы можете иметь такой код:

| Table header 1 | Table header 2 |
-----------------------------------
| some key       | some value     |
| another key    | another value  |

Это означает, что вам нужен шаг построения, чтобы, конечно, перевести Markdown в HTML.

Таким образом вы получаете значимую разметку (таблица для табличных данных) и поддерживаемый код.

Ответ 8

Конечно, вы можете просто использовать HTML-пользовательские элементы. (spec) Они полностью соответствуют HTML5.

К сожалению, поддержка браузеров не такая уж большая, но если мы редко заботимся о таких пешеходных вещах, как поддержка браузера, когда мы имеем дело с семантикой.: -)

Один из способов, которым вы могли бы это представить:

После регистрации вашего нового модного элемента, например:

var XKey = document.registerElement('x-key');
document.body.appendChild(new XKey());

Вы пишете разметку следующим образом:

<ul>
  <li>
    <x-key>Name</x-key>
    Value
  </li>
</ul>

Единственное условие, что HTML-пользовательские элементы заключаются в том, что им нужна тире. Конечно, теперь вы можете стать супер-творческим... если вы строите склад автозапчастей со списками деталей и серийными номерами:

<ul>
  <li>
    <auto-part>
      <serial-number>AQ12345</serial-number>
      <short-description>lorem ipsum dolor...</short-description>
      <list-price>14</list-price>
    </auto-part>
  </li>
</ul>

Вы не можете получить гораздо больше семантического, чем это!

Однако, есть шанс, что я зашел слишком далеко в semantic-shangri-la-la (реальное место), и у меня может возникнуть соблазн изменить его на нечто более общее:

<ul>
  <li class='auto-part' data-serial-number="AQ12345">
      <p class='short-description'>lorem ipsum dolor...</p>
      <p class='list-price'>14</p>
  </li>
</ul>

Или, возможно, это (если мне нужно было стилизовать и показать ключ визуально)

<ul>
  <li class='auto-part'>
      <x-key>AQ12345<//x-key>
      <p class='short-description'>lorem ipsum dolor...</p>
      <p class='list-price'>14</p>
  </li>
</ul>

Ответ 9

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

<dl>
    <dt>Name</dt>
       <dd>Value</dd>
    <dt>Name</dt>
       <dd>Value</dd>
</dl>

Этот способ может быть немного проще на глаза в смехотворно длинных определениях (хотя, если вы используете смехотворно неправильные определения, то, возможно, список определений не то, что вы действительно хотите в конце концов).

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

Ответ 10

Как просто разместить пустую строку между каждой парой?

Это не требует специальной обработки для длинных значений.

<dl> 
    <dt>Name</dt> 
    <dd>Value</dd> 

    <dt>Name</dt> 
    <dd>Value</dd> 

    <dt>Name</dt> 
    <dd>Value</dd> 
</dl> 

Ответ 11

Как насчет использования списков?

упорядоченный:

<ol>
  <li title="key" value="index">value</li>
  …
</ol>

Или используйте <ul> для неупорядоченного списка и пропустите бит value="index".

Ответ 12

Строка из spec:

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

Я предполагаю использование элементов <dl>, <dt> и <dd>.