¿Qué marcas HTML que se utilizará para mostrar los datos de etiqueta / valor?

Question

Quiero rendir un recipiente perfil de usuario que contiene una lista de las etiquetas y sus valores asociados.

Este es un extracto de la información y el diseño me gustaría ver:

Nombre ....... MiNombre

Age ................... myage

correo electrónico ................ MyEmail

Sé que hay un montón de ejemplos disponibles, pero el problema es que parece que no hay una solución comúnmente aceptada.

Hasta ahora he visto el uso siguiente:

1. tabla de marcado (y , ...)
2. Lista desordenada con
   marcado (y
   • ,
     ...)
   • márgenes regulares con

     ,

     ...

   • Definición de lista con

     ,

     y

   • ...?

Lo que es correcta la mayor parte semánticamente? ¿Cuál es el más fácil de visualizar (en un diseño de 2 columnas)? ¿Qué aconseja que use y por qué razones?

(HTML / CSS fragmentos de código son más que bienvenido)

Answer 1

Wow. Realmente hemos asustado a todos sus compañeros con las “disposiciones de la tabla son malos! Usar CSS!”Cosas, no tenemos?

Una mesa - con <th> para las etiquetas y los valores de <td> - es perfectamente aplicable a este tipo de contenido, le da la representación que quiere, y es al menos tan semánticamente correcta como una lista de definiciones, posiblemente más. O bien son preferibles a divs semántica libres.

Answer 2

Creo que lo más correcto sería semánticamente <dl>, <dt> y <dd>, ya que lo que se esté viendo son efectivamente Definiciones de nombre, edad y dirección de correo.

<dl>
  <dt>First Name</dt>
  <dd>Dominic</dd>
  <dt>Age</dt>
  <dd>24</dd>
  <dt>E-mail</dt>
  <dd>foo@bar.com</dd>
</dl>

Sin embargo, obviamente, la forma más fácil para que se muestre en una tabla está utilizando <table>, <th> y <td>. Se podía cortar juntos una tabla de diseño utilizando listas de definición utilizando algo como esto:

dt { float: left; clear: left; width: 6em; font-weight: bold; }
dd { float: left; }

Más información en la etiqueta <dl> href="http://www.w3schools.com/tags/tag_dl.asp" rel="noreferrer"> disponibles .

Answer 3

Sé que esto ha sido contestada pero creo que las listas de definiciones pueden ser perfectamente adecuado.
Estoy de acuerdo con la bobince que las tablas son siempre apropiados para los datos tabulados ...
Sin embargo, he utilizado esto en una serie de lugares en los que he preferido evitar tablas -. Y yo no creo que es un método incorrecto

Las listas de definición:

<dl>
  <dt>Label</dt>
  <dd>Value</dd>

  <dt>Label 2</dt>
  <dd>Value 2</dd>
</dl>

Con el CSS:

dl dt {
  float: left;
  width: 200px;
  text-align: right;
}

dt dd {
  margin-left: 215px;
}

Answer 4

Esta es una buena pregunta y es también uno que está abierto a un gran debate robaba no hay manera de hacer esto fija.

hay argumentos para muchos de ellos, pero mi personalmente, me gustaría que sea sencillo.

<div class="profile">
    <p>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </p>
    <p>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </p>
    <p>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </p>
</div>

o

<ul class="profile">
    <li>
        <span class="label">First Name</span>
        <span class="value">MyName</span>
    </li>
    <li>
        <span class="label">Age </span>
        <span class="value">MyAge</span>
    </li>
    <li>
        <span class="label">Email</span>
        <span class="value">MyEmail</span>
    </li>
</ul>

CSS sería algo como esto;

.profile p {
    overflow: hidden;
}

.profile .label {
    vertical-align: top;
    float: left;
    width: 40%;
}

.profile .value{
    vertical-align: top;
    float: left;
    width: 60%;
}

la razón para no hacer referencia a ningún nombre específico de nodo html en el CSS es que si en el futuro hay una forma reconocida de hacer esto es suficiente con cambiar los nombres de nodos en el código HTML.