La sémantique et la Structure de Paires Nom-Valeur

Question

C'est une question que j'ai lutté avec pendant un certain temps. Quelle est la bonne façon de marquer des paires nom/valeur?

Je suis friand de l' <dl> élément, mais il pose un problème: Il n'existe aucun moyen de les séparer l'une de paire à partir d'un autre - ils n'ont pas de conteneur unique. Visuellement, le code manque de définition. Sémantiquement, cependant, je pense que c'est le balisage correct.

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

Dans le code ci-dessus, il est difficile d'équilibrer correctement les paires visuellement, à la fois dans le code et les rendus. Si je voulais, par exemple, mais une bordure autour de chaque paire, ce serait un problème.

On peut souligner à des tables. Il pourrait être soutenu que les paires nom-valeur sont données tabulaires. Qui semble incorrect pour moi, mais je vois l'argument. Cependant, le HTML ne permet pas de différencier le nom de la valeur, à l'exception de la position, ou avec l'ajout des noms de classe.

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

Cela fait beaucoup plus de sens d'un point de vue visuel, à la fois dans le code et dans le CSS. Style de ladite frontière, est trivial. Cependant, comme mentionné ci-dessus, la sémantique est floue au mieux.

Des pensées, des commentaires, des questions?

Modifier/Mettre À Jour Peut-être que c'était quelque chose que je devrais avoir explicitement mentionné en relation avec la structure, mais une liste de définition a aussi le problème de ne pas sémantiquement regroupement des paires. La commande et implicites de la frontière entre l' dd et dt est facile à comprendre, mais ils se sentent encore un peu hors de moi.

Answer 1

Merci pour cette question intéressante. Il ya quelques choses à considérer ici.

Qu'est ce qu'une paire? Deux éléments ensemble. Nous devons donc besoin d'un point pour cet. Disons que c'est - pair balise.

 <pair></pair>

La paire contient la clé, et la valeur correspondante:

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

Ensuite, nous avons besoin de la liste des paires:

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

La prochaine chose à considérer est l'affichage de la paire. La disposition ordinaire est le tableau d'un:

key value
key value

et l'option séparateur, qui est généralement de deux points:

key : value
key : value

Les deux points peuvent être facilement ajoutés via le CSS, mais ce ne sera certainement pas dans IE.

Le cas décrit ci-dessus est la solution idéale. Mais il n'y a pas de balise HTML dans ce facilement.

---

Pour résumer:

dl est sémantiquement plus proche, pour les cas les plus simples de la clé et de la valeur, mais il est difficile d'appliquer des styles visuels (eg. pour afficher les paires en ligne ou ajouter des bordure rouge à juste plané paire). Le cas qui correspond à la plupart de dl glossaire. Mais ce n'est pas le cas, nous discutons.

La seule alternative que je vois dans ce cas est d'utiliser table, comme ceci:

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

Un de plus:

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

ou:

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

ou, lorsque les touches peuvent être liées:

<ul>
  <li><a href="http://stackoverflow.com/key1">key1</a> value</li>
  <li><a href="http://stackoverflow.com/key2">key1</a> value</li>
</ul>

Les paires clé-valeur sont généralement stockés dans la base de données, et de ceux généralement de stocker des données tabulaires, de sorte que le tableau serait le mieux à mon humble avis.

Qu'en pensez-vous?

Answer 2

XHTML 2 introduit la possibilité de grouper des termes et des définitions à l'aide de l' <di> élément

<dl>
    <di>
        <dt>Name</dt>
        <dd>John</dt>
    </di>
    <di>
        <dt>Age</dt>
        <dd>25</dt>
    </di>
</dl>

http://xhtml.com/en/future/x-html-5-versus-xhtml-2/#x2-cool-def-list

malheureusement, le XHTML 2 est mort et HTML5 n'ont pas d' <di> élément

Ainsi, vous pouvez combiner <ul> > <li> avec <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>

Answer 3

Je pense que une liste de définitions est probablement une mauvaise idée. Sémantiquement, ils sont utilisés pour les définitions. D'autres clés-des listes de valeurs diffèrent souvent à partir d'une définition des titres et des descriptions.

Un table est une façon d'aller, mais qu'une liste non-ordonnée?

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

Answer 4

Ce n'est pas ma solution préférée, mais c'est un savant de l'abus de l'élément sémantique:

L'utilisation d'un nouveau <dl> % <dt>/<dd> paire de:

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

Un exemple avec les css des flotteurs et bordure rouge sur le vol stationnaire: http://jsfiddle.net/6c9AV/2/

Answer 5

Hmm. dt/dd son mieux pour cela et il est possible de compenser visuellement, même si je suis d'accord c'est plus difficile que pour une table.

Comme pour la lisibilité du code source, comment mettre en une seule ligne?

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

Je suis d'accord ce n'est pas parfait à 100%, mais comme vous pouvez utiliser des espaces pour l'indentation:

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

il pourrait être la façon la plus agréable.