Semantik und Struktur von Name-Wert-Paaren

Mit dieser Frage habe ich schon eine Weile zu kämpfen. Was ist der richtige Weg, um Name / Wert-Paare zu markieren?

Ich mag das <dl> -Element sehr, aber es stellt ein Problem dar: Es gibt keine Möglichkeit, ein Paar von einem anderen zu trennen - sie haben keinen eindeutigen Container. Visuell fehlt dem Code die Definition. Semantisch denke ich jedoch, dass dies das 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 gerendert. Wenn ich zum Beispiel nur eine Grenze um jedes Paar haben wollte, wäre das ein Problem.

Wir können auf Tabellen zeigen. Es könnte argumentiert werden, dass Name-Wert-Paare tabellarische Daten sind. Das scheint mir falsch, aber ich sehe das Argument. Der HTML-Code unterscheidet den Namen jedoch nicht vom Wert, außer an der Position oder durch Hinzufügen von Klassennamen.

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

Dies ist vom visuellen Standpunkt aus viel sinnvoller, sowohl im Code als auch im CSS. Das Styling des oben genannten Randes ist trivial. Wie oben erwähnt, ist die Semantik jedoch bestenfalls unscharf.

Gedanken, Kommentare, Fragen?

Bearbeiten / Aktualisieren 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 implizite Grenze zwischen a ddund a dtist leicht zu verstehen, aber sie fühlen sich für mich immer noch etwas unangenehm an.

Danke für diese interessante Frage. Hier sind noch einige Dinge zu beachten.

Was ist ein Paar? Zwei Elemente zusammen. Dafür brauchen wir ein Tag. Nehmen wir an, es ist ein pairTag.

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

Als nächstes ist die Anzeige der Paare zu berücksichtigen. Das übliche Layout ist das tabellarische:

key value
key value

und das optionale Trennzeichen, das normalerweise Doppelpunkt ist:

key : value
key : value

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

Der oben beschriebene Fall ist der ideale. Es gibt jedoch kein gültiges HTML-Markup, das problemlos in dieses passt.

Um zusammenzufassen:

dlist semantisch am nächsten, für einfache Fälle von Schlüssel und Wert, aber es ist schwierig, visuelle Stile anzuwenden (z. B. um die Paare inline anzuzeigen oder nur dem schwebenden Paar einen roten Rand hinzuzufügen). Der Fall, der am besten passt, dlist das Glossar. Dies ist jedoch nicht der Fall, den wir diskutieren.

Die einzige Alternative, die ich in diesem Fall sehen kann, ist folgende table:

<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 sein 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 einer Datenbank gespeichert, und diese speichern normalerweise tabellarische Daten, sodass die Tabelle meiner Meinung nach am besten passt.

Was denken Sie?

Im Anschluss an die Spezifikation (und weitere Informationen ) zur Verfügung gestellt von Alexandr Antonov: Verwendung dl, dt, ddund gegebenenfallsdiv .

Eine Kombination von dl, dt, und ddist gut für semantisch Schlüsselwertpaare:

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

Zur einfacheren Gestaltung oder Analyse können divs als untergeordnete Elemente verwendet werden, dlum die Schlüssel-Wert-Paare zu gruppieren (und machen dtund ddEnkelkinder 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>

XHTML 2 bietet die Möglichkeit, Begriffe und Definitionen mithilfe des diElements zu gruppieren

<!-- 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 tot und HTML5 hat kein diElement

Sie können also kombinieren ul > limit 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>

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.

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

Dies ist nicht meine bevorzugte Lösung, aber es ist 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 beim Schweben:

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>

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>sie mit Gitter verwendet und gestylt

Es ist schwierig, die Paare visuell richtig zu versetzen, sowohl im Code als auch gerendert. Wenn ich zum Beispiel nur eine Grenze um jedes Paar haben wollte, wäre das ein Problem.

Andere vor mir haben sich (ich denke ziemlich gut) mit dem Problem der visuellen Definition im Code befasst. Damit bleibt das Problem von Rendering und CSS. Dies kann in den meisten Fällen sehr effektiv durchgeführt werden. Die größte Ausnahme ist das Platzieren eines Rahmens um jeden Satz von dt / dds, was zugegebenermaßen äußerst schwierig ist - möglicherweise unmöglich, zuverlässig zu stylen.

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üsselwert-PAARE funktioniert, aber Probleme aufwirft, wenn Sie mehrere dds innerhalb eines "Satzes" 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 Einschränkungen beim Rahmenstil ist es mit CSS durchaus möglich, alles andere zu tun, um Sätze (Hintergründe, Nummerierungen usw.) zuzuordnen. Hier gibt es eine schöne Übersicht: http://www.maxdesign.com.au/articles/definition/

Ein weiterer Punkt, den ich für erwähnenswert halte, wenn Sie Definitionslisten optimal gestalten möchten, um eine visuelle Trennung zu ermöglichen - die automatischen Nummerierungsfunktionen ( counter-incrementund counter-reset) von CSS können sehr nützlich sein: http://www.w3.org/TR/ CSS2 / generate.html # Zähler

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

Leider ist die Browserunterstützung nicht so gut, aber wenn es uns selten um Dinge wie die Browserunterstützung geht, wenn es um Semantik geht. :-)

Eine solche Art, wie Sie es darstellen könnten:

Nachdem Sie Ihr brandneues ausgefallenes Element wie folgt registriert haben:

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

Sie schreiben Markup wie folgt:

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

Die einzige Bedingung für benutzerdefinierte HTML-Elemente ist, dass sie einen Bindestrich benötigen. Natürlich können Sie jetzt super kreativ sein ... wenn Sie ein Autoteile-Lager mit Teilelisten 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>

Viel semantischer kann man nicht sein!

Es besteht jedoch die Möglichkeit, dass ich zu weit gegangen bin semantic-shangri-la-la(ein realer Ort) und möglicherweise versucht bin , ihn auf etwas Allgemeineres zu reduzieren:

<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 stylen und zeigen 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>

Hmm. dt/ ddSound am besten für diesen und es ist möglich , sie visuell zu kompensieren, obwohl ich es ist schwieriger als für einen Tisch tun zustimmen.

Wie wäre es mit einer Lesbarkeit des Quellcodes in einer Zeile?

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

Mit Ausnahme des <dl>Elements haben Sie so ziemlich alle Optionen von HTML zusammengefasst: begrenzte.

Sie sind jedoch nicht verloren, es bleibt nur eine Option: Verwenden einer Auszeichnungssprache, die in HTML übersetzt werden kann. Eine sehr gute Option ist Markdown.

Mit einer Tabellenerweiterung, die einige Markdown-Engines bereitstellen, können Sie folgenden Code haben:

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

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

Auf diese Weise erhalten Sie ein aussagekräftiges Markup (Tabelle für Tabellendaten) und wartbaren Code.

Wie wäre es einfach eine Leerzeile zwischen jedem Paar zu setzen?

Dies erfordert keine spezielle 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> 

Was ist mit 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.

Die Zeile von spec :

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

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

Ich mag die Idee von Unicron, sie alle in eine Zeile zu setzen, aber eine andere Möglichkeit wäre, den Wert unter dem Definitionsnamen einzurücken:

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

Dieser Weg könnte bei lächerlich langen Definitionen etwas augenschonender sein (obwohl, wenn Sie lächerlich falsche Definitionen verwenden, eine Definitionsliste vielleicht doch nicht das ist, was Sie wirklich wollen).

Was das Rendern auf dem Bildschirm betrifft, ist ein fetter unterer Rand, der auf das dd angewendet wird, eine ausreichende visuelle Trennung.