[Résolu] Html dans une string js est invalide selon le validator

Bonjour à tous,

Voilà je fais actuellement un site en respectant les standards XHTML/CSS (ou d'ailleurs IE me donne du fil à retordre, mais bon ça apparament, c'est normal).

J'ai un problème avec du code HTML dans une string JavaScript. En fait ce JavaScript permet de créer une info-bulle dynamique. Il s'agit d'une pseudo classe appellée iBox qui prend en premier paramètre le titre de la boite et en second, le corps du texte qui sera présent dans la boite. En gros :

ibox__fun = new iBox('Fun', 'bonjour je suis un hint');

Ce qui donne en gros :
http://sbibuilder.dc-france.com/.tmp/fun1.png

Seulement voilà, j'aimerais formater un peu plus le texte du corps de la boite. J'ai donc essayé :

ibox__fun = new iBox('Fun', '<b>bonjour</b> je suis un <font color="red">hint</font>');

Donne :
http://sbibuilder.dc-france.com/.tmp/fun2.png

Ce qui marche parfaitement sur tous les navigateurs.

Cependant, lorsque je passe ma page dans le validator, j'ai une erreur à ce niveau là :

a écrit :
Error Line 203 column 59: document type does not allow element "br" here.

...('Fun', 'FunFunFunFunFunvgjhfjhgj<br/>fsdfsdf<font color="red">dfjsdfkds</fon

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

J'aimerais savoir si je dois vraiment supprimer tout formatage ou s'il y'a moyen de contourner cette erreur ?

Peut être que j'utilise un mauvais DOCTYPE ? J'utilise le XHTML 1.0 Transitional. Il est déconseillé ? Il faut en mettre un autre à la place ?

Merci d'avance de vos réponses

SiZ!
Modifié par SiZiOUS (22 Oct 2006 - 22:53)

Pour ton information, <b> et <font> sont deprecated.

Ceci étant fait, le meilleur conseil qu'on puisse donner est de placer le script dans un fichier .js externe. Comme ça, fini ce type de problème, et la page est plus lisible.

Si tu as envie de le garder sur la page courante, la solution est toute simple mais il faut le savoir : ajoute un commentaire HTML juste après <script> et ferme-le juste avant </script> :

<script type="text/javascript"<
// <!-- 
// ton code
// -->
</script>

Cette mesure fonctionne dans 99,9% des cas.
Seule exception, le validator hurlera si tu utilises un opérateur de décrémentation (double tieret (ex : i--; )).
Dans ce cas, il faudra impérativement utiliser un CDATA.
Si ça t'intéresse d'en connaître la syntaxe, je te renvoie sur openweb qui en propose une qui soit compatible avec les navigateurs ne reconnaissant pas le marqueur CDATA.

QuentinC a écrit :
Pour ton information, <b> et <font> sont deprecated.

Ah ben tu viens de m'apprendre un truc là
Je suppose qu'il faut utiliser <strong> à la place de <b> et pour <font> ben un <span> sans doutes. Merci de l'info. Dommage que le validator ne disse rien à ce sujet.

QuentinC a écrit :
Ceci étant fait, le meilleur conseil qu'on puisse donner est de placer le script dans un fichier .js externe. Comme ça, fini ce type de problème, et la page est plus lisible.

Ce script est généré dynamiquement en PHP donc ça risque d'être un peu compliqué de le faire en externe. Mais par contre la pseudo-classe javascript iBox est dans un fichier externe (j'essaye de faire le plus de choses en externe).

QuentinC a écrit :
Si tu as envie de le garder sur la page courante, la solution est toute simple mais il faut le savoir : ajoute un commentaire HTML juste après <script> et ferme-le juste avant </script>

Ah ben, je connaissais pas. ^^ Merci de l'info, je vais essayer immédiatement.

Merci beaucoup pour ton aide.

:

a écrit :
This Page Is Valid XHTML 1.0 Transitional!

Super ! Ca a marché !
Merci beaucoup QuentinC.
Modifié par SiZiOUS (22 Oct 2006 - 22:52)

Pour <b> (et d'ailleurs ceux de la même famille <i> <u> <s>), en fait, il s'agit plus d'une recommandation qu'une réelle obligation. Pour le moment, ils sont encore parfaitement valides.
Les alternatives sont en effet <strong> et <em> principalement. Mais rien ne t'interdit d'utiliser <b< si tu veux.

Par contre <font> ... tu viens de m'apprendre que le validateur n'hurle même pas en doctype ttransitional. Honteux, je trouve ça honteux.

QuentinC a écrit :
Pour <b> (et d'ailleurs ceux de la même famille <i> <u> <s>), en fait, il s'agit plus d'une recommandation qu'une réelle obligation. Pour le moment, ils sont encore parfaitement valides.
Les alternatives sont en effet <strong> et <em> principalement. Mais rien ne t'interdit d'utiliser <b< si tu veux.

Comme j'essaye de vraiment me mettre aux standards, je vais faire ce que tu me dis, et je vais même définir dans mon CSS strong { font-weight: bold } pour être sur et pareil pour em. Je sais pas si c'est utile, mais je suis sur qu'il y'a bien un navigateur sur terre qui aura une valeur par défaut de strong différente... ou corrigez moi pour dire que ce que je raconte c'est n'importe quoi et que ce n'est pas utile.

QuentinC a écrit :
Par contre <font> ... tu viens de m'apprendre que le validateur n'hurle même pas en doctype ttransitional. Honteux, je trouve ça honteux.

En effet ! W3C pourrait afficher des warnings quand même genre "<b> is deprecated, strong is recommended instead"... c'est bizarre.

Sinon j'ai utilisé ce doctype un peu au hasard je l'avoue, j'ai pas lu de cours à ce sujet... je l'ai utilisé car il semble assez proche du HTML classique (transitionnal de HTML 4 à XHTML 1 ?...) et que ça permet de faire un site tourné "vers l'avenir"... enfin tout ça pour dire que je comprends pas pourquoi c'est (particulièrement) honteux "en transitionnal" (et que j'aimerais bien savoir pourquoi ). Désolé pour ma curiosité
Modifié par SiZiOUS (23 Oct 2006 - 18:09)

a écrit :

Comme j'essaye de vraiment me mettre aux standards, je vais faire ce que tu me dis, et je vais même définir dans mon CSS strong { font-weight: bold } pour
être sur et pareil pour em. Je sais pas si c'est utile, mais je suis sur qu'il y'a bien un navigateur sur terre qui aura une valeur par défaut de strong
différente... ou corrigez moi pour dire que ce que je raconte c'est n'importe quoi et que ce n'est pas utile.

En général, les navigateurs rendent <strong> en gras et <em> en italique. Mais il vaut mieux en effet le préciser que de jouer avec les valeurs présumés par défaut, qui peuvent avoir des exceptions parfois inattendues.

A propos de <font>, je trouve ça honteux car la première philosophie des standards est de séparer information de structure et informations de mise en forme graphique.
Or il se trouve que <font> est le contre-exemple par excellence... et que, par conséquent, son utilisation ne devrait pas être considérée comme valide dans aucun des 6 doctypes normalisés.

a écrit :
A propos de <font>, je trouve ça honteux car la première philosophie des standards est de séparer information de structure et informations de mise en forme graphique.
Or il se trouve que <font> est le contre-exemple par excellence... et que, par conséquent, son utilisation ne devrait pas être considérée comme valide dans aucun des 6 doctypes normalisés.

Ah oui j'aurais du réflechir à ça en effet. Dans ma page je n'ai aucun attribut fixe à part les colonnes de tableaux (oui j'ai des vrais tableaux dans ma page c'est pas pour ma mise en page ^^).

Merci pour le petit cours en tout cas.