5568 sujets

Sémantique web et HTML

Bonjour à tous,

Sur mon site internet, j'ai certaines informations à afficher sous cette forme :
- Désignation : XXX
- Adresse : XXX
- Ville : XXX
- Nom du responsable : XXX
- Date des informations : XXX

Je sais qu'il existe des balises "<ul><li></li></ul>" mais aussi "<dl><dt></dt><dd></dd></dl>" ; ces dernières servant essentiellement aux listes de définition, j'ai préféré utiliser les "<ul><li></li></ul>" mais je me demande si ce choix est judicieux.

Voici le code que j'utilise :


<ul class="ul_list">
	<li><span class="ul_list_title">Désignation :</span> <span class="ul_list_data">XXXX</span></li>
	<li><span class="ul_list_title">Titre :</span> <span class="ul_list_data">XXXX</span></li>
	<li><span class="ul_list_title">Date :</span> <span class="ul_list_data">XXXX</span></li>
</ul>


Et le rendu :
upload/502-flou.png

Mercid d'avance Smiley smile
Gaylord.P
Administrateur
Bonjour,

Une liste de définitions (dl) ne me paraît pas appropriée.

A priori, les deux structures suivantes me paraissent parfaitement OK :
- liste non ordonnée (ul)
- tableau de données (table)
Modérateur
Raphael a écrit :

Une liste de définitions (dl) ne me paraît pas appropriée.

Ah bon? C'est pourtant un des principaux cas de sont utilisation… Enfin ce n'est plus une «liste de définitions» en HTML5 mais une «liste de descriptions». La nuance est faible mais importante. Elle a été redéfinie ainsi justement pour pousser à l'utiliser dans ce genre de cas. C'est le plus correct sémantiquement.

Après il y a bien entendu les problèmes de mises en page qui peuvent faire choisir ul ou table, qui peuvent être un gain de ce côté là suivant les situations.
Je viens de rechercher sur Google et effectivement, contrairement à ce que je pensais à l'origine, les balises "<dl><dt>" semblent plus approprié.

Merci d'avance,
Gaylord.P Smiley smile
Bonsoir,

JE plussoie l'utilisation de <dl>, mais certainement pas celle de tableaux.

Je vais essayer de justifier pourquoi, à mon sens, le tableau n'est pas une bonne solution ici :

De manière générale, voici deux critères pour déterminer si un tableau est vraiment approprié :
1 - Essayer de nommer les en-têtes de lignes et/Ou de colonnes, même si on n'a pas envie que ces noms ne figurent réellement quelque part de manière visible. Si ça ne fait aucun sens dans aucune direction, alors on n'a définitivement pas des données tabulaires ou des données qui auraient intérêt à être représentées sous forme de tableau.
2 - Si on arrive à nommer des en-têtes pour les colonnes qui ont du sens, alors il devrait y avoir au moins deux lignes de données, et de la même manière, s'il y a des en-têtes pour les lignes, alors il devrait y avoir au moins deux colonnes de données.

J'estime que si un tableau ne respecte pas ces deux critères, alors il n'est présent que pour des besoins de mise en page. JE ne suis pas un expert en CSS mais je suis sûr qu'il y a des alternatives. A noter que les en-têtes peuvent ne pas être nécessairement visibles au final si elles paraissent tellement évidentes, tant qu'on arrive instinctivement à mettre une étiquette sur les données d'une ligne/colonne donnée.

Petite note, ces critères sont de mon cru, je ne me suis basé sur aucun référenciel... la probabilité que je me fourvoie n'est donc pas totalement nulle.

Dans notre cas ici, si on se prête à l'exercice, les deux choix que j'entrevois sont
1 - Des en-têtes de colonne « nom » et « valeur » qui n'ont pas vraiment de sens à part si on a à faire à un dictionnaire à modifier type données de configuration
2 - Des en-têtes de ligne où chaque nom serait un <th> et chaque valeur un <td>, auquel cas le second critère n'est pas respecté.

CQFD.