Balises html, body et div

Bonjour,

Je ne crois pas que ce sujet ait été abordé ici sauf erreur de ma part.

La question qui me travaille depuis un petit moment et que je vous soumets concerne l'utilité de la balise div juste après la balise body.

Je m'explique. Les navigateurs modernes savent faire la distinction entre les balises html et body, ainsi on peut assigner des informations de style à la balise html puis à la balise body afin de distinguer le fond (balise html) d'un contenu (balise body) par exemple.

Si les navigateurs récents savent faire la différence entre les deux y compris ie6, ce n'est pas le cas d'ie versions 5 et 5.5. Le seul moyen de coriger ce problème est d'ajouter une balise div juste après la balise body pour obtenir le même effet.

Beaucoup affirment que cette construction ne respecte pas une forme sémantique puisque le rôle assigné à la balise div pourrait très bien être assumé par la balise body.

Donc voici ma question : est-il préférable d'altérer la sémantique d'une page et de s'assurer une compatibilité avec les vieux ie ou, au contraire, les ignorer ? J'avoue que je n'arrive pas à me départager sur la question.

Slt,

la balise div ne veut rien dire sémantiquement parlant. La question qui se pose, c'est : « Faut il allourdir le code pour IE 5.5 et inférieur ? ». Perso, je vois pas vraiment l'utilité dans le cas le plus fréquent ou on style le body pour faire du centrage horizontal : les utilisateurs d'IE 5.5 et inférieur auront juste le contenu à gauche, et pas au centre. Tant pis pour eux.

Cya

Salut SirWam,

Je travaille sur la question.

-> Quelques découvertes :

-1) Le fameux flux pour le positionnement se base entièrement par rapport à la balise body non pas sur la balise html. Donc si on attribue à la balise body un comportement identique à une balise div en lui appliquant une taille légèrement inférieure à la fenêtre, les éléments se positionneront tous par rapport à cette balise non pas la balise html donc un positionnement absolu n'ira pas au-delà de la balise body redimensionnée.

-Dès lors je comprends mieux le succès de l'utilisation de la balise div qui permet la distinction d'un espace supplémentaire entre la balise body et la balisediv. Donc on peut attribuer quelques propriétés à la balise html mais cela ne va pas au-delà. C'est un truc auquel je n'avais pas porté attention jusqu'à présent...

Ce n'est pas très gênant pour mon site mais demande quelques adaptations en conséquence.

a écrit :
les utilisateurs d'IE 5.5 et inférieur auront juste le contenu à gauche, et pas au centre. Tant pis pour eux.

-2) En fait IE5 et 5.5 n'interprètent pas un attribut de dimension à la balise body donc si tu utilises par exemple width:80%; IE ne place pas à gauche un bloc de cette dimension mais l'étale sur toute la page et je ne vois pas comment faire autrement mais en soi ce n'est pas très gênant aussi sauf, peut-être, pour les parties qui utilisent un png transparent, le fond devient sombre... pas génial mais à défaut...

Voilà comme on dit pour les dernières nouvelles. Je crois avoir enlever toutes les balises div de mon site histoire de voir ce qu'il est possible de faire sans (pas encore en ligne mais très bientôt exception faite de quelques rares pages pour lesquelles je ne vois vraiment pas comment faire pour le moment). Cela fonctionne avec quelques contraintes supplémentaires qui peuvent induire ou inciter à incorporer ces balises fameuses "balises de présentation" qui sauvent la mise bien souvent.

Techniquement intéressant et exaltant mais question pratique je ne suis pas certain que ce soit le mieux vue les nouvelles contraintes que cette technique impose.

Bonjour,

jean-marc a écrit :
Donc voici ma question : est-il préférable d'altérer la sémantique d'une page...

Deux remarques rapides :

- le <div> en question n'altère rien du tout, et notament pas une sémantique imaginaire. Il est au contraire précisément destiné à permettre un effet de présentation sur un groupe d'éléments, ce qui correspond exactement à son rôle.

- toute cette question se pose très différement selon qu'il s'agit de XHTML traité en tant que tel, ou de (X)HTML traité en tant que HTML.

Laurent,

[pour la précision, je me sers de xhtml que je traite comme du html]

En fait je suis parti de cet
article, et plus particulièrement ce passage :

a écrit :
The wrapper div has no semantic meaning whatsoever. So you need an element that wraps around all your content for styling purposes? That’s what the body and html elements are for!

Je me suis dit pourquoi pas. Essayons de voir ce que cela donne appliqué à une réalité en l'occurrence mon petit site. Maintenant n'étant pas très sûr de la pertincence de la chose, j'avais préféré poser la question ici. Ensuite tout est question d'interprétation et de compréhension, j'ai interprété "has no semantic meaning" en terme "d'altération", mea culpa.

Comme quoi vérifier sur alsacréations peut être une bonne chose

La question est toujours valable : est-ce pertinent ou non d'enlever ou de laisser cette balise ?

Bonjour,

Dans ce cadre du XHTML - HTML: pas de réponse universelle. C'est un choix à faire précisément :
- selon les styles à appliquer (le background de l'élément body, par exemple, a un fonctionnement très particulier en HTML)
- selon ce qu'on considère comme une dégradation admissible ou non dans les différents navigateurs et en tenant compte du doctype switching pour IE6.0 en particulier (Mais anticiper sur IE7 sera nécessaire).

Il faudrait commencer par faire une série de pages tests avec/sans <div id="wrapper">, correspondant chacune à un scénario de design plausible (exemples pour commencer : centrage d'une colonne unique, design figé à la hauteur de la fenêtre d'affichage, etc.). Recueillir les résultats pour tous les navigateurs. Dresser un état des lieux et des conséquences selon le choix effectué.

Ce serait une contribution très utile.
Modifié par Laurent Denis (06 Sep 2005 - 09:02)

Laurent Denis a écrit :
Bonjour,

Dans ce cadre du XHTML - HTML: pas de réponse universelle. C'est un choix à faire précisément :
- selon les styles à appliquer (le background de l'élément body, par exemple, a un fonctionnement très particulier en HTML)
- selon ce qu'on considère comme une dégradation admissible ou non dans les différents navigateurs et en tenant compte du doctype switching pour IE6.0 en particulier (Mais anticiper sur IE7 sera nécessaire).

Il faudrait commencer par faire une série de pages tests avec/sans <div id="wrapper">, correspondant chacune à un scénario de design plausible (exemples pour commencer : centrage d'une colonne unique, design figé à la hauteur de la fenêtre d'affichage, etc.). Recueillir les résultats pour tous les navigateurs. Dresser un état des lieux et des conséquences selon le choix effectué.

Ce serait une contribution très utile.

Bonjour laurent,


C'est un truc intéressant à faire mais j'aurai besoin d'aide parce que je ne maîtrise pas tout notamment pour les protocoles de tests par exemple. Et puis si on est plusieurs à travailler dessus, mieux ce sera.

Sinon je peux tester avec ie4, ie5, ie5.5, ie6 (avec ou sans le supplément de dean edwards ie7), opéra 7, 7.54, les gecko (que les versions récentes, firefox, mozilla) pour windows [à noter je fais tourner les vieux ie sous xp mais ça marche] et les classiques sous linux.

jean-marc a écrit :
C'est un truc intéressant à faire mais j'aurai besoin d'aide parce que je ne maîtrise pas tout notamment pour les protocoles de tests par exemple. Et puis si on est plusieurs à travailler dessus, mieux ce sera.

Pas de temps aujourd'hui, mais je mettrais en ligne un exemple dès que possible, si nécessaire.
Modifié par Laurent Denis (07 Sep 2005 - 10:01)