HTML: la mejor etiqueta para ‘etiquetas’ fuera de los formularios

Question 1

¿Qué etiquetas HTML usaría para este tipo de información?

Nombre: John
Años: 40
Ciudad: Fráncfort
País: Alemania
Estado: Activo

me gusta usar el <label> etiqueta dentro p etiquetas aquí, lo que suena como una buena semántica. Sin embargo, esta información NO está dentro de un formulario. Y el W3C dice:

label: The label element represents a caption for a form control.

Entonces, ¿qué debo usar entonces? claramente puedo usar <strong>pero esto no tiene una “gran importancia” y no se siente correcto.

ACTUALIZAR

Después de notar la sugerencia de LISTA DE DEFINICIONES, me gustaría preguntar si esto sería mejor si tengo varias partes de esta información en la misma página. Significaría que defino “nombre” con una “definición” diferente varias veces. P.ej:

Nombre: John
Años: 40
Ciudad: Fráncfort
País: Alemania
Estado: Activo

Nombre: María
Años: 30
Ciudad: Bonn
País: Alemania
Estado: Inactivo

Es <dl> sigue siendo la mejor manera de ir?

Question 2

A lista de definiciones podría ser adecuado aquí:

<dl>
    <dt>Name</dt>
    <dd>John</dd>
    <dt>Age</dt>
    <dd>40</dd>
    <dt>City</dt>
    <dd>Frankfurt</dd>
    <dt>Country</dt>
    <dd>Germany</dd>
    <dt>Status</dt>
    <dd>Active</dd>
</dl>

http://www.w3.org/TR/html401/struct/lists.html#h-10.3 – Las listas de definiciones, creadas con el elemento DL, generalmente consisten en una serie de pares de términos/definiciones (aunque las listas de definiciones pueden tener otras aplicaciones).

Sin embargo, el hecho de que desee un formato en negrita no significa que esté restringido a <strong> o <b>. Puedes usar la no semántica <span> y simplemente aplique el formato con CSS.

Además, puede usar CSS para agregar los dos puntos, en lugar de ponerlos en su marcado:

dt:after { content:":"; }

Quizás para ayudar a aclarar cierta confusión sobre su uso adecuado, parece que HTML5 se referirá a esta etiqueta como lista de descripciones.

http://www.w3.org/TR/html5/grouping-content.html#the-dl-element – El elemento dl representa una lista de asociaciones que consta de cero o más grupos de nombre-valor (una lista de descripción).

Question 3

Este es el lugar correcto para una estructura DL:

<dl>
   <dt>Name</dt>
   <dd>John</dd>

   <dt>Age</dt>
   <dd>40</dd>

   <dt>City</dt>
   <dd>Frankfurt</dd>

   <dt>Country</dt>
   <dd>Germany</dd>

   <dt>Status</dt>
   <dd>Active</dd>
</dl>

Tenga en cuenta que deberá agregar estilo para que se vea así, pero esta es la estructura lógica correcta.

Question 4

Tal vez puedas usar una lista de definiciones (dl, dt, dd), pero eso tampoco suena correcto.

Como W3C dice que representa un título para un control de formulario, el texto junto a la etiqueta no es un control, por lo que el for atributo se vuelve inútil.

simplemente iría con strongtambién porque es la mejor representación sin CSS.

Editar:

Dado que se trata de personas, también puede usar el equivalente de vCard para HTML: hTarjeta. Ejemplo:

<div class="vcard">
    <div class="fn">
        <strong class="type">Name</strong>:
        <span class="value">John</span>
    </div>
    <div class="note">
        <strong class="type">Age</strong>:
        <span class="value">40</span>
    </div>
    <div class="adr">
        <div class="locality">
            <strong class="type">City</strong>:
            <span class="value">Frankfurt</span>
        </div>
        <div class="country-name">
            <strong class="type">Country</strong>:
            <span class="value">Germany</span>
        </div>
    </div>
    <div class="note">
        <strong class="type">Status</strong>:
        <span class="value">Active</span>
    </div>
</div>

A continuación, puede utilizar tantos de estos en un <ul> o <ol>. Algunos navegadores reconocerán estas propiedades y las convertirán en enlaces para usar con una aplicación. por ejemplo el adr las propiedades podrían vincularse a una herramienta de mapeo.

Esto es solo un estándar, no pretende ser semánticamente correcto. Por lo que sé, puede usar cualquier marcado (etiquetas HTML) que desee dentro de estas hCards. Ver enlace para más detalles.

Question 5

Estoy de acuerdo con las otras respuestas de que un <dl> list es la opción más semántica aquí. En el pasado, nunca estaba seguro de si este era un uso correcto de <dl> porque todas las descripciones oficiales de la <dl> El elemento que vi lo describió como una “lista de definiciones” que se usará para definir términos como en un glosario (vea mis comentarios sobre la respuesta de @Cristian). Sin embargo, después de mirar el último borrador del editor de la especificación HTML 5, noté que se le ha cambiado el nombre a “lista de descripción” en lugar de “lista de definición”, y el ejemplo dado es en realidad muy similar al ejemplo en la pregunta aquí.

<dfn>, por otro lado, parece estar destinado solo a definir términos. Aquí hay algunas citas relevantes del enlace anterior:

El elemento dt en sí mismo, cuando se usa en un elemento dl, no indica que su contenido sea un término que se esté definiendo, pero esto puede indicarse usando el elemento dfn.

…

El elemento dfn representa la instancia definitoria de un término. El párrafo, el grupo de lista de descripciones o la sección que es el ancestro más cercano del elemento dfn también debe contener las definiciones del término proporcionado por el elemento dfn.

Entonces, en conclusión, apoyaría la recomendación para el uso de la <dl> elemento, aunque su estilo predeterminado es diferente del ejemplo del OP.

Aquí hay una clase CSS reutilizable para un <dl> al estilo del ejemplo:

.dl-inline dt, .dl-inline dd {display:inline; margin:0;}
.dl-inline dt:after {content:': '}
.dl-inline dd + dt:before {content:''; display:block;}

<dl class="dl-inline">
	<dt>Name</dt>
	<dd>John</dd>
	<dt>Age</dt>
	<dd>40</dd>
	<!-- ... -->
</dl>

O la versión SASS:

.dl-inline {
    dt,dd {display:inline; margin:0;}
    dt:after {content:': '}
    dd + dt:before {content:''; display:block;}
}

Question 6

Yo argumentaría a favor de usar el <dfn> etiqueta.

Es corto, semántico y se puede diseñar fácilmente.

El elemento marca el término que se está definiendo; la definición del término debe estar dada por el grupo de lista de definición o

, que lo rodea (generalmente un par

,
).

Fuente: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dfn

¿Ha sido útil esta solución?