Raison d'être de la sémantique

(reprise du message précédent)

Moi je pense que même si par rapport à HTML, c'est un grand progrès de sémantique qui a été fait avec XHTML, cela ne suffit pas encore. Le problème est par exemple que l'utilisation des <div>,<span> et autres conteneurs, même en étant non abusive (pour respecter une certaine sémantique), n'est pas suffisante pour offrir un document 100% explicite. L'utilisation d'attributs id et class explicites (ex: id="page", class="article") ne vaudra pas du bon XML (ex: <page> <article>blablabla</article> <article>boblop</article> </page>) qui est largement explicite. Surtout que CSS, pour l'instant, ne permet pas à mon avis d'accéder facilement à tel ou tel élément, et qu'on est parfois tenté de rajouter un petit <span> par-ci, par-là pour lui appliquer une image de fond, ce qui serait impossible si on suivait un code de conduite sémantique strict.
Sans doute on pourrait me répondre qu'il existe des techniques pour éviter cet écart, mais elles ne sont pas accessibles à tous et un "débutant" qui voudrait utliser XHTML n'aurait pas d'autre moyen que celui-ci. Et dans la plupart des cas, il risque de tomber sur une page lui expliquant comment faire sa petite page web bourrée de balises obsolètes, de scripts pour Internet Explorer, etc.
Et de toute façon, pour revenir à mon idée de départ, rien empêche d'utiliser HTML de façon sémantique, en éliminant les balises obsolètes !
Sur ce, je retourne à mes travaux sur XML, gniark gniark gniark ...

XHTML ne veut pas dire sémantique tout comme HTML ne veut pas dire non sémantique, on peut très bien utiliser la balise <font>, ca sera sémantiquement correcte, cette balise à été faite pour mettre en forme... mais elle n'est pas recommandée.

Pour ce qui est du XML, IE ne l'interpretant pas comme il faut, on ne peut en parler qu'au conditionnel. Par ailleurs les ID et class ne sont pas fait pour donner du sens aux éléments mais pour les nommer pour mieux les gérer via JavaScript ou CSS par exemple.

Pour ce qui est d'ajouter un <span> ou un <div> pour un ajout de background ou quoi, c'est pas grave, elles sont faites pour ça ces balises.

"Le gros probleme c'est l'inertie et la flemme, car ces balises ne remettes pas du tout en cause la facon de travailler, on remplace juste les <p> ou les <span> par des balises porteuses de sens."

Il est clair que ces balises ne remettent pas en cause la façon de travailler, mais bon, quand on on crée, efface, copie-colle des paragraphes (em mode graphique), on crée et on efface des <p></p> et on leur applique des styles via une liste déroulante. Le travail terminé, on n'a eut-être pas envie de partir à la recherche de <p class="titre1"> <p class="titre2"> <p class="titre3"> pour les remplacer par des <h1 class="titre1">, <h2 class="titre2">, <h3 class="titre3">, et inversément, de <h1 class="texte">, <h2 class="texte"> <h2 class="texte"> à remplacer par autant de <p class="texte">, d'autant moins que le balisage est par ailleurs le plus léger et le plus explicite possible <p class="titre1">, <p class="titre2">, <p class="titre3">, etc. (sans parler de petites choses triviales comme des limitations de temps, manque de disponibilité). Il (m')apparaît plus simple d'en rester à <p class="texte">, <p class="titre1">, <p class="titre2">, etc.

A part la satisfaction d'avoir un code sémantiquement pertinent, et sauf pour des sites dont les contenus doivent faire l'objet de traitements particuliers par des systèmes informatiques, le bénéfice apparait nul en terme de résultat... à part des avantages marginaux et/ou non quantifiés, comme un éventuel meilleur recensement par les moteurs de recherche (à quantifier) ou une meilleure accessibilité aux non-voyants (à démontrer avec un balisage du type <p class="titren">). Les comportements des gens obéissent à des logiques économiques, et un investissement supplémentaire pour un bénéfice nul, ça n'est pas très attractif. Par ailleurs, si les balises tant du HTML que du XHTML ont été conçues à des fins de marquage sémantique du contenu, il n'en reste pas moins que l'on peut faire du code tout à fait valide sans être pour autant sémantiquement pertinent (genre tableaux pour la mise en page).

Sinon, tout à fait d'accord pour la pédagogie. Au vu d'expériences précédentes, genre "En quoi la mise en page par tableaux est-elle stupide ?" (l'article est intéressant, mais que d'intolérance affichée dans le titre!), assimilations genre "emploi des tableaux = nécessairement non-emploi des css, tableaux à imbrications multiples et multiples spacer.gif transparents", je crains que la mise en avant d'une exigence de sémanticité du code (qui est en soi une notion intéressante, tout à fait légitime et chose nécessaire pour certains sites) ne génère de nouvelles flambées de dogmatisme, et je trouve que parler de "flemme" ou d'"inertie" pour un code valide sans être pour autant sémantiquement pertinent est peut-être précisément quelque peu rapide et expéditif.

Juste pour te donner un exemple concret de la pertinence de différencier **réellement** du texte d'un titre :
-Navigation par titre avec la touche tab sur certains navigateurs
-Avec suppression des styles CSS (feuilles de style utilisateur, navigateur ne supportant pas les feuilles de styles, navigateur texte), on différencie quand même titre et texte classique.

Bonjour,

N'étant qu'un "webmaster" très débutant, je n'ai pas la prétention de discuter de la pertinence de la sémantique. Néanmoins, je trouve qu'elle apporte quelque chose d'important, c'est la lisibilité du code. Je trouve qu'un code sémantiquement correct est beaucoup plus facile à lire et à visualiser qu'un code utilisant beaucoup de tableaux ou des div/span/p stylés.

Pour le validateur c'est ce que j'avais dit je ne sais plus quand : la validateur il peut vérifier l'orthographe mais pas la grammaire...

Moi je suis plutôt partisan de d'abord parler de la sémantique à quelqu'un qui apprend à faire des pages. Quelque soit le résultat, déjà sa page sera visible sous Lynx.

Je ne suis pas du tout d'accord avec les arguments de thierry. En effet la personne qui va respecter la sémantique va effectivement s'appercevoir que sa page devient laide avec les styles par défaut des navigateurs.
Il retourne donc sur le forum où il a ses habitudes et pose sa question : "heeeey j'ai respecté la sémantique comme vous me l'aviez conseillez et maintenant ma page bah elle est toute laide !"
ET PAF deuxième étape : on peut alors l'embarquer dans l'aventure CSS. Puisqu'il a respecté la sémantique, déjà il a pas de tableau mal utilisé. Ensuite ya plus qu'à lui dire que toutes les propriétés des balises qu'on lui a conseillé d'utiliser sont modifiables dans une feuille de style.
Dernièrement, il restera encore deux ou trois problèmes quand il aura fini ça, et on peut lui dire de mettre quelques <div> vides pour ajouter des choses qu'il n'aurai pas pu autrement.
Le mec, il fait alors presque du code valide sans qu'on ne lui ai parlé une seul fois du W3C !!

Pour thierry : quand tu parles de profusion de div c'est que JUSTEMENT c'est pas sémantique puisque ça veut dire que le mec a mis des div partout en lieu et place de balises porteuse de sens.
Pour les vignettes, pas besoin de tableaux, des <dl> suffisent et rendent très bien.
Modifié le 29 Oct 2004 - 19:18

Ce qui est amusant, c'est que cette opposition de la validité et de la sémantique, ou du moins de la pédagogie par l'un et de la pédagogie par l'autre... n'est en rien dans les propos de l'article dont il est question ici :)

Tiens, deux citations. La première, pour préciser les termes du débat:

mholzschlag a écrit :

Validation? Here's a surprise! Validation is in and of itself not a requirement per se. What is required is conformance. So you theoretically don't have to validate a darn thing but if you want to test its conformance, which IS an explicit requirement, you have to validate.

So, here's what we have:
-Separation of presentation and structure: implied as ideal: a best practice.
-Semantic markup: implied: a best practice.
-Content delivery via media types: explicit, a "standard."
-Well-formed markup: explicit, a "standard."
-Conformance: explicit, a "standard."

mholzschlag a écrit :

What we can do is work together more effectively to hone in on what should explicitly fit into a standard, and what is a best practice, and come up with some useful terms that we as professionals understand. These terms should also be more friendly to marketing departments, non-technical support people, and the lay public, and they should adequately describe the marriage of science and practice within our industry.

Là, en revanche... on est en plein dedans dans cette discussion: quel méli-mélo de sens différents prêtés aux mots "standards", "valide", "conforme" et surtout sémantique !
Modifié le 29 Oct 2004 - 19:32

Mmmh je ne pense pas qu'il y ait pédagogie de l'un ou de l'autre, les deux doivent bien évidemment être présente. Donc pas d'opposition, loin de là. Mais on ne peut pas tout apprendre en même temps à quelqu'un qui débute (à quelqu'un tout court même) et c'est pourquoi je proposais une sorte d'ordre d'apprentissage, même si au fil de ce que """ l'élève """ va savoir, les deux """ cours """ vous petit à petit se superposer et on va pouvoir parler des deux en même temps.

Sinon quand je parle de sémantique, j'entend : employer les bons mots pour les bonnes idées. Appliqué au html, cela signifie utiliser les bonnes balises suivant le sens de ce qu'il y a à l'intérieur.
Modifié le 29 Oct 2004 - 19:45

(à ElMoustiko)

ElMoustiko a écrit :
Avec suppression des styles CSS (feuilles de style utilisateur, navigateur ne supportant pas les feuilles de styles, navigateur texte), on différencie quand même titre et texte classique.

Le cas de la suppression des feuilles de styles, je connaissais, mais c'est précisément ce que je regarde comme un cas marginal (ça concerne combien de navigateurs, et iront-ils visiter mon site?). D'ailleurs, s'il fallait créer les pages web en fonction de cette éventualité, ne faudrait-il pas également, en cas de mise en page multicolonnes, prévoir des mises en forme HTML (tableaux, pour la mise en page, balises <center>, <right>) en sus des css :)

ElMoustiko a écrit :
Navigation par titre avec la touche tab sur certains navigateurs

Là, ça m'intéresse. C'est déjà plus précis et plus concret comme avantage. Pouvez-vous me préciser quels navigateurs et me dire s'il suffit seulement d'employer les balises <hn> pour réaliser cela, ou s'il faut faire autre chose, et dans ce cas, si vous voulez bien, me renvoyer à une référence (site en français, de préférence).

PS. J'ai été voir votre site. Vos tutoriels sont très bien. Merci.


En réponse au poste de aurent Denis (Laurent Denis 29 Oct 2004 - 19:26:11), il est vrai que "normes, "standards", "recommandations", "validité", ce n'est pas simple à déméler et à manipuler, et qu'il me parait excessif de tout ériger en standard de même importance:

"Separation of presentation and structure: implied as ideal: a best practice.
Semantic markup: implied: a best practice.
Content delivery via media types: explicit, a "standard."
Well-formed markup: explicit, a "standard."
Conformance: explicit, a "standard."
Clearly a difference between what is an explicit part of a specification or recommendation and what is the ideal goal that's implied by either the specification and practitioners (or both)."

http://www.webstandards.org/buzz/archive/2004_10.html#a000463
Modifié le 29 Oct 2004 - 20:50

thierry a écrit :
Le cas de la suppression des feuilles de styles, je connaissais, mais c'est précisément ce que je regarde comme un cas marginal (ça concerne combien de navigateurs, et iront-ils visiter mon site?). D'ailleurs, s'il fallait créer les pages web en fonction de cette éventualité, ne faudrait-il pas également, en cas de mise en page multicolonnes, prévoir des mises en forme HTML (tableaux, pour la mise en page, balises <center>, <right>) en sus des css :)

Oulaaahh je trouve ça bien catégorique et bien peu respectueux des visiteurs, que connais tu des préférences de tes visiteurs ;), Opera permet par exemple la personnalisation des feuilles de style, et là c'est vraiment très concret, une feuille de style distinguant clairement les titres du reste peut etre très pratique.

Pour le fait que sans CSS tu perdes la structure en colone... et alors ??? Le contenu est parfaitement utilisable et très lisible.

Sinon, pour revenir au fondement... en fait tu te compliques la vie à distinguer class="titre", class="text" et de mettre tout ca dans des paragraphes.... c'est limite stupide (le prend pas mal), t'ecris <hN> <p> ca fait dix fois plus vite et c'est bien plus propre.

Pour la navigation par tabulation, Laurent Denis devrait pouvoir t'expliquer ça mieux que moi !

ps : j'ai édité rapidement ton message pour bien faire ressortir les citations pour faciliter la lecture

ps2 : on peut se tutoyer :D, je ne suis pas assez vieux pour qu'on me vouvoie !

ps3 : merci pour les tutos mais ils sont en refonte totale, et là tu n'a dû voir qu'un seul tuto...
Modifié le 29 Oct 2004 - 20:56

RastaPopoulos a écrit :
Moi je suis plutôt partisan de d'abord parler de la sémantique à quelqu'un qui apprend à faire des pages. Quelque soit le résultat, déjà sa page sera visible sous Lynx.

Je me suis amusé, j'ai créé une feuille de style "Lynx" pour mon site: résultat ici

Laurent Denis a écrit :
Ce qui est amusant, c'est que cette opposition de la validité et de la sémantique, ou du moins de la pédagogie par l'un et de la pédagogie par l'autre... n'est en rien dans les propos de l'article dont il est question ici :)

Tout à fait C'est pas merveilleux ? Mais c'est tout ce dont j'avais besoin pour orienter ce débat à la base. :)

Laurent Denis a écrit :
Là, en revanche... on est en plein dedans dans cette discussion: quel méli-mélo de sens différents prêtés aux mots "standards", "valide", "conforme" et surtout sémantique !

Et c'est précisement ou je souhaitais qu'on aille... pour bien discuter des choses, il faut commencer par les nommer et s'entendre sur la signification de cette nomenclature...
Modifié le 29 Oct 2004 - 22:08

ElMoustiko a écrit :
Sinon, pour revenir au fondement... en fait tu te compliques la vie à distinguer class="titre", class="text" et de mettre tout ca dans des paragraphes.... c'est limite stupide (le prend pas mal), t'ecris <hN> <p> ca fait dix fois plus vite et c'est bien plus propre."

Ben pas vraiment... même si ça peut en avoir l'air. Je me suis pas mal intéressé à la typo et à la mise en page papier. Une chose que je trouve moche en (X)HTML, c'est l'espace par défaut entre les paragraphes. J'ai cherché à le réduire, à mettre des marges avant et après différentes pour les paragraphes de chaque niveau de titre. C'est plus agréable à lire, mais, ç'est pas une propriété héritable du conteneur dans lequel sont placés les paragraphes. Faut styler chaque paragraphe individuellement... et ça simplifie pas le code, mais merci des remarques :)

Je suis remonté à http://www.elmoustikoblog.net/
Modifié le 29 Oct 2004 - 22:45

Euh je suis pas certain de comprendre...
Code html :

<h1>Ton titre de niveau1</h1>
  <h2>Ton titre de niveau2</h2>
  <p>Ton texte</p>
  <p>Un autre texte</p>
  <h2>Un autre titre de niveau2</h2>
  <p>Du texte</p>

Code CSS :

h1, h2
{
  margin: 10px 0 ;
}

p
{
  margin: 15px 0 ;
}

Je ne vois pas où tu dois spécifier 36 fois la même chose... C'est vraiment pas de la mauvaise volonté mais je ne comprend pas du tout ton point de vue :s

"Sinon, pour revenir au fondement... en fait tu te compliques la vie à distinguer class="titre", class="text" et de mettre tout ca dans des paragraphes.... c'est limite stupide (le prend pas mal), t'ecris <hN> <p> ca fait dix fois plus vite et c'est bien plus propre."

Ben pas vraiment... même si ça peut en avoir l'air. Je me suis pas mal intéressé à la typo et à la mise en page papier. Une chose que je trouve moche en (X)HTML, c'est l'espace par défaut entre les paragraphes. J'ai cherché à le réduire, à mettre des marges avant et après différentes pour les paragraphes de chaque niveau de titre. C'est plus agréable à lire, mais, ç'est pas une propriété héritable du conteneur dans lequel sont placés les paragraphes. Faut styler chaque paragraphe individuellement... et ça simplifie pas le code, mais merci des remarques :)

Je suis remonté à http://www.elmoustikoblog.net/

Donc le sujet c'est bien Raison d'être de la sémantique?

Alors on ne parle pas de positionnement CSS versus la mise en page par <table>, de l'utilisation abusive de l'attribut class="" ou encore l'utilisation superflu de <div> imbriquées (nested).

La raison d'être de la sémantique est d'appeler un chat un chat et un chien un chien.

Selon Antidote, la sémantique c'est :
[INFORMATIQUE] Ensemble des règles permettant l'écriture des instructions d'un programme dans un langage donné.
[LOGIQUE] Qui se rapporte à l'interprétation des symboles et des règles de formation d'un système formel.

Et selon le petit ROBERT :

n.f.
Étude du langage considéré du point de vue du sens...

adj.
sémantique : se dit d'une phrase qui a un sens. (par oppos. à asémantique).
asémantique : se dit d'une phrase qui n'a pas de sens, bien qu'elle puisse être grammaticale.

--------------------
- Validez vos pages!

Un code invalide est souvent une question d'orthographe.

Par exemple :
Une balise pas fermée, un ASCII incomplet &#160

Et parfois une question de sémantique.

Par exemple :
Un élément de catégorie bloc (block level) à l'intérieur d'un élément de catégorie linéaire (inline level).
<a><h1></h1></a>

Des balises croisées
<div><span></div></span>

Souvent, une mauvaise sémantique n'empêche pas l'affichage, mais...

--------------------
- Truc!

Si votre code ressemble à ceci :

item1<br />
item2<br />
item3<br />
item4<br />

Il y a de bonne chance que vous avez besoin de celà :

<ul>
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
</ul>

Modifié le 30 Oct 2004 - 06:57

Hum... Si vous voulez en effet en revenir à l'intitulé de ce sujet ( Raison d'être de la sémantique), je vous propose d'aller lire et relire un récent billet de Karl Dubost, passé un peu trop inaperçu : HTML 4.01, une star bien mal comprise
Je pense qu'il permettra à beaucoup de participants à cette discussion d'évacuer la "question de la présentation", et surtout de mieux saisir l'enjeu le plus important : la sémantique "pragmatique".

Petit extrait à méditer :

Karl Dubost a écrit :

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

(...)

Mais poussons un peu à l'extrême le raisonnement, quel intérêt d'utiliser un élément p pour décrire un paragraphe ? Quel est l'outil qui implémente vraiment un p ? Quels sont les outils qui implémentent de manière interopérable l'élément paragraphe p ? Je ne parle pas de la représentation visuelle du paragraphe, mais bien de sa valeur sémantique. Je rappelle que selon le Petit Robert, un paragraphe est une "division d'un écrit en prose, offrant une certaine unité de pensée ou de composition".

Une fois encore, on pourrait imaginer un analyseur lexical qui tire le sens du texte, et qui par exemple serait capable de faire des résumés de paragraphe. En effet, l'analyseur identifiant le paragraphe saurait qu'il y a une unité d'idée et donc qu'il est possible de le résumer.

(...)

C'est pour cela que je dis, de façon un peu provocatrice, que HTML 4.01 n'est pas implémenté car dans la plupart des cas, la sémantique des éléments n'est pas utilisée et donc ne donne aucun bénéfice à l'utilisateur. Cela veut-il dire qu'il faut cesser de les utiliser ? Non. Parce que la conscience de ce qu'est HTML a tout juste commencé, il y a deux ans. On a commencé à voir fleurir sur le Web des articles tentant de déterminer le bon usage des balises HTML, on peut donc espérer que des produits spécialisés, des moteurs de recherche, etc, profiteront de ces éléments.

Modifié le 30 Oct 2004 - 08:44

Salut,
j'essai de bien comprendre le sens du mot 'sémantique'. J'aimerai savoir si mon point de comparaison est juste.

Antoine a écrit :

Utiliser, en (X)HTML, 3 <a>...</a><br /> à la place d'un :
<ul>
<li><a>...</a></li>
<li><a>...</a></li>
<li><a>...</a></li>
</ul>

serait comparable à :

Antoine a écrit :

Utiliser, en Lego, 3 plaques de 2*4 empilées à la place d'une brique de 2*4

Le resultat resterait 'le même', mais ce n'est pas la fonction ces plaques/des <br /> en (X)HTML.


Merci de m'indiquer si ma vison de la chose est bonne ou non,
amicalement,
Antoine.
Modifié le 30 Oct 2004 - 13:51

Bouda a écrit :
j'essai de bien comprendre le sens du mot 'sémantique'. J'aimerai savoir si mon point de comparaison est juste.

Il est pas mal, bien qu'un peu curieux... mais enfin, c'est un peu l'esprit. Sauf que tes trois blocs légo devraient être attachés ensemble et c'Est cet attachement qui leur donnerait leur sens, leur relation.

Denis a écrit :

Il est pas mal, bien qu'un peu curieux... mais enfin, c'est un peu l'esprit.

Je cherchais quelque chose de très 'simple', bref, je commence à comprendre ce qu'est exactement la sémantique. Merci à toi.