Семантика и структура пар имя-значение - PullRequest
Новая
       74

Семантика и структура пар имя-значение

68 голосов
/ 19 июля 2010

Это вопрос, с которым я долго боролся.Как правильно разметить пары имя / значение?

Мне нравится элемент

Ответы [ 14 ]

51 голосов
/ 19 июля 2010

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

Что такое пара? Два элемента вместе. Поэтому нам нужен тег для этого. Допустим, это тег 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 семантически ближе всего, для простых случаев ключа и значения, но трудно применять визуальные стили (например, чтобы отобразить пары в строке или добавить красную рамку для только что зависшей пары). Корпус, который больше всего подходит для 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>

Пары ключ и значение обычно хранятся в базе данных, и они обычно хранят табличные данные, так что таблица подойдет лучше всего ИМХО.

Что вы думаете?

12 голосов
/ 27 февраля 2013

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 против XHTML 2> Расширение списков определений

К сожалению, XHTML 2 мертв, а в HTML5 нет элемента di

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

<ul>    
    <li>
        <dl>
            <dt>Name</dt>
            <dd>John</dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>Age</dt>
            <dd>25</dd>
        </dl>
    </li>
</ul>
6 голосов
/ 19 июля 2010

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

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

<ul>
    <li class="key-value-pair">
        <span class="key">foo</span>
        <span class="value">bar</span>
    </li>
</ul>
3 голосов
/ 13 мая 2018

Согласно спецификации (и подробности ), предоставленной Александром Антоновым: используйте dl, dt, dd и, необязательно, div.

Комбинация dl, dt и dd семантически подходит для пар ключ-значение: 

<dl>
    <dt>Key1</dt>
    <dd>Value1</dd>
    <dt>Key2</dt>
    <dd>Value2</dd>
</dl>

Для упрощения стилизации или разбора div s можно использовать как дочерние элементы dl для группировки пар ключ-значение (и делает dt и dd внуками dl): 

dl { display: table; }
dl > div { display: table-row; }
dl > div > dt, dl > div > dd { display: table-cell; border: 1px solid black; padding: 0.25em; }
dl > div > dt { font-weight: bold; }
<dl>
  <div>
    <dt>Key1</dt>
    <dd>Value1</dd>
  </div>
  <div>
    <dt>Key2</dt>
    <dd>Value2</dd>
  </div>
</dl>
3 голосов
/ 28 июня 2013

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

Используйте новую <dl> на <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>

Пример с плавающими 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>
2 голосов
/ 29 сентября 2018 

dl {
  display: grid;
  grid-template-columns: auto auto;
}

dd {
  margin: 0
}
<dl>
  <dt>key</dt>
  <dd>value</dd>
  <dt>key</dt>
  <dd>value</dd>
</dl>

Я использовал <dl> <dt> <dd> и стилизовал их под сетку

2 голосов
/ 25 июля 2016

Конечно, вы можете просто использовать Пользовательские элементы 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>
2 голосов
/ 19 июля 2010

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

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

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

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:'→ '; }

Что работает для ключа-value 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

1 голос
/ 31 мая 2013

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

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

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

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

Это означает, что вам необходим шаг сборки для перевода Markdown в HTML.

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

1 голос
/ 19 июля 2010

Хм. 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>

это может быть самый хороший способ.

Страница:
...