5424 sujets

Sémantique web et HTML

Pages :
(reprise du message précédent)

Le grand débat liste de def contre hN liste non ordonnée !!!

@Laurent, je disais pas sérieusement à 100% de rien dire au sujet des divs, mais je tenais à mettre en garde (du haut de ma faible expérience) contre des vérités qui pourraient être mal interprétées. N'oubli pas ta position de référence (que tu le veuilles ou non), tu sera lu par des lecteurs plus ou moins avertis et certains pourront prendre cela comme parole d'évangile et eventuellement exagérer la chose et tomber dans les excés que nous voyons souvent et qui donne lieu à des billets de ce genre : http://www.alsacreations.com/blog/index.php?2004/08/15/51-maladies-exotiques-des-css

J'attend de voir la "bille" ;) (ca serait peut etre une perle mais peut etre un caillou...)
Modifié le 30 Oct 2004 - 19:02
ElMoustiko a écrit :
Le grand débat liste de def contre hN liste non ordonnée !!!


Faux débat des <dl> contre la combinaison titre p. L'effet de mode sur les listes de définitions y est pour beaucoup. Tiens, à y regarder de près, j'ai encore des <dl> abusives qui traînent en masse chez moi...

<apparté>
ElMoustiko a écrit :

N'oubli pas ta position de référence (que tu le veuilles ou non), tu sera lu par des lecteurs plus ou moins avertis et certains pourront prendre cela comme parole d'évangile


ça, j'ai horreur qu'on me fasse ce coup là (celui de la "position de référence"). Heureusement, il n'y a guère qu'ElMousKito pour me le faire ici. J'ai le droit de dire une c... comme tout le monde. L'intéressant, ce sont les critiques. Pas la connerie de départ.
</apparté>

Et si on en revenait au sujet de départ ? L'enjeu sémantique ? L'article de Molly ? La définition de nos termes de base ? L'article de K. Dubost ?
Modifié le 30 Oct 2004 - 19:21
Au sujet de ta position de référence, je m'attendais bien à ce type de réaction tiens ! Guère que moi pour faire la remarque ?? c'est bien la première fois que je le fais.
Pour ce qui est des commentaires qui suivent ensuite... oui c'est toujours très instructif mais tout le monde ne les lis pas toujours (parfois trop technique), enfin attendons de voir ta c*******... ;)
Modifié le 30 Oct 2004 - 19:33
ElMoustiko a écrit :
Tiens, je vais faire le lien avec la sémantique des paragraphes :
Qu'en est il de l'utilisation des paragraphes pour les formulaires, avec l'englobement des labels et inputs dans un même paragraphe (vu plusieurs fois sur différents sites) ?


Totalement abusif, le plus souvent. <div> encore (mais pas toujours) ;)
Pour me faire pardonner cette longue dérive, une citation de Tim Berners-Lee qui définit bien (sic) cette approche pragmatique de la sémantique :

Tim Berners-Lee a écrit :

Le Web sémantique va utiliser la structure pour donner du sens au contenu des pages Web, en créant un environnement où les agents logiciels en parcourant les pages pourront réaliser rapidement des tâches compliquées pour les utilisateurs.


http://www.urfist.cict.fr/lettres/lettre28/lettre28-22.html

ça me semble assez exploitable pour expliquer l'intérêt de la chose et faire la promotion des "Standards" ?
Vas expliquer à un webmestre qui met en page ses tables avec des tableaux que ça peut aider les agents logiciels. Je doute qu'il soit convaincu, mais c'est un argument à apporter en plus du reste à n'en pas douter.
S'il fait un design à base de tableaux, c'est qu'il est soit ignorant, soit idiot.

Si il est ignorant, il suffit de lui expliquer qu'au delà que "l'apparence" qu'elles renvoient, les balises ont un sens et qu'il est préférable de les utiliser à bon escient. C'est comme quand on nous explique à l'école quand il faut utiliser la ponctuation, et c'est alors qu'on peut citer Karl:
Karl a écrit :
Les gens ne raisonnent que très rarement en termes de structure d'un texte, mais la plupart du temps en termes de présentation. Je ne jette la pierre à personne, puisqu'on ne nous apprend pratiquement à structurer un texte à l'école, on ne nous apprend pas à en découvrir la structure propre. On s'intéresse à l'évocation du sens, mais pratiquement jamais à la structure du texte, sauf dans le cas d'une analyse grammaticale classique.


S'il ne veut toujours pas comprendre, on peut lui donner d'autres argements : meilleur référencement, meilleure accessibilté, etc
Modifié le 30 Oct 2004 - 20:23
@Jeremy> j'ai bien l'impression que tu n'as jamais essayé de faire ce genre de choses ! Pour l'avoir fait, je peux t'assurer que ce n'est pas aussi simple !
Administrateur
Laurent Denis a écrit :

Se retrouver à transformer un paragraphe de texte en titre... suppose une sérieuse erreur d'appréciation et de structuration au départ, non ?

Et se retrouver avec une "liste" à un seul élément ne l'est pas ? Smiley smile
ElMoustiko a écrit :
Vas expliquer à un webmestre qui met en page ses tables avec des tableaux que ça peut aider les agents logiciels. Je doute qu'il soit convaincu, mais c'est un argument à apporter en plus du reste à n'en pas douter.


J'ai écrit "à exploiter", pas "répéter tel que". On peut justement lui expliquer qu'une présentation à base de tableaux imbriqués est extrêmement périlleuse (impossible ?) quand il s'agit simplement pour l'agent utilisateur de la restituer sous forme orale (lecteur d'écran, et bientôt mobiles qui adopteront sans doute ce media, le plus logique pour eux)
Le problème est que quasi aucun webmaster ne se retrouve confronter à un lecteur écran, donc difficile d'en apprécier l'utilité... :/
Jeremy a écrit :
Le problème est que quasi aucun webmaster ne se retrouve confronter à un lecteur écran, donc difficile d'en apprécier l'utilité... :/

De plus, je pense qu'une grande majorité des Webmasters se contre-fichent de savoir si leur site est accessible ou non par une personne 'handicapée'. La majeur partie d'entre eux se disent que leur site n'a pas lieu d'être visité par une personne déficiente visuelle par exemple. J'en connais pas mal, malheuresement...
Il faudrait prendre conscience, je crois, que si vous n'avez que les navigateurs graphiques à l'esprit, il est inutile de parler de sémantique.

En effet, les navigateurs graphiques sont à peu près totalement indifférents à la sémantique HTML.

Vous allez me dire : "mais non ! lorsque je mets un <h1>, il est mis en gras, en gros... Il est donc pris en compte. Quand je mets plusieurs <p> à la suite, ils sont affichés séparémet, avec des retours à la ligne : mon navigateur sait ce que c'est qu'un paragraphe...".
Mais ça, ça n'est pas de la sémantique: c'est de la présentation. La feuille de style par défaut du navigateur qui donne arbitrairement un display:block aux paragraphes, un font-weight: bold aux titres, etc. Et on commence justement à se dire (voir l'article de K. Dubost, les articles récents d'Eric Meyer et de Yan Hixon) que le fait que les navigateurs aient une présentation par défaut pour les éléments HTML n'est pas une si bonne idée que ça...

Essayons de faire un peu le point, pour y voir plus clair : selon vous, qu'est-ce que les navigateurs graphiques exploitent vraiment de la sémantique HTML, et comment exactement ?
Administrateur
Laurent Denis a écrit :

Essayons de faire un peu le point, pour y voir plus clair : selon vous, qu'est-ce que les navigateurs graphiques exploitent vraiment de la sémantique HTML, et comment exactement ?

Peut-être vais-je dire n'importe quoi (c'est une habitude à prendre), mais selon moi un navigateur graphique n'a pour seule fonction que l'affichage du document, c'est à dire son rendu visuel.
Selon moi, ils n'ont même pas à tenir compte du sens que l'on veut donner aux balises, mais uniquement à l'affichage qu'on veut leur conférer.
Ils tiennent compte de la structure générale (type bloc, type en-ligne, type cellule, type liste, etc.) et de la mise en forme... mais le fait d'utiliser un <h1> ou un <p> ne veut strictement rien dire pour un navigateur graphique.

C'est là où il faut faire la distinction avec les navigateurs vocaux, les navigateurs textuels et les moteurs de recherche qui, eux, se reposent (en partie du moins) sur la sémantique car ils doivent exploiter le sens du document.

La question devient plus intéressante lorsque ce navigateur graphique supporte les propriétés orales (opera 7.60 ?)
Pourquoi un navigateur se contenterait-il d'afficher ?

Un navigateur grahique pourrait très bien, nativement, par exemple :
- créer une table des matières d'un document, navigable.
- créer une synthèse et/ou un index du document (strong, em, titres, dfn...)
- gérer dans une fenêtre distincte les liens de navigation internes/externes du site
- extraire le glossaire d'un document (exploitation des éléments de définition, des abréviations...)
- afficher l'une ou l'autre version successive d'un document annoté avec des marques d'insertion et de suppression (ins et del)
- donner un accès immédiat à la source d'une citation (attribut cite de q et blockquote) ou renseigner sur celle-ci, sans que l'auteur ait un lien explicite à ajouter
- insérer à la demande la/les signification(s) des abbr, acronym non renseignés, à partir d'une source extérieure au site.
- etc.

Des navigateurs comme opera, ou FireFox avec ses extensions... s'avancent peu à peu dans cette voie. Et les fonctionnalités RSS d'opera et du futur FireFox en sont un autre exemple.

Bref, nos navigateurs sont encore des outils extrêmement primitifs.
Administrateur
Laurent Denis a écrit :
Pourquoi un navigateur se contenterait-il d'afficher ?

Je me suis mal exprimé encore une fois.
Je ne dis pas qu'il doit se cantonner à l'affichage, je dis simplement que (en grande majorité), c'est ce qu'il fait actuellement.
Je trouve le point de vue de Raphael très intéressant et assez logique dans le sens où (je viens d'en prendre conscience à l'instant) on remarque très souvent, pour ne pas dire tout le temps, que la grande majorité des questions posées au sujet de la syntaxe (x)HTML ont pour finalité d'obtenir un rendu particulier sur un navigateur graphique sans tenir compte de ce que la structure elle même signifie (par exemple une suite de <br /> pour faire un menu là où un simple <ul><li></li></ul> aurait suffit), de même j'ai souvent noté que les "accros" aux standards et au codes valides testaient souvent leur site sur des navigateurs texte tels que lynx (c'est mon cas par exemple) afin de voir quel rendu il aurait et si celui-ci est assez clair pour que le site reste accessible au plus grand nombre, la question est POURQUOI sur un navigateur texte? tout simplement pasque l'affichage sur un navigateur texte tient compte de la sémantique, en effet il n'y a aucun élément graphique qui connaisse un affichage sous lynx! même les <hr /> ne sont pas interprété, les feuilles de style sont ignorée et l'affichage se réduit à du simple... texte et c'est pareil dans tous les navigateurs texte, il interprètent tous un <hx> comme un <hx>, un <ul></ul> différement d'un <dl></dl>...

Les navigateurs graphiques en revanche sont plus capricieux,quelle différence y a-t-il pour eux entre un <hx> stylé avec un css et un <p> stylé avec un css?
... aucune il s'affichera pareil pour peu que le style soit identique. Seulement on se préoccupe plus de la feuille css que du code (x)HTML lorsqu'on se base (uniquement) sur un navigateur graphique pour générer une page internet... et c'est là l'erreur. On peut éviter de nombreux bugs et différences d'affichage flagrantes entre ie et mozilla par exemple en ayant une structure de code (x)HTML claire.

Il y a quelques jours par exemple je travaillais sur un menu constitué de cette manière:

<ul id="menu">
<li><a href="#">link#01</a></li>
<li><a href="#">link#02</a></li>
<li><a href="#">link#03</a></li>
<li><a href="#">link#04</a></li>
</ul>


avec des propriétés css display définies sur block pour l'ensemple #menu a ainsi qu'un padding-left de 10px pour un menu de 150px de largeur et j'ai du user malgré tout de quelques hacks (enfin pas vraiment des hacks vu que ma css est toujours valide mais si l'on tient en considération que j'ai fait usage de cette structure de définition html > #menu a afin de définir des propriété non prise en compte par ie on peu dire que c'est du code supplémentaire inutile étant donné qu'il y a 2 définitions pour un même affichage d'un seul élément - j'espère être clair)...

alors maintenant imaginez quel aurait été mon calvaire sit j'avais utilisé un menu du type


<div id="menu">
<a href="#">link#01</a><br />
<a href="#">link#02</a><br />
<a href="#">link#03</a>
</div>


... enfin bon tout ça pour dire que souvent les erreurs d'utilisation des balises (x)HTML sont dues, plus qu'à de l'ignorance, à une volonté de la part du créateur d'obtenir un rendu particulier maintenant et tout de suite et ce peu importe la manière alors que quelques fois il suffit tout simplement de réfléchir d'abord à son code...

[PS j'espère avoir été assez explicite dans mes propos, moi le changement d'heure ça me déshoriente totalement :p mdr ]
Modifié le 31 Oct 2004 - 09:40
Laurent Denis a écrit :

Des navigateurs comme opera, ou FireFox avec ses extensions... s'avancent peu à peu dans cette voie. Et les fonctionnalités RSS d'opera et du futur FireFox en sont un autre exemple.


Firefox version anglaise intègre déjà le RSS
Ce qui est très génant dans les discussions concernant les problèmes de sémantique dans le cadre des pages web, c'est qu'il est question d'une démarche exigeante sur fond de pénurie. Car finalement le travail de balisage pertinent s'arrete plutôt vite en l'absence de balises tout simplement.

Pas de balises correspondant à ce qu'on nommerait un chapitre, pas de balises correspondant à des sous paragraphes...

De plus d'après ce que j'ai compris la structuration xhtml est purement linéaire et les points d'articulation du document ne font que se suivre et ne s'englobent pas (par exemple un paragraphe doit se clore pour qu'une liste commence alors que pour le sens commun la liste en question fait bien partie dudit paragraphe). Il y a surement de bonnes raisons pour ça mais ça n'aide pas à approfondir la réflexion sur la mise en valeur du sens.
Bonjour,

Je me sens un peu hors débat (après m'être lancé dedans), mais je vous soumets ce post parce que je me dis qu'il révèle quand même au moins un problème de manque d'information.

Donc, et après examen du code et des CSS de pages d'Aslacréations et de http://www.elmoustikoblog.net/tutoriels/, le balisage sémantique permet, couplé à des styles ayant le nom des balises, sans point devant le style, de voir appliqués d'emblée ces styles aux balises correspondantes. Les styles CSS "ordinaires" (class) ne doivent alors plus être applquées qu'à des variantes de ces styles de base, et il suffit d'introduire danc ces CSS uniquement les variations de propriétés/valeurs par rapport à ces styles de base. Ça, c'est intéressant, et autrement porteur comme argument. Je pensais que cette structuration sémantique consistait simplement à utiliser les balises <p> et <hn> et à leur appliquer un style, le genre <p class="texte"> ou <h1 class="titre1">, mais pas que ces balises pouvaient se voir attribuer directement un style correspondant.

C'est intéressant... mais je ne l'avais jamais lu nulle part, ce n'est pourtant pas faute de ne pas fréquenter assidument certains sites (Alsacréations, Openweb, CSS débutant, http://perso.wanadoo.fr/coin.des.experts/reponses/faq9_49/index.html - je ne dis pas que l'information n'était pas disponible dans l'un ou l'autre de ces sites, mais toujours est-il je ne l'y ai pas vue). Je me dis que si elle avait été davantage répandue, je n'aurais pu manquer de l'apercevoir (la chose m'avait aussi échappé car j'avais pensé que, dans le cas de balises <p> "nues", les propriétés/valeurs des paragraphes étaient définies dans la balise conteneur, bref, pas simple à remarquer.) Merci donc à ElMoustiko de m'avoir mis sur la piste. Au moins, je ne serai pas venu pour rien.

Enfin, et ça touche aussi au problème d'information, certains arguments récurrents en faveur de l'utilité de l'emploi du balisage sémantique me paraissent bien faibles. Les navigateurs ne supportant pas les feuilles de style ? Les lecteurs non-voyants ? Je me dis (sans mépriser ces derniers, et si l'un d'eux me contacte pour me demander de corriger l'un ou l'autre de mes quelques modestes sites, je pense que j'en tiendrai compte dans la mesure de mes possibilités) qu'il est peu probable que j'aie de tels navigateurs et lecteurs, et que, question probabilités, je ferais tout aussi bien, sinon mieux, de développer une version <humour>anglaise, espagnole chinoise de mon sité (le contenu pourait les intéresser, qui suis-je après tout, pour juger de ce qui peut ou non intéresser mes visiteurs)</humour>, ou de développer une version arabe ou turque (pour un site local d'information à caractère social dans une ville à forte population immigrée maghrébine et turque, ça s'impose).

Manifestement, davantage d'information est nécessaire, et il faut déplorer un manque de sites d'information générale sur les CSS/(X)HTML (Alsacréations est absolument remarquable dans ce domaine). Nombre de sites consacrés aux "standards"/"normes" + CSS+(X)HTML font la promotion de ceux-ci, mais pas d'information/formation et d'autres (l'évangélisation, c'est bien, mais l'explication, c'est mieux), qui se consacrent surtout à la publication d'astuces CSS peu susceptibles de répondre aux besoins de base de créateurs de sites, s'adressent davantage à une communauté de pairs qu'au tout-venant (et il faudrait aussi éviter un prosélytisme trop agressif, mais ça c'est une autre histoire).

En ce qui me concerne, j'ai essayé le balisage sémantique (balises <p> et <hn>) mais j'avoue que je reste partagé. Bon, les textes de mes pages ont un balisage sémantique. Personnellement, quelque part, je trouve bien que mes documents soient structurés, mais bon, pour le lecteur la différence est nulle (tout à fait d'accord avec Karl Dubost: "Mais en tant que personne profondément pragmatique, lorsque je fais un effort de mise en structure d'un texte, c'est parce que j'en tire un bénéfice concret direct ou si j'ai un sens communautaire profond, je veux que ce soit bénéfique pour la communauté.").

Le système est également plus contraignant: pas question, évidemment, par exemple, d'appliquer un titre de niveau hn à la cellule d'en-tête d'une colonne de tableau, ou alors, il faut des balises <h1></h1> dans la cellule et créer un style local pour modifier les marges haut et bas de h1, alors qu'avec des classes, c'était facile (td class="Titre1">), ou alors, il faut un style .titre1 doublant h1 pour de tels cas.

Par ailleurs le balisage sémantique est limité... faute de balises, et son emploi n'est pas évident. Ainsi, les pages du site dont je m'occupe comportent de longs textes découpés en "sections" (chaque section débute par un <h1>, avec à la fin de chaque section un lien "haut de page" renvoyant à un table des matières de liens. Ces liens sont contenus dans des paragraphes, mais ces élément ne font pas partie de la structure du texte, aussi, qu'ils soient contenus dans un <p></p> ne me semble pas pertinent dans un balisage sémantique. Autre questions: comment baliser un surtitre, ou avant-titre ( c'est là qu'on voit que le HTML a été conçu par des scientifiques)?, faut-il utiliser la balise <h1> pour le titre général de la page, ou pour les titres des principales sections (l'équivalent de chapitre I, chapitre II)?
Pour les titres de colones de tableaux, point besoin de <td class="titre"> ou de <td><h1>, tu as la balise faite pour ça : <th>

Pour ce qui est du nivelement des titres, il faut en effet exactement voir ça comme un chapitrage.

Imagine ton site comme un cours.

h1> grand I chapitre bla bla
h2> grand A titre du paragraphe
h3> petit 1 sous titre de paragraphe
h4> petit a sous titre de sous titre
h5> petit i)
h6> ...
p> contenu du cours.

C'est grossièrement la marche à suivre.
Pages :