5568 sujets

Sémantique web et HTML

[résolu]Sémantique - adresse

Bonjour tout le monde,

Voilà déjà quelque temps que je galère à trouver une solution satisfaisante pour écrire des adresses.

Sur le site dont j'ai la charge, je dois mettre en ligne des articles traitant des actions d'entreprises et organismes ; bien sûr, à la fin de ces articles, on indique les coordonnées de ces structures. Mon problème est que je n'arrive pas à trouver une syntaxe qui me satisfasse pleinement.

Des exemples de ce que je dois structurer:

a écrit :
L'entreprise bidule
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Contact:
Monsieur Machin
Entreprise Bidule
00000 Pétaouchnok
Téléphone: 0000000000
Site internet: toto.tata.fr


a écrit :
L'entreprise bidule
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

Contact:
Entreprise Bidule
Monsieur Machin - Téléphone: 0000000000
Monsieur Truc - Téléphone: 0000000000


Mon intuition me dicte qu'il faudrait utiliser les listes de définitions, mais comment faire le découpage, et que faire de la ligne "contact" qui introduit l'adresse? Après tout, c'est le nom de la société qui est défini, pas "contact".

J'ai également vu qu'il existait une balise address, mais d'après ce que j'en ai vu, ce n'est pas adapté à cet usage précis.

Quelqu'un a-t-il déjà trouvé une solution à ce genre de problème? Ça me dépannerait beaucoup!

Merci d'avance pour vous remarques.
Modifié par Medunta (27 Mar 2011 - 10:19)
Administrateur
Hello,

Très rapidement parce que sur le départ : l'une des solutions (notamment exploitée par Google) serait d'employer les Microformats :
<div class="vcard"> <!-- appel au format hCard -->
<ul class="adr"> <!-- propriété globale d’adresse hCard -->
<li class="fn org name">Alsacréations</li>
<li class="title">Agence web exotique</li>
<li class="street-address">5, rue des Couples</li>
<li><span class="postal-code">67000</span> <span class="locality">Strasbourg
</span> <span class="country-name">France</span></li>
</ul>
<p class="email">xxxx@xxxxx.fr</p> <!-- classe hCard d’e-mail -->
<p class="tel">Tél. xx xx xx xx xx</p> <!-- classe hCard de téléphone -->
<p class="social url"> <!-- classes hCard de type social et de lien -->
<a href="http://twitter.com/alsacreations">Twitter</a>
</p>
</div>

Modifié par dew (28 Jul 2012 - 12:04)
Raphaël, merci pour ta prompte réponse.

N'ayant jusqu'alors pas connaissance des microformats, je n'étais pas près de trouver de solution. Je vais donc creuser de ce côté-là.
Vive la sémantique html! Smiley biggrin

En revanche, cela fait ressortir une question que je gardais sous le coude: quelle valeur sémantique donner à une phrase qui introduit une liste? J'ai vu quelque part - peut-être même quelque part sur ce site - que c'était un problème et que le mieux étaient encore de laisser ça sous forme de paragraphe avant la liste. Cette solution ne me satisfait pas vraiment, parce que les deux éléments ne sont au final pas reliés sémantiquement, alors que l'un introduit l'autre. D'un autre côté, une liste de définition du style


<dl>
  <dt>Voici la liste :</dt>
  <dd>
    <ul>
      <li>élément de liste</li>
      <li>élément de liste</li>
    </ul>
  </dd>
</dl>


me semble un peu lourde en code mais peut-être plus exacte.

Y a-t-il une solution recommandée officiellement à ça?
Modifié par Medunta (26 Mar 2011 - 11:37)
Medunta a écrit :
Mon intuition me dicte qu'il faudrait utiliser les listes de définitions

Faux. Tu as un libellé «Adresse» puis une adresse spécifique. Cette adresse ne définit ou ne décrit pas le concept désigné par le libellé «Adresse», donc pas de DL. Par contre, le mot «Adresse» décrit le contenu qui le suit, et donc tu peux le baliser comme un titre.

Typiquement:
<h2>L'entreprise bidule</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>

<h3>Contact:</h3>
<p>Monsieur Machin<br>
Entreprise Bidule<br>
00000 Pétaouchnok<br>
Téléphone: 0000000000<br>
Site internet: toto.tata.fr</p>

Voilà pour la sémantique HTML. Il y a aussi l'élément ADDRESS qui existe en HTML4, mais je trouve ça définition peu claire (et peu claire et restrictive en HTML5). Donc usage pas indispensable (et potentiellement faux en HTML5)...

Ensuite, il y a effectivement les formats de données riches telles que:
- les microformats (HTML 4-5);
- microdata (HTML5);
- RDFa...
et la possibilité de proposer des vCards.
Non:
<dl> 
  <dt>Voici la liste :</dt> 
  <dd> 
    <ul> 
      <li>élément de liste</li> 
      <li>élément de liste</li> 
    </ul> 
  </dd> 
</dl>

Oui:
<p>Voici la liste :</p>
<ul> 
  <li>élément de liste</li> 
  <li>élément de liste</li> 
</ul>

ou bien:
<hN>Une liste</hN>
<ul> 
  <li>élément de liste</li> 
  <li>élément de liste</li> 
</ul>
fvsch a écrit :

Faux. Tu as un libellé «Adresse» puis une adresse spécifique. Cette adresse ne définit ou ne décrit pas le concept désigné par le libellé «Adresse», donc pas de DL. Par contre, le mot «Adresse» décrit le contenu qui le suit, et donc tu peux le baliser comme un titre.


Bonjour fvsch et merci de ta réponse. Étant encore peu réveillé ce matin, j'ai eu un peu de mal à bien comprendre la nuance, mais ça y est. Il me semblait que les listes de définitions étaient moins restrictives quant à leur usage, mais du même coup cela créait il est vrai une confusion avec notamment les titres comme tu le pointes.

Avec tout cela, je vais pouvoir avancer, merci à vous deux et je passe le sujet en résolu. Smiley smile
Sujet clos
Aller à