Bu bir süredir mücadele ettiğim bir soru. Ad/değer çiftleri işaretlemek için doğru yol nedir?

Bu düşkün < yapıyorum;> dl; öğesi, ama bir sorun sunar: başka bir çifti ayırmak için bir yol Yoktur - tek bir konteyner var. Görsel olarak, kod tanımı yoktur. Bu doğru biçimlendirme olduğunu düşünüyorum ama anlamsal,.

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

Yukarıdaki kodu düzgün Çift görme dengelemek için zor, Kodu ve işlenmiş hem de. Eğer, örneğin, ama her çift etrafında bir sınır isteseydim, böyle bir sorun yaşanmayacaktı.

Masaları işaret edebiliriz. Ad-değer çiftleri sekmeli veri olduğu söylenebilir. Bu bana yanlış gibi görünüyor, ama bu tartışmayı görüyorum. Ancak, HTML değeri Adı, Sınıf isimleri birlikte pozisyon dışında, ya da ayrım yapmaz.

<table>
    <tr>
        <td>Name</td>
        <td>Value</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Value</td>
    </tr>
</table>

Bu görsel açıdan çok daha mantıklı, CSS kodu ve yapar. Söz konusu sınır stil saçmadır. Yukarıda da belirtildiği gibi, ancak anlambilim en iyi ihtimalle bulanık.

Düşünceler, sorular, yorumlar?

/Güncelleme Düzenlemek Belki de bu açıkça yapısına ilişkin söylemiş olmam gereken bir şey vardı, ama tanımlı bir liste de değil anlamsal çiftleri gruplandırma sorunu vardır. dd dt Bir bir arasında sıralama ve kapalı sınırın kolayca anlaşılıyor, ama onlar hala benim için biraz kapalı hissediyorum.

Bu ilginç soru için teşekkürler. Burada dikkate alınması gereken birkaç şey daha var.

Bir çift nedir? İki unsurun bir araya. Bunun için bir etikete ihtiyacımız var. Hadi pair etiket olduğunu söylüyorlar.

 <pair></pair>

Çift anahtar ve karşılık gelen değeri içerir:

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

Sonra, çiftleri listesine ihtiyacımız var:

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

Dikkate sonraki şey, çift ekran. Her zamanki düzeni tablo:

key value
key value

ve genellikle kolon olan isteğe bağlı ayırıcı:

key : value
key : value

İki nokta üst üste CSS ile eklenebilir, ama bu kesinlikle IE işe yaramaz.

Yukarıda açıklanan durum ideal bir. Ama bu kolayca uyum için geçerli HTML biçimlendirme yok.

Özetle:

dl en yakın anlamsal, anahtarı ve değeri basit durumlar için, ama görsel stiller uygulamak zor (örn. çift satır içi görüntüleme için veya sadece süpürdü çift) kırmızı kenarlık eklemek için. dl en uygun durumda sözlük. Ama biz bu davadan değil.

Bu durumda tek alternatif bu gibi table kullanmak için:

<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>

Bir tane daha:

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

ya da:

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

veya, anahtarları bağlantılı olabilir:

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

Anahtar ve değer çiftleri genellikle veritabanı, ve bu genellikle mağaza sekmeli veri,saklanır tablo en iyi IMHO uygun olur.

Ne düşünüyorsun?