HTML : Meilleure balise pour les "labels" en dehors des formulaires

Question

Quelles balises HTML utiliseriez-vous pour ce type d'information ?

---

Nom : John
Âge : 40
Ville : Francfort
Pays : Allemagne
Statut : Actif

---

J'aime utiliser le <label> étiquette dans p ici, ce qui semble être une bonne sémantique. Cependant, ces informations ne sont PAS à l'intérieur d'un formulaire. Et le W3C dit :

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

Que dois-je utiliser alors ? Je peux clairement utiliser <strong> mais cela n'a pas une "grande importance" et ne semble pas correct.

UPDATE

Après avoir remarqué la suggestion de la LISTE DE DÉFINITION, j'aimerais demander si ce serait toujours mieux si j'avais plusieurs éléments de cette information sur la même page ? Cela signifierait que je définisse "nom" avec une "définition" différente plusieurs fois. Par exemple :

---

Nom : John
Âge : 40
Ville : Francfort
Pays : Allemagne
Statut : Actif

---

Nom : Maria
Âge : 30
Ville : Bonn
Pays : Allemagne
Statut : Inactif

---

Est <dl> est toujours la meilleure solution ?

Answer 1

A liste de définitions pourrait convenir ici :

<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 - Les listes de définitions, créées à l'aide de l'élément DL, consistent généralement en une série de couples terme/définition (bien que les listes de définitions puissent avoir d'autres applications).

Cependant, ce n'est pas parce que vous voulez un formatage en gras que vous devez vous limiter aux éléments suivants <strong> o <b> . Vous pouvez utiliser l'option non sémantique <span> et appliquer simplement la mise en forme avec CSS.

En outre, vous pouvez utiliser les feuilles de style en cascade (CSS) pour ajouter les deux points, plutôt que de les placer dans votre code source :

dt:after { content:":"; }

Peut-être pour dissiper toute confusion quant à son utilisation correcte, il semble que HTML5 se réfère à cette balise comme à une balise de type liste des descriptions .

http://www.w3.org/TR/html5/grouping-content.html#the-dl-element - L'élément dl représente une liste d'association composée de zéro ou plusieurs groupes nom-valeur (une liste de description).

Answer 2

C'est le bon endroit pour une structure 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>

Notez que vous devrez ajouter du style pour que cela ressemble à cela, mais c'est la bonne structure logique.

Answer 3

Vous pouvez peut-être utiliser une liste de définitions ( dl , dt , dd ), mais cela ne semble pas correct non plus.

Comme le W3C indique qu'il s'agit d'une légende pour un contrôle de formulaire, le texte à côté de l'étiquette n'est pas un contrôle, et donc l'attribut for l'attribut devient inutile.

J'irais juste avec strong mais aussi parce que c'est la meilleure représentation sans CSS.

---

Editar :

Puisqu'il s'agit de personnes, vous pouvez également utiliser l'équivalent de vCard pour HTML : hCard . Exemple :

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

Vous pouvez alors en utiliser autant que vous le souhaitez dans une <ul> o <ol> . Certains navigateurs reconnaîtront ces propriétés et les transformeront en liens à utiliser avec une application. Par exemple, le lien adr les propriétés pourraient être liées à un outil de cartographie.

Il s'agit simplement d'une norme, qui n'est pas censée être sémantiquement correcte. Pour autant que je sache, vous pouvez utiliser n'importe quel balisage (balises HTML) que vous souhaitez dans ces hCards. Voir le lien pour les détails.

Answer 4

Je suis d'accord avec les autres réponses qu'un <dl> La liste est l'option la plus sémantique ici. Dans le passé, je n'étais jamais sûr que c'était une utilisation correcte de l'option <dl> parce que toutes les descriptions officielles de la <dl> L'élément que j'ai vu le décrit comme une "liste de définitions" à utiliser pour définir réellement les termes comme dans un glossaire (voir mes commentaires sur la réponse de @Cristian). Cependant, après avoir examiné l'élément dernier projet de l'éditeur de la spécification HTML 5, j'ai remarqué qu'il a été renommé "liste de description" plutôt que "liste de définition", et l'exemple donné est en fait très similaire à l'exemple de la question ici.

<dfn> En revanche, il semble qu'il ne soit destiné qu'à la définition effective des termes. Voici quelques citations pertinentes du lien ci-dessus :

L'élément dt lui-même, lorsqu'il est utilisé dans un élément dl, n'indique pas que son contenu est un terme en cours de définition, mais cela peut être indiqué en utilisant l'élément dfn.

...

L'élément dfn représente l'instance de définition d'un terme. Le paragraphe, le groupe de listes de descriptions ou la section qui est le plus proche ancêtre de l'élément dfn doit également contenir la ou les définitions du terme donné par l'élément dfn.

En conclusion, j'appuierai la recommandation d'utiliser la méthode de l'analyse de l'impact sur l'environnement. <dl> même si son style par défaut est différent de celui de l'exemple du PO.

Voici une classe CSS réutilisable pour une <dl> dans le style de l'exemple :

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

Ou la version SASS :

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

Answer 5

Je plaide pour l'utilisation de la <dfn> étiquette.

Il est court, sémantique et peut être facilement stylisé.

L'élément <dfn> marque le terme en cours de définition ; la définition du terme doit être donnée par les éléments <p> qui l'entourent, <section> ou le groupe de listes de définitions (généralement une paire <dt>, <dd>).

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