section - semantica html5 ejemplos

Semántica y estructura de pares de nombre-valor

Question

Esta es una pregunta con la que he estado luchando por un tiempo. ¿Cuál es la forma correcta de marcar pares de nombre / valor?

Me gusta el elemento <dl>, pero presenta un problema: no hay forma de separar un par de otro; no tienen un contenedor único. Visualmente, el código carece de definición. Semánticamente, sin embargo, creo que este es el marcado correcto.

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

En el código anterior, es difícil compensar correctamente los pares visualmente, tanto en el código como en el renderizado. Si quisiera, por ejemplo, pero un borde alrededor de cada par, eso sería un problema.

Podemos señalar tablas Podría argumentarse que los pares nombre-valor son datos tabulares. Eso me parece incorrecto, pero veo la discusión. Sin embargo, el HTML no diferencia el nombre del valor, excepto en la posición, o con la adición de nombres de clase.

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

Esto tiene mucho más sentido desde un punto de vista visual, tanto en código como en CSS. Diseñar el borde mencionado anteriormente es trivial. Sin embargo, como se mencionó anteriormente, la semántica es confusa en el mejor de los casos.

Pensamientos, comentarios, preguntas?

Edición / Actualización Quizás esto era algo que debería haber mencionado explícitamente en relación con la estructura, pero una lista de definiciones también tiene el problema de no agrupar semánticamente los pares. El orden y el borde implícito entre un dd y un dt se entiende fácilmente, pero aún se sienten un poco fuera de mí.

Answer 1

es difícil compensar correctamente los pares visualmente, tanto en código como renderizado. Si quisiera, por ejemplo, pero un borde alrededor de cada par, eso sería un problema.

Otros antes que yo han tratado (bastante bien, creo) con el problema de proporcionar definición visual en el código. Lo cual deja el problema de renderizado y CSS. Esto se puede hacer de manera bastante efectiva en la mayoría de los casos. La mayor excepción es colocar un borde alrededor de cada conjunto de dt / dds, lo cual es ciertamente extremadamente complicado, quizás imposible de diseñar de manera confiable.

Podrías hacerlo:

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

Lo cual funciona para pares clave-valor, pero presenta problemas si tiene múltiples discos duros dentro de un "conjunto" como:

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

Sin embargo, aparte de las limitaciones de estilo de borde, hacer todo lo demás para asociar conjuntos (fondos, numeración, etc.) es bastante posible con CSS. Aquí hay una buena descripción general: http://www.maxdesign.com.au/articles/definition/

Otro punto que creo que vale la pena señalar es que, si busca optimizar las listas de definición de estilos para proporcionar una separación visual, las funciones de numeración automática de CSS ( counter-increment y counter-reset ) pueden ser muy útiles: http://www.w3.org/TR/CSS2/generate.html#counters

Answer 2

¿Qué tal si colocamos una línea en blanco entre cada par?

Esto no requiere un manejo especial para valores largos.

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

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

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

Answer 3

¿Qué tal usar listas?

Ordenado:

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

O use <ul> para una lista desordenada, y omita el value="index" bit value="index" .

Answer 4

Creo que una lista de definiciones es probablemente una mala idea. Semánticamente, se usan para definiciones. Otras listas de valores clave a menudo difieren de los títulos y descripciones de definición.

Una table es una manera de hacerlo, pero ¿qué pasa con una lista desordenada?

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

Answer 5

Esta no es mi solución preferida, pero es un abuso inteligente del elemento semántico:

Use un nuevo par <dl> per <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 ejemplo con flotadores css y borde rojo sobre el vuelo estacionario:

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>

Answer 6

Excepto por el elemento <dl> , prácticamente ha resumido todas las opciones de HTML: limitadas.

Sin embargo, no está perdido, le queda una opción: usar un lenguaje de marcado que pueda traducirse a HTML. Una muy buena opción es Markdown.

Usando una extensión de tabla que proporcionan algunos motores de reducción, puede tener un código como este:

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

Esto significa que necesita un paso de compilación para traducir Markdown a HTML, por supuesto.

De esta forma obtendrá un marcado significativo (tabla para datos tabulares) y un código de mantenimiento.

Answer 7

Gracias por esta interesante pregunta. Hay algunas cosas más que considerar aquí.

¿Qué es un par? Dos elementos juntos Entonces, necesitamos una etiqueta para esto. Digamos que es una etiqueta de pair .

 <pair></pair>

El par contiene la clave y el valor correspondiente:

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

Entonces, necesitamos enumerar los pares:

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

El siguiente punto a considerar es la visualización de los pares. El diseño habitual es el tabular:

key value
key value

y el separador opcional, que generalmente es colon:

key : value
key : value

Los dos puntos se pueden agregar fácilmente a través de CSS, pero esto ciertamente no funcionará en IE.

El caso descrito arriba es el ideal. Pero no hay un marcado de HTML válido para encajar en esto fácilmente.

Para resumir:

dl es semánticamente el más cercano, para casos simples de clave y valor, pero es difícil aplicar estilos visuales (por ej., para mostrar los pares en línea o para agregar un borde rojo a solo un par suspendido). El caso que más se ajusta a dl es el glosario. Pero este no es el caso que discutimos.

La única alternativa que puedo ver en este caso es usar table , como esta:

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

Uno mas:

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

o:

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

o, cuando las claves pueden estar vinculadas:

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

Los pares de clave y valor generalmente se almacenan en la base de datos, y generalmente almacenan datos tabulares, por lo que la tabla encajaría mejor en mi humilde opinión.

¿Qué piensas?

Answer 8

Hmm. dt / dd suena mejor para esto y es posible compensarlos visualmente, aunque estoy de acuerdo que es más difícil que para una mesa.

En cuanto a la legibilidad del código fuente, ¿qué hay de ponerlos en una línea?

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

Estoy de acuerdo en que no es 100% perfecto, pero viendo que puedes usar caracteres espaciales para sangrías:

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

podría ser la mejor manera.

Answer 9

La línea de la specification :

Los grupos de nombre-valor pueden ser términos y definiciones, temas y valores de metadatos, preguntas y respuestas, o cualquier otro grupo de datos de nombre-valor .

Asumo el uso de los elementos <dl> , <dt> y <dd> .

Answer 10

Me gusta la idea de Unicron de ponerlos todos en una línea, pero otra opción sería sangrar el valor debajo del nombre de la definición:

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

De esta manera puede ser un poco más fácil a simple vista en definiciones ridículamente largas (aunque si está utilizando definiciones ridículamente incorrectas, entonces tal vez una lista de definiciones no es lo que realmente quiere después de todo).

En cuanto a la representación en pantalla, un margen inferior de grasa aplicado al dd es una gran separación visual.

Answer 11

Por supuesto, puedes usar elementos HTML personalizados . ( spec ) Son completamente válidos HTML5.

Desafortunadamente, el soporte del navegador no es tan bueno, pero si raramente nos importan cosas tan pedestres como el soporte del navegador cuando se trata de semántica. :-)

Una de esas formas en que podrías representarlo:

Después de registrar su nuevo elemento de lujo como ese:

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

Usted escribe el marcado así:

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

La única condición que tienen los elementos HTML personalizados es que necesitan un guión en ellos. Por supuesto, ahora puede ser súper creativo ... si está construyendo un almacén de autopartes, con listas de piezas y números de serie:

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

¡No puedes obtener mucha más semántica que eso!

Sin embargo, existe la posibilidad de que haya ido demasiado lejos en semantic-shangri-la-la (un lugar real) y podría estar tentado de volver a escalarlo a algo un poco más genérico:

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

O tal vez esto (si necesitaba estilo y mostrar la clave visualmente)

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

Answer 12

Siguiendo la specification (y más detalles ) proporcionada por Alexandr Antonov: use dl , dt , dd , y opcionalmente div .

Una combinación de dl , dt y dd es semánticamente correcta para los pares clave-valor:

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

Para un estilo o análisis más fácil, los div se pueden usar como elementos secundarios de dl para agrupar los pares clave-valor (y hace que dt y dd sean nietos 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>

Answer 13

XHTML 2 introduce la capacidad de agrupar términos y definiciones utilizando el elemento 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> Mejora de las listas de definiciones

Desafortunadamente, XHTML 2 está muerto y HTML5 no tiene di elemento

Entonces, puedes combinar ul > li con 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>