Valider ? Pour quoi faire concrètement ?
Si valider sa page web ne doit pas être un but, c'est souvent une étape primordiale pour éviter les problèmes d'affichages.
Suite à une question postée sur le forum Alsacréations et qui concernait un problème d'affichage (dixit : ma liste me fait sauter mon style appliqué a <p>. edit : en fait je veux faire une liste ds un p, ...
) et où s'en suit un code HTML mal imbriqué, Laurent Denis nous gratifie d'une intervention à retenir.
En fait, sa réponse est suffisamment pertinente pour constituer à elle seule l'objet de ce billet :
Voilà une erreur (tout à fait compréhensible) très intéressante et très pédagogique.
En effet, en (X)HTML, les éléments <p> ne peuvent pas contenir de listes
<ul>, lesquelles ne peuvent pas contenir directement des éléments<dl>, lesquelles ne peuvent pas contenir du texte anonyme. Et cette erreur de validité HTML conduit directement au problème CSS... alors que beaucoup de gens, volontairement ou involontairement, ne se soucient pas de réaliser d'abord un site valide avant de s'occuper de sa présentation...En cas de problème de rendu, toujours commencer par vérifier la validité du code (X)HTML
Un code invalide sera traité par chaque navigateur selon ses propres processus de traitement d'erreur, potentiellement variables de l'un à l'autre, car ils ne sont soumis actuellement à aucune spécification : à moins d'avoir une parfaite connaissance de ces processus pour chaque navigateur (ce qui est en fait illusoire actuellement, même à un très haut niveau d'expertise), on s'en remet donc en quelque-sorte au hasard pour déterminer l'arbre du document, c'est à dire la structure finale réelle de son document telle que le navigateur va l'utiliser pour le rendre à l'écran avec CSS et le manipuler avec JavaScript. __ Les styles CSS, on l'ignore trop souvent, ne sont en effet pas appliqués au code HTML que vous avez écrit, mais au code tel qu'il a été interprété et corrigé par le navigateur, qui s'efforcera de rétablir un code valide et donc utilisable.__ Le résultat peut être très loin des attentes de l'auteur, comme c'est le cas ici.
Pour les curieux, un exemple : ici, IE, FF et Opera considèrent que le paragraphe se ferme avant l'ouverture de la liste
<ul>, et insèrent une balise</p>avant le<ul>. Cette décision est logique dans la mesure où la balise de fermeture des paragraphes est optionnelle en HTML et où le document, même s'il est peut-être formellement en XHTML, est traité en tant que text/html. C'est d'ailleurs ce qui conduit ces trois navigateurs à adopter dans ce cas précis la même méthode de traitement de l'erreur, alors qu'ils auraient pu diverger.Firefox traite de même la fermeture finale de paragraphe en la transformant en
<p></p>vide. Opera, lui, fait directement disparaître le</p>et ne génère rien dans l'arbre du document à ce point. Je n'ai pas vérifié quel était le choix fait par IE, mais on peut noter au passage que, dans tous ces navigateurs, il est totalement inutile de mettre une liste<ul>dans un paragraphe puisque cette structure invalide est obligatoirement neutralisée en HTML et (X)HTML traité comme tel.On se retrouve donc, au final, avec un premier paragraphe contenant du texte, suivi par une liste
<ul>au contenu invalide, suivi par du texte anonyme (celui commençant par "Ainsi que tant d'autres hélas disparues..."), suivi éventuellement par un paragraphe vide.Tout à fait logiquement, le contenu de
<ul>et le texte anonyme ne peuvent pas être stylés par une règlep {...}comme l'auteur le souhaitait, puisqu'ils ne sont pas dans un<p>une fois le code corrigé par ces navigateurs.On a donc structuré et stylé pour rien, sauf que le navigateur et l'auteur ont dû travailler un peu plus que si le code avait été valide. C'est un très bel exemple, très simple, de la nécessité constante de ne travailler que sur des structures valides... et donc prévisibles et faisant gagner du temps , ce qui est tout l'intérêt des standards Web
(En passant, pour les vraiment très curieux, voir le récent billet de Yan Hyxon : Tag Soup: Crazy parsing adventures, particulièrement révélateur.)
Merci aux différents participants de cette discussion sur le forum Alsacréations et plus particulièrement Laurent Denis
Retrouvez tous les participants au blog communautaire sur cette page dédiée.
Par Collectif Alsacréations - lundi 13 février 2006 à 17:55
Astuces - #223 - Lu 12624 fois - Intérêt du billet: 3.35(17) - Fil RSS
Trackbacks
Le samedi 18 février 2006 à 15:01, de Pololand :: #
Le lundi 20 février 2006 à 11:17, de Simplicité en «-tique» :: #
Les trackbacks pour ce billet sont fermés.
Evaluez ce billet
Commentaires
Le lundi 13 février 2006 à 20:43, par CrystalGraph :: site :: #
Le mardi 14 février 2006 à 14:06, par Monique :: site :: #
Le mardi 14 février 2006 à 19:46, par QuentinC :: site :: #
Le mardi 14 février 2006 à 20:45, par Bernard Pivot (encore lui !) :: #
Le mercredi 15 février 2006 à 15:40, par Felipe :: site :: #
Le jeudi 16 février 2006 à 00:21, par clb56 :: #
Le jeudi 16 février 2006 à 16:15, par TheRec :: #
Le jeudi 16 février 2006 à 16:36, par Laurent Denis :: site :: #
Le jeudi 16 février 2006 à 16:47, par Laurent Denis :: site :: #
Le jeudi 16 février 2006 à 18:57, par TheRec :: #
Le jeudi 16 février 2006 à 19:00, par TheRec :: #
Le samedi 18 février 2006 à 11:33, par Ju :: site :: #
Le samedi 18 février 2006 à 15:46, par Laurent Denis :: #
Le lundi 20 février 2006 à 11:33, par TestMan :: #
Le mardi 21 février 2006 à 11:25, par Seb :: site :: #
Ajouter un commentaire
Les commentaires pour ce billet sont fermés.