[résolu] Faut-il vraiment utiliser des DIV?

Bonjour à tous et à toutes,

une question toute bête de débutant (bête également): doit-on absolument utiliser des DIV?

Je viens de faire une mise en page très simple
code HTML:

<div id="container">
<div id="header">
</div>
<p id="menu">Test Menu Test Menu</p>
<p id="submenu">sub1 sub2 sub3 </p>
<div id="content">
</div>
<p id="footer">Test Footer</p>
</div>

Je sais, ce n'est sans doute pas commun mais comme mes menu, sous-menu et footer ne vont recevoir que du texte, j'ai pensé qu'utiliser une balise <p> ferait l'affaire. Et encore, je pourrais même sans doute remplacer les DIV du header et du contenu mais ils doivent recevoir des images et une mise en forme de texte en colonnes pour le contenu et j'ai peur que la balise <p> ne me permette pas de le faire.

Quels risquent d'être les incovénients de cette méthode? Si le résultat vous paraît contestable que feriez-vous à la place?

Merci
Stéphane
Modifié par taiwanren (28 Mar 2008 - 06:31)

Bonjour,

taiwanren a écrit :
une question toute bête de débutant (bête également): doit-on absolument utiliser des DIV?

Non, on ne doit pas. En général, on utilise des div pour les blocs principaux de la page et pour regrouper plusieurs éléments de type bloc ensemble. En «bout de course», on utilisera plutôt les autres éléments HTML tels que les titres, paragraphes, listes, etc.

taiwanren a écrit :
Je sais, ce n'est sans doute pas commun mais comme mes menu, sous-menu et footer ne vont recevoir que du texte, j'ai pensé qu'utiliser une balise <p> ferait l'affaire.

En fait non seulement c'est plutôt une bonne idée, mais en plus c'est plutôt commun comme pratique (sauf chez les malades atteints de divite aigüe).
Par contre, on considère souvent qu'un menu est une liste de liens, et alors on utilise plutôt les éléments ul (liste non ordonnée) et li (items de liste), en stylant tout ça en CSS pour obtenir le rendu souhaité.

Florent V. a écrit :

Non, on ne doit pas. En général, on utilise des div pour les blocs principaux de la page et pour regrouper plusieurs éléments de type bloc ensemble. En «bout de course», on utilisera plutôt les autres éléments HTML tels que les titres, paragraphes, listes, etc.

Oui, c'est bien ce que j'avais cru comprendre en potassant des tutoriels sur le web mais à force de voir des CSS d'exemples bourrés de div je finissais par ne plus vraiment m'y retrouver.

Florent V. a écrit :
En fait non seulement c'est plutôt une bonne idée, mais en plus c'est plutôt commun comme pratique (sauf chez les malades atteints de divite aigüe).
Par contre, on considère souvent qu'un menu est une liste de liens, et alors on utilise plutôt les éléments ul (liste non ordonnée) et li (items de liste), en stylant tout ça en CSS pour obtenir le rendu souhaité.

Je prends note et vais essayer ça de suite.

Sinon, une question un peu liée: certaines balises sont-elles plus à même que d'autres de provoquer des bugs avec IE? Je suis sous Mac, je ne teste donc pas avec IE et j'avance à l'aveuglette à ce niveau. Un lien vers un tutoriel expliquant clairement comment formater le code pour le rendre IE-compatible n'est pas de refus.

Merci
Stéphane

taiwanren a écrit :

Sinon, une question un peu liée: certaines balises sont-elles plus à même que d'autres de provoquer des bugs avec IE? Je suis sous Mac, je ne teste donc pas avec IE et j'avance à l'aveuglette à ce niveau. Un lien vers un tutoriel expliquant clairement comment formater le code pour le rendre IE-compatible n'est pas de refus.

Il n'existe pas de recette magique et bien souvent seul l'expérience permet de se passer d'heures et d'heures de débugage. Les balises ne causent pas vraiement de bug, le style par défaut est parfois différent d'un navigateur à l'autre.

Hello,

Je me permets de te renvoyer au tutoriel sur le positionnement des éléments et plus précisément au pense-bête qui dit ceci :

a écrit :

# Tous les éléments (balises) HTML peuvent être positionnés, décorés, dimensionnés, ... grâce aux styles CSS. Cela signifie que les CSS ne s'appliquent pas qu'aux éléments <div> contrairement à certaines idées reçues : une image (<img>), une liste (<ul>), un paragraphe (<p>), etc. peuvent être stylés en CSS sans avoir besoin d'être contenus dans un élément <div>. Evitez d'ailleurs de surcharger vos documents d'éléments <div> inutiles.
# Employez toujours les éléments selon leur fonction et non selon leur aspect (puisque cet aspect pourra facilement être modifié via CSS) : un paragraphe sera défini par la balise <p>, un titre par la balise <h1>, <h2>..., etc. Notez que l'élément <div> est neutre est sert de "bouche-trou" pour englober d'autres éléments ou servir lorsqu'aucun autre élément n'est approprié. N'utilisez pas <div> pour englober des éléments seuls !

taiwanren a écrit :
Sinon, une question un peu liée: certaines balises sont-elles plus à même que d'autres de provoquer des bugs avec IE? Je suis sous Mac, je ne teste donc pas avec IE et j'avance à l'aveuglette à ce niveau. Un lien vers un tutoriel expliquant clairement comment formater le code pour le rendre IE-compatible n'est pas de refus.

Tout ce qui touche aux formulaires est positionné différemment selon les navigateurs. Mais pas juste IE6/7: Firefox, Opera et Safari aussi (enfin Safari ne permet rien, c'est une manière d'éviter les bugs bon OK je trolle)
EDIT après avoir lu le post de Raphaël: ul/li ont des margin/padding par défaut différents sur IE et Firefox.

Ce sont des différences d'affichage et non vraiment des bugs (c'est un comportement normal que les navigateurs aient un affichage par défaut, en l'absence de toute CSS, qui soit différent.

Les bons gros bugs d'IE sont nettement plus pernicieux et liés aux CSS:
float + margin = doubled margin, peek-a-boo et variantes dû à l'absence d'hasLayout (réglé par un zoom: 1; ou équivalent), three pixels jog , duplicate content pour en citer 4 communs ...
Modifié par Felipe (27 Mar 2008 - 11:15)

Felipe a écrit :

Ce sont des différences d'affichage et non vraiment des bugs (c'est un comportement normal que les navigateurs aient un affichage par défaut, en l'absence de toute CSS, qui soit différent.

D'ailleurs, à ce sujet...

Salut,

Disons qu'utiliser des div s'avera utile lors que ton site prendra de l'ampleur avec plus de block et un contenu changeant

FunK a écrit :
Disons qu'utiliser des div s'avera utile lors que ton site prendra de l'ampleur avec plus de block et un contenu changeant

Hmm...

L'élément div est un support de styles ou éventuellement d'informations de langue (<div lang="en">...</div>). On utiliser des div quand on aura un besoin: pour réaliser telle partie d'une intégration HTML/CSS, pour regrouper des éléments en donnant une information de langue, etc.

Disons que c'est préférable d'utiliser les div pour une mise en forme graphique plus agréable, ce qui n'est pas le cas d'une mise en forme avec des tableau qui au final reste tres dur a effectuer !

bonsoir,

oups, il n'y a pas de règles.

Exemple extrémes , on peut fabriquer une page avec des spans a coup de class et d'id sans aucune sémantique ou structure de la page et avoir un résultat similaire avec des divs , tableaux ou un contenu correctement(cohérent ) balisé , css est puissant et tout ce qui est puissant est dangereux .

Ce topic http://forum.alsacreations.com/topic-1-33579-1--WebDesign-graphisme-et-CSS-.html
est interessant et plein de bon conseils , pas de div contre des tableaux en vue , une discussion fertile et mesurée .
GC