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

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

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

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

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

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

Таблица - один из возможных вариантов, но как насчет неупорядоченного списка?

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

Как насчет того, чтобы просто поместить пустую строку между каждой парой?

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

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

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

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

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

Другие до меня решали (я думаю, довольно хорошо) проблему обеспечения визуального определения в коде. Остается проблема рендеринга и 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:'→ '; }

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

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

это может быть самый лучший способ.