Structure du code html ??

Bonsoir à tous,

J'ai souvent remarqué quand je regarde la source de certain site que la mise en page est particuliere...souvent :

<div>
     <div>
                <ul>
               </ul>
     </div>
</div>

Bref simple exemple mais j'aimerai savoir si cela a une importance et si oui laquelle ?
Y'a t'il une regle à suivre, un site qui explique ?

Merci
Modifié par Lekouti (25 May 2007 - 19:34)

Bonsoir,
on peut en général tout aussi bien l'écrire comme ceci (mais à voir selon le cas)

<div>         
    <ul>
    </ul>
</div>

étant donné que les listes non-odonnées (<ul>) sont des éléments de niveau block au même titre que les div à la différence que l'élément div n'est pas un élément porteur de sens comme le sont les ul.

a écrit :
Bref simple exemple mais j'aimerai savoir si cela a une importance et si oui laquelle ?

Non la structuration du code ne devrait dépendre que de son contenu,
donc il n'y a aucune règle à suivre à ce niveau là, seulement des règles d'imbrication (validité) possible à respecter. Pour cela voir la FAQ entres autres.
Modifié par Hermann (25 May 2007 - 20:11)

Hermann a écrit :
Non la structuration du code ne devrait dépendre que de son contenu

Hermann, bisounours des CSS.

Effectivement, ça serait sympa (et simple) si on pouvait se contenter de créer nos éléments de contenu, et ne jamais caser de div nulle part pour la mise en page (uniquement, à l'occasion, pour indiquer un changement ponctuel de langue...).

Dans la pratique, vu les limitations des CSS (par exemple : une seule image de fond par bloc...) et celles des navigateurs, on est parfois obligé de rajouter des éléments sémantiquement inutiles, notamment les divs. Heureusement, ces divs de mise en forme sont aussi sémantiquement négligeables, et du coup ça ne nous tient pas éveillé la nuit.

Toujours dans la pratique (et on s'éloigne encore un peu des bisounours), il arrive même que l'on place dans le code HTML des divs inutiles, en prévision :
- des ajouts, par les rédacteurs, de contenus (et donc d'éléments HTML voire de styles non maitrisables par l'intégrateur HTML/CSS) ;
- des besoins d'évolutivité de la mise en page (pour les modifications mineures, on diminue ainsi les risques d'avoir à reprendre le HTML).

Lekouti a écrit :
Bonsoir à tous,

J'ai souvent remarqué quand je regarde la source de certain site que la mise en page est particuliere...souvent :

<div>
     <div>
                <ul>
               </ul>
     </div>
</div>

Bref simple exemple mais j'aimerai savoir si cela a une importance et si oui laquelle ?
Y'a t'il une regle à suivre, un site qui explique ?

Merci

Bonjour,

si comme il me semble tu parles du fait qu'une indentation est utilisée au fur et à mesure de l'imbrication des balises alors ce n'est pas particulièrement important en terme d'impact sur le résultat mais évidemmpent très utile pour la lisibilité du code.

Florent V. a écrit :

on est parfois obligé de rajouter des éléments sémantiquement inutiles, notamment les divs.

Il y aurait plus à en dire je pense.

Déjà de voir comment produire les <div>, même en en restant à leur définition la plus pauvre de balises neutres, dans le document html de manière parfaite cohérente avec la structuration initiale de ce document, notamment dans l'emploi des entêtes de sections.

Par exemple, même en considérant la chose comme "sémantiquement" "inutile", il est quand même plus cohérent pour ;

<h2>
En tête niveau 2
</h2>
<p>
blablabla
</p>
<p>
blablabla
</p>
<p>
blablabla
</p>

de mettre en place les div suivants

<div class="conteneur_section_niveau_2">
<h2>
En tête niveau 2
</h2>
<div class="contenu_section_niveau_2">
<p>
blablabla
</p>
<p>
blablabla
</p>
<p>
blablabla
</p>
</div><!-- fin .contenu_section_niveau_2 -->
</div><!-- fin .conteneur_section_niveau_2 -->

Plutôt que

<div class="conteneur_section_niveau_2">
<div class="sub_conteneur_section_niveau_2">
<h2>
En tête niveau 2
</h2>
<p>
blablabla
</p>
<p>
blablabla
</p>
<p>
blablabla
</p>
</div><!-- fin .sub_conteneur_section_niveau_2 -->
</div><!-- fin .conteneur_section_niveau_2 -->

Pour ma part j'ai tendance à penser qu'il y a un travail de fond à faire là dessus.
Modifié par Christian Le Bouler (25 May 2007 - 21:28)

Florent V. a écrit :

Dans la pratique, vu les limitations des CSS (par exemple : une seule image de fond par bloc...) et celles des navigateurs, on est parfois obligé de rajouter des éléments sémantiquement inutiles, notamment les divs.

Oui c'est d'ailleurs pour ça que je précisais selon la cas car certains débutants
ont tendance à placer systématiquement les listes dans des div un peu par automatisme mais sans véritable raison.
Pour les dégradés vivement qu'on ait cette possibilité, je crois qu'il n'y a que Safari qui gère le double backgronud pour le moment.

Bisounours
Modifié par Hermann (25 May 2007 - 21:26)