Sémantique et structure des paires nom-valeur
C’est une question avec laquelle je me bats depuis un moment. Quelle est la bonne façon de marquer les paires nom/valeur?
J'adore l'élément <dl>, mais cela pose un problème: il n'y a aucun moyen de séparer une paire d'une autre - elles 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 de décaler correctement les paires visuellement, à la fois en code et en rendu. Si je voulais, par exemple, mais une bordure autour de chaque paire, ce serait un problème.
Nous pouvons indiquer des tables. On pourrait faire valoir que les paires nom-valeur sont des données tabulaires. Cela me semble inexact, mais je vois l'argument. Cependant, le code HTML ne différencie pas le nom de la valeur, sauf en position ou avec l'ajout de noms de classe.
<table>
<tr>
<td>Name</td>
<td>Value</td>
</tr>
<tr>
<td>Name</td>
<td>Value</td>
</tr>
</table>
Cela a beaucoup plus de sens du point de vue visuel, à la fois en code et en CSS. Le style de la bordure susmentionnée est trivial. Cependant, comme mentionné ci-dessus, la sémantique est au mieux floue.
Pensées, commentaires, questions?
Edit/Update C'est peut-être quelque chose que j'aurais dû mentionner explicitement à propos de la structure, mais une liste de définitions pose également le problème de ne pas regrouper sémantiquement les paires. La commande et la frontière implicite entre une dd et une dt sont faciles à comprendre, mais ils se sentent toujours un peu dérangés pour moi.
Merci pour cette question intéressante. Il y a peu de choses à considérer ici.
Qu'est-ce qu'une paire? Deux éléments ensemble. Nous avons donc besoin d’une balise pour cette . Disons que c’est la balise pair.
<pair></pair>
La paire contient la clé et la valeur correspondante:
<pair><key>keyname</key><value>value</value></pair>
Ensuite, nous devons lister les 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 des paires . La mise en page habituelle est celle sous forme de tableau:
key value
key value
et le séparateur facultatif, qui est généralement le côlon:
key : value
key : value
Les deux points peuvent être facilement ajoutés via CSS, mais cela ne fonctionnera certainement pas dans IE.
Le cas décrit ci-dessus est l'idéal. Mais il n’existe pas de balise HTML valide pour s’intégrer facilement.
Pour résumer:
dl est sémantiquement le plus proche, pour des cas simples de clé et de valeur, mais il est difficile d'appliquer des styles visuels .__ (par exemple, pour afficher les paires en ligne ou pour ajouter une bordure rouge à une paire survolée) Le cas qui convient le mieux à dl est le glossaire. Mais ce n'est pas le cas dont nous discutons.
La seule alternative que je puisse voir 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 clés peuvent être liées:
<ul>
<li><a href="/key1">key1</a> value</li>
<li><a href="/key2">key1</a> value</li>
</ul>
Les paires clé/valeur sont généralement stockées dans une base de données, et celles stockent généralement des données tabulaires, Afin que la table convienne mieux à mon humble avis.
Qu'est-ce que tu penses?
XHTML 2 introduit la possibilité de regrouper des termes et des définitions en utilisant l’élément 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> Listes d'amélioration des définitions
Malheureusement, XHTML 2 est mort et HTML5 n'a pas d'élément di
Ainsi, vous pouvez combiner ul > li avec 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>
Je pense qu'une liste de définition est probablement une mauvaise idée. Sémantiquement, ils sont utilisés pour les définitions. Les autres listes de valeurs-clés diffèrent souvent des titres et des descriptions de définitions.
Une table est une solution, mais qu’en est-il d’une liste non ordonnée?
<ul>
<li class="key-value-pair">
<span class="key">foo</span>
<span class="value">bar</span>
</li>
</ul>
Ce n'est pas ma solution préférée, mais c'est un abus habile de l'élément sémantique:
Utilisez une nouvelle paire <dl> par <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>
Un exemple avec des flotteurs css et une bordure rouge en survol:
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>il est difficile de décaler correctement les paires visuellement, à la fois en code et en rendu. Si je voulais, par exemple, mais une bordure autour de chaque paire, ce serait un problème.
D'autres avant moi ont traité (assez bien je pense) avec le problème de fournir une définition visuelle dans le code. Ce qui laisse le problème du rendu et du CSS. Cela peut être fait assez efficacement dans la plupart des cas. La plus grande exception consiste à placer une bordure autour de chaque ensemble de dt/dds, ce qui est certes extrêmement difficile, voire impossible, à un style fiable.
Vous pourriez faire:
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:'→ '; }
Ce qui fonctionne pour les paires clé-valeur, mais pose des problèmes si vous avez plusieurs dds dans un "set" comme:
<dt>Key1</dt>
<dd>Val1.1</dd>
<dd>Val1.2</dd>
<dt>Key2</dt>
<dd>Val2.1</dd>
<dd>Val2.2</dd>
Cependant, hormis les limitations de style de bordure, il est tout à fait possible d'utiliser CSS pour associer des ensembles (arrière-plans, numérotation, etc.). Il y a un bon aperçu ici: http://www.maxdesign.com.au/articles/definition/
Un autre point qui, à mon avis, mérite d’être souligné, si vous souhaitez optimaliser le style des listes de définitions pour séparer visuellement les fonctions de numérotation automatique de CSS (counter-increment et counter-reset) peut s'avérer très utile: http: //www.w3. org/TR/CSS2/generate.html # compteurs
À l'exception de l'élément <dl>, vous avez bien résumé toutes les options de HTML: les options limitées.
Cependant, vous n'êtes pas perdu, il reste une option: utiliser un langage de balisage pouvant être traduit en HTML. Markdown est une très bonne option.
En utilisant une extension de table fournie par certains moteurs de démarques, vous pouvez obtenir un code comme celui-ci:
| Table header 1 | Table header 2 |
-----------------------------------
| some key | some value |
| another key | another value |
Cela signifie que vous avez évidemment besoin d’une étape de compilation pour traduire le Markdown en HTML.
De cette façon, vous obtenez un balisage significatif (table pour les données tabulaires) et du code maintenable.
Suivant les spécifications (et autres détails ) fournies par Alexandr Antonov: use dl, dt, dd et optionnellement div.
Une combinaison de dl, dt et dd est sémantiquement bonne pour les paires clé-valeur:
<dl>
<dt>Key1</dt>
<dd>Value1</dd>
<dt>Key2</dt>
<dd>Value2</dd>
</dl>Pour faciliter le style ou l'analyse, divs peut être utilisé en tant qu'enfant de dl pour grouper les paires clé-valeur (et fait de dt et dd des petits-enfants de 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>Bien sûr, vous pouvez simplement utiliser HTML Custom Elements . ( spec ) Ils sont complètement valides en HTML5.
Malheureusement, la prise en charge des navigateurs n’est pas très intéressante, mais s’il est rare que nous nous préoccupions de choses aussi simples que la prise en charge des navigateurs lorsque nous traitons de la sémantique. :-)
Une façon telle que vous pourriez le représenter:
Après avoir enregistré votre nouvel élément fantaisie, procédez comme suit:
var XKey = document.registerElement('x-key');
document.body.appendChild(new XKey());
Vous écrivez le balisage comme suit:
<ul>
<li>
<x-key>Name</x-key>
Value
</li>
</ul>
La seule condition des éléments HTML Custom est qu’ils ont besoin d’un tiret. Bien sûr, vous pouvez maintenant être très créatif ... si vous construisez un entrepôt de pièces automobiles, avec des listes de pièces et des numéros de série:
<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>
Vous ne pouvez pas obtenir beaucoup plus sémantique que cela!
Cependant, il est IS possible que je sois allé trop loin dans semantic-shangri-la-la (un endroit réel) et que je sois tenté de le réduire à quelque chose d'un peu plus générique:
<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>
Ou peut-être ceci (si j'avais besoin de styler et de montrer la clé visuellement)
<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>
Hmm. dtdd sonnera mieux pour cela et _/il est possible de les compenser visuellement, même si je conviens que c'est plus difficile que pour une table.
En ce qui concerne la lisibilité du code source, pourquoi ne pas les mettre en ligne?
<dl>
<dt>Name</dt> <dd>Value</dd>
<dt>Name</dt> <dd>Value</dd>
</dl>
Je conviens que ce n'est pas parfait à 100%, mais vu que 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>
c'est peut-être le moyen le plus gentil.
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>J'ai utilisé <dl><dt><dd> et les ai coiffés avec une grille
Pourquoi ne pas placer une ligne vierge entre chaque paire?
Cela ne nécessite aucune manipulation spéciale pour les valeurs longues.
<dl>
<dt>Name</dt>
<dd>Value</dd>
<dt>Name</dt>
<dd>Value</dd>
<dt>Name</dt>
<dd>Value</dd>
</dl>
Qu'en est-il de l'utilisation des listes?
Commandé:
<ol>
<li title="key" value="index">value</li>
…
</ol>
Ou utilisez <ul> pour une liste non ordonnée et ignorez le bit value="index".
La ligne de spec :
Les groupes de noms-valeurs peuvent être des termes et définitions, des sujets et des valeurs de métadonnées, des questions et réponses, ou tout autre groupe de données nom-valeur.
J'assume l'utilisation des éléments <dl>, <dt> et <dd>.