wake-up-neo.com

Semantik und Struktur von Name-Value-Paaren

Mit dieser Frage habe ich seit einiger Zeit zu kämpfen. Wie kann man Namen/Wert-Paare richtig kennzeichnen?

Ich mag das <dl> -Element, aber es stellt ein Problem dar: Es gibt keine Möglichkeit, ein Paar von einem anderen zu trennen - es gibt keinen eindeutigen Container. Visuell fehlt dem Code eine Definition. Semantisch denke ich, dass dies der richtige Markup ist.

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

Im obigen Code ist es schwierig, die Paare visuell richtig zu versetzen, sowohl im Code als auch beim Rendern. Wenn ich zum Beispiel aber einen Rand um jedes Paar wollte, wäre das ein Problem.

Wir können auf Tische zeigen. Es könnte argumentiert werden, dass Name-Wert-Paare Tabellendaten sind. Das scheint mir falsch zu sein, aber ich sehe das Argument. Der HTML-Code unterscheidet den Namen jedoch nicht vom Wert, außer in position oder durch das Hinzufügen von Klassennamen.

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

Dies ist sowohl vom Code als auch vom CSS aus visueller Sicht viel sinnvoller. Die Gestaltung der erwähnten Bordüre ist trivial. Wie oben erwähnt, ist die Semantik jedoch bestenfalls unscharf.

Gedanken, Kommentare, Fragen?

Edit/Update Vielleicht hätte ich dies in Bezug auf die Struktur explizit erwähnen sollen, aber eine Definitionsliste hat auch das Problem, die Paare nicht semantisch zu gruppieren. Die Reihenfolge und die implizite Grenze zwischen einer dd und einer dt ist leicht zu verstehen, aber sie fühlen sich mir immer noch etwas an.

66
Ryan Kinal

Danke für diese interessante Frage. Hier gibt es noch ein paar Dinge zu beachten.

Was ist ein paar Zwei Elemente zusammen. Wir brauchen also ein Tag für diesen . Nehmen wir an, es ist pair Tag.

 <pair></pair>

Das Paar enthält den Schlüssel und den entsprechenden Wert:

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

Dann müssen wir die Paare auflisten:

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

Das nächste, was zu beachten ist, ist die Anzeige der Paare .. _. Das übliche Layout ist das tabellarische:

key value
key value

und das optionale Trennzeichen (normalerweise Doppelpunkt):

key : value
key : value

Die Doppelpunkte können einfach über CSS hinzugefügt werden, dies funktioniert jedoch im IE nicht.

Der oben beschriebene Fall ist der ideale. Es gibt jedoch kein gültiges HTML-Markup, in das sich dies problemlos einfügen lässt.


Um zusammenzufassen: 

dl ist für einfache Fälle von Schlüssel und Wert semantisch am nächsten, aber es ist schwierig, visuelle Stile anzuwenden Der Fall, der am meisten für dl passt, ist ein Glossar. Dies ist jedoch nicht der Fall, den wir diskutieren.

Die einzige Alternative, die ich in diesem Fall sehen kann, ist die Verwendung von table wie folgt:

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

Einer noch:

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

oder:

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

oder, wenn die Schlüssel verknüpft werden können:

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

Die Schlüssel- und Wertepaare werden normalerweise in der Datenbank gespeichert, und diese speichern normalerweise Tabellendaten, Die Tabelle passt also am besten zu IMHO.

Was denkst du?

48
takeshin

XHTML 2 ermöglicht die Gruppierung von Begriffen und Definitionen mit dem Element 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> Erweiterung der Definitionslisten

Leider ist XHTML 2 jedoch tot und HTML5 hat kein di-Element

Sie können also ul > li mit dl > dt + dd kombinieren:

<ul>    
    <li>
        <dl>
            <dt>Name</dt>
            <dd>John</dd>
        </dl>
    </li>
    <li>
        <dl>
            <dt>Age</dt>
            <dd>25</dd>
        </dl>
    </li>
</ul>
12
Yukulélé

Ich denke, eine Definitionsliste ist wahrscheinlich eine schlechte Idee. Semantisch werden sie für Definitionen verwendet. Andere Schlüsselwertlisten unterscheiden sich häufig von Definitionstiteln und Beschreibungen.

Eine table ist ein Weg, aber was ist mit einer ungeordneten Liste?

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

Dies ist nicht meine bevorzugte Lösung, sondern ein kluger Missbrauch des semantischen Elements:

Verwenden Sie ein neues <dl> pro <dt>/<dd>-Paar:

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

Ein Beispiel mit css floats und rotem Rand im Hover:

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>

3
Iiridayn

es ist schwierig, die Paare visuell richtig zu versetzen, sowohl im Code als auch beim Rendern. Wenn ich zum Beispiel aber einen Rand um jedes Paar wollte, wäre das ein Problem.

Andere vor mir haben sich ziemlich gut mit dem Problem der visuellen Definition von Code befasst. Was bleibt das Problem des Renderns und CSS. Dies kann in den meisten Fällen sehr effektiv erfolgen. Die größte Ausnahme ist das Platzieren eines Rahmens um jeden Satz von dt/dds, was zugegebenermaßen äußerst kniffelig ist - möglicherweise nicht zuverlässig zu stylen ist.

Du könntest es tun:

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

Was für Schlüsselwerte PAIRS funktioniert, stellt jedoch Probleme dar, wenn Sie mehrere DDS in einem "Set" haben, wie:

<dt>Key1</dt>
  <dd>Val1.1</dd>
  <dd>Val1.2</dd>
<dt>Key2</dt>
  <dd>Val2.1</dd>
  <dd>Val2.2</dd>

Abgesehen von den Randbeschränkungen, ist es jedoch mit CSS durchaus möglich, andere Sätze zuzuordnen (Hintergründe, Nummerierung usw.). Hier gibt es einen schönen Überblick: http://www.maxdesign.com.au/articles/definition/


Ein weiterer Punkt ist meiner Meinung nach erwähnenswert, wenn Sie nach Definitionslisten mit optimaler Formatierung suchen, um eine visuelle Trennung zu ermöglichen. Die automatischen Nummerierungsfunktionen von CSS (counter-increment und counter-reset) können sehr nützlich sein: http: //www.w3. org/TR/CSS2/generate.html # counters

2
lucideer

Mit Ausnahme des Elements <dl> haben Sie alle Optionen von HTML so gut wie möglich zusammengefasst: begrenzte.

Sie sind jedoch nicht verloren, es gibt nur noch eine Option: Verwenden einer Markup-Sprache, die in HTML übersetzt werden kann. Eine sehr gute Option ist Markdown.

Mit einer Tabellenerweiterung, die einige Markdown-Engines bieten, können Sie Code wie folgt verwenden:

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

Das bedeutet, dass Sie einen Build-Schritt benötigen, um den Markdown natürlich in HTML zu übersetzen.

Auf diese Weise erhalten Sie aussagekräftige Markierungen (Tabelle für Tabellendaten) und wartbaren Code.

1

Gemäß der Spezifikation (und weiteren Details ) von Alexandr Antonov: verwenden Sie dl, dt, dd und optional div.

Eine Kombination aus dl, dt und dd ist für Schlüssel-Wert-Paare semantisch in Ordnung:

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

Zum einfacheren Stilisieren oder Parsen können divs als Kinder von dl verwendet werden, um die Schlüssel-Wert-Paare zu gruppieren (und dt und dd werden zu Enkelkindern von 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>

1
Danny Lin

Natürlich können Sie auch HTML Custom-Elemente verwenden. ( spec ) Sie sind vollständig gültiges HTML5. 

Leider ist die Browserunterstützung nicht so toll, aber wenn es um Semantik geht, kümmern wir uns selten um die Fußgängerunterstützung wie die Browserunterstützung. :-)

So könnte man es darstellen:

Nachdem Sie Ihr brandneues Fancy-Element wie folgt registriert haben:

var XKey = document.registerElement('x-key');
document.body.appendChild(new XKey());

Sie schreiben Markup so:

<ul>
  <li>
    <x-key>Name</x-key>
    Value
  </li>
</ul>

Die einzige Bedingung, die benutzerdefinierte HTML-Elemente haben, ist, dass sie einen Bindestrich benötigen. Natürlich können Sie jetzt super kreativ sein, wenn Sie ein Autoteilelager mit Listen von Teilen und Seriennummern bauen:

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

Sie können nicht viel mehr semantisch als das bekommen!

Allerdings gibt es IS eine Chance, die ich zu weit in semantic-shangri-la-la (einem echten Ort) gegangen bin, und könnte versucht sein, ihn auf etwas generischeres zu skalieren:

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

Oder vielleicht das (wenn ich den Schlüssel visuell gestalten und anzeigen musste)

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

Hmm. dt/dd klingt dafür am besten und es ist möglich , sie visuell auszugleichen, obwohl es meiner Meinung nach schwieriger ist als für einen Tisch.

Wie sieht es mit der Lesbarkeit des Quellcodes aus?

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

Ich bin damit einverstanden, dass es nicht 100% perfekt ist, aber da Sie Leerzeichen zum Einrücken verwenden können:

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

es könnte der schönste Weg sein.

1
Unicron

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>

Ich habe <dl><dt><dd> verwendet und sie mit einem Raster versehen

Wie wäre es, wenn Sie zwischen jedem Paar eine Leerzeile platzieren?

Dies erfordert keine besondere Behandlung für lange Werte.

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

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

    <dt>Name</dt> 
    <dd>Value</dd> 
</dl> 
0
Philip Smith

Was ist mit der Verwendung von Listen?

Bestellt:

<ol>
  <li title="key" value="index">value</li>
  …
</ol>

Oder verwenden Sie <ul> für eine ungeordnete Liste und überspringen Sie das value="index"-Bit.

0
Dave Sag

Die Zeile von spec :

Namenswertgruppen können Begriffe und Definitionen, Metadatenthemen und -werte, Fragen und Antworten oder beliebige andere Gruppen von Namenswertdaten sein.

Ich gehe davon aus, dass die Elemente <dl>, <dt> und <dd> verwendet werden.

0