이름-값 쌍의 의미 및 구조

이름-값 쌍의 의미 및 구조

---

이것은 내가 한동안 고투해온 질문입니다. 이름 / 값 쌍을 마크 업하는 적절한 방법은 무엇입니까?

저는 <dl> 요소를 좋아하지만 문제가 있습니다. 한 쌍을 다른 쌍과 분리 할 방법이 없습니다. 고유 한 컨테이너가 없습니다. 시각적으로 코드에는 정의가 없습니다. 그러나 의미 상으로는 이것이 올바른 마크 업이라고 생각합니다.

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

위의 코드에서는 코드와 렌더링 모두에서 시각적으로 쌍을 올바르게 오프셋하기가 어렵습니다. 예를 들어 내가 원하지만 각 쌍 주위에 경계선을두면 문제가 될 것입니다.

테이블을 가리킬 수 있습니다. 이름-값 쌍이 표 형식의 데이터라고 주장 할 수 있습니다. 그것은 나에게는 틀린 것 같지만 나는 논쟁을 본다. 그러나 HTML은 위치 또는 클래스 이름 추가를 제외하고 이름을 값과 구별하지 않습니다.

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

이것은 코드와 CSS 모두에서 시각적 관점에서 훨씬 더 의미가 있습니다. 앞서 언급 한 테두리의 스타일을 지정하는 것은 간단합니다. 그러나 위에서 언급했듯이 의미는 기껏해야 모호합니다.

생각, 의견, 질문?

편집 / 업데이트 아마도 이것은 구조와 관련하여 명시 적으로 언급해야 할 것이지만 정의 목록에는 쌍을 의미 론적으로 그룹화하지 않는 문제도 있습니다. a dd와 a 사이의 순서와 암시 적 경계 dt는 쉽게 이해할 수 있지만 여전히 저에게 약간의 느낌이 듭니다.

---

이 흥미로운 질문에 감사드립니다. 여기서 고려해야 할 사항이 몇 가지 더 있습니다.

쌍이 란 무엇입니까? 함께 두 요소. 그래서 우리는 이것을위한 태그가 필요합니다. pair태그 라고합시다 .

 <pair></pair>

쌍에는 키와 해당 값이 포함됩니다.

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

그런 다음 쌍을 나열해야합니다.

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

다음으로 고려해야 할 사항은 쌍의 표시입니다. 일반적인 레이아웃은 표 형식입니다.

key value
key value

일반적으로 콜론 인 선택적 구분 기호 :

key : value
key : value

콜론은 CSS를 통해 쉽게 추가 할 수 있지만 IE에서는 확실히 작동하지 않습니다.

위에서 설명한 사례가 이상적인 사례입니다. 그러나 이것에 쉽게 맞출 수있는 유효한 HTML 마크 업은 없습니다.

---

요약하자면 :

dl키와 값의 단순한 경우에 의미 상 가장 가깝지만 시각적 스타일을 적용하기 어렵습니다 (예 : 쌍을 인라인으로 표시하거나 호버 된 쌍에 빨간색 테두리를 추가). 가장 적합한 경우 dl는 용어집입니다. 그러나 이것은 우리가 논의하는 경우가 아닙니다.

이 경우에 볼 수있는 유일한 대안은 다음 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>

하나 더:

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

또는:

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

또는 키가 연결될 수있는 경우 :

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

키 및 값 쌍은 일반적으로 데이터베이스에 저장되며, 일반적으로 테이블 형식 데이터를 저장하므로 테이블이 가장 적합한 IMHO에 적합합니다.

어떻게 생각해?

---

XHTML 2는 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> 정의 목록 향상

불행히도 XHTML 2는 죽었고 HTML5에는 di요소 가 없습니다.

따라서 다음 ul > li과 결합 할 수 있습니다 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>

---

정의 목록은 아마도 나쁜 생각이라고 생각합니다. 의미 상 정의에 사용됩니다. 다른 키-값 목록은 종종 정의 제목 및 설명과 다릅니다.

A table는 한 가지 방법이지만 정렬되지 않은 목록은 어떻습니까?

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

---

다음 사양 (및 자세한 내용 : 알렉산드르 안토 노프에 의해 제공) 사용 dl, dt, dd, 선택적를div .

의 조합 dl, dt및 dd키 - 값 쌍에 대한 의미 괜찮 :

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

쉽게 스타일링 또는 구문 분석을 위해, div들의 자식으로 사용할 수있다 dl(그리고 차종 그룹에 키 - 값 쌍 dt과 dd의 손자 수 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>

---

이것은 내가 선호하는 솔루션은 아니지만 의미 요소를 영리하게 남용하는 것입니다.

/ 쌍 <dl>마다 새로운 사용 :<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>

css 부동 및 호버에 빨간색 테두리가있는 예 :

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>

<dl> <dt> <dd>그리드로 사용 하고 스타일을 지정했습니다.

---

코드와 렌더링 모두에서 시각적으로 쌍을 적절하게 오프셋하는 것은 어렵습니다. 예를 들어 내가 원하지만 각 쌍 주위에 경계선을두면 문제가 될 것입니다.

이전의 다른 사람들은 코드에서 시각적 정의를 제공하는 문제를 다루었습니다. 렌더링 및 CSS 문제가 남습니다. 이것은 대부분의 경우 매우 효과적으로 수행 될 수 있습니다. 가장 큰 예외는 각 dt / dds 세트 주위에 테두리를 배치하는 것입니다. 이는 매우 까다로운 작업입니다. 안정적으로 스타일을 지정하는 것은 불가능할 수 있습니다.

다음과 같이 할 수 있습니다.

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

키-값 쌍에 대해 작동하지만 다음과 같이 하나의 "세트"내에 여러 dd가있는 경우 문제가 발생합니다.

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

그러나 테두리 스타일 제한을 제쳐두고 집합 (배경, 번호 매기기 등)을 연결하기 위해 다른 작업을 수행하는 것은 CSS로 상당히 가능합니다. 여기에 멋진 개요가 있습니다. http://www.maxdesign.com.au/articles/definition/

---

시각적 분리를 제공하기 위해 정의 목록을 최적으로 스타일링하려는 경우 주목할만한 또 다른 점이 있습니다. CSS의 자동 번호 지정 기능 ( counter-increment및 counter-reset)이 매우 유용 할 수 있습니다. http://www.w3.org/TR/ CSS2 / generate.html # counters

---

물론 HTML 맞춤 요소 만 사용할 수 있습니다 . ( spec ) 완전히 유효한 HTML5입니다.

불행히도 브라우저 지원은 그다지 크지 않지만, 의미론을 다룰 때 브라우저 지원과 같은 보행자를 거의 신경 쓰지 않습니다. :-)

One such way you could represent it:

After registering your brand new fancy element like so:

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

You write markup like so:

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

The only condition that HTML Custom elements have are that they need a dash in them. Of course, you can now be super creative... if you're building an auto parts warehouse, with lists of parts and serial numbers:

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

You can't get much more semantic than that!

However, there IS a chance I have gone too far into semantic-shangri-la-la (a real place) and might be tempted to scale it back to something a little more generic:

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

Or perhaps this ( if I needed to style and show the key visually )

<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/dd sound best for this and it is possible to offset them visually, although I do agree it's more difficult than for a table.

As for source code readability, how about putting them into one line?

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

I agree it's not 100% perfect, but seeing as you can use space characters for indentation:

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

it might be the nicest way.

---

Except for the <dl> element, you've pretty much summed up all the options of HTML: limited ones.

However you're not lost, there is one option left: using a markup language that can be translated to HTML. A very good option is Markdown.

Using a table extension that some markdown engines provide, you can have code like this:

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

This means that you need a build step to translate the Markdown to HTML of course.

This way you get meaningful markup (table for tabular data) and maintainable code.

---

How about just placing a blank line between each pair?

This requires no special handling for long values.

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

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

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

---

What about using lists?

Ordered:

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

Or use <ul> for an unordered list, and skip the value="index" bit.

---

The line from spec:

Name-value groups may be terms and definitions, metadata topics and values, questions and answers, or any other groups of name-value data.

I assume use of elements <dl>, <dt> and <dd>.

---

I do like Unicron's idea of putting them all on one line, but another option would be to indent the value below the definition name:

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

This way might be a little easier on the eye in ridiculously long definitions (although if you're using ridiculously wrong definitions then perhaps a definition list isn't what you really want after all).

As for the rendering on screen, a fat bottom margin applied to the dd is plenty visual separation.

참고URL : https://stackoverflow.com/questions/3281070/semantics-and-structure-of-name-value-pairs