Bonjour à tous,

J'ai un peu de mal à comprendre le pourquoi du comment de la balise <div>. EN effet, même si je comprends bien qu'elle nous permet de "présélectionner" certains éléments afin d'être manipulé dans le CSS, il y a quelques points sur lesquels j'ai du mal, par exemple le code ci-dessous :

 <div id="banniere_image">
                    <div id="banniere_description">
                        Vue sur le Tonle Sap
                        <a href="#" class="bouton_rouge">Voir l'article <img 
                            src="images/flecheblanchedroite.png" alt="" /> </a>
                    </div>
                </div>

Pourquoi fermer la balise <div id="banniere_description"> après <a href="#" class="bouton_rouge">Voir l'article <img src="images/flecheblanchedroite.png" alt="" /> </a> et non pas après Vue sur le Tonle Sap ?

Donc pourquoi et surtout qu'est ce que cela apporte ?

Pour finir on dit que deux balises peuvent avoir le même nom avec l'attribut class mais un nom ID doit être unique dans la page html, concrètement et en code :

<img src="images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie" /> 

<div id="banniere_image"> 

On pourrait trouver 2 fois class="ico_categorie dans la même page mais on ne pourrait pas coder 2 fois le nom "banniere_image" dans la même page ?

 Merci d'avance pour vos explications.

Cordialement,

Stéphane

-
Edité par Stéf-âne 18 janvier 2021 à 9:45:59

Salut,

Imagine la div comme des boites (semantiquement des DIVision), ces boites te permettent de gérer plus facilement sa position dans la page, sa dimension et la position des éléments à l'intérieur de cette boite, comme l'alignement.

Exemple, une div pour l'entete du site, une div pour le contenu, et une div pour le pied de page.

Par défaut, il ne peut pas avoir 2 boites sur la même ligne, les div sont de type block, ca veut dire que ca force le retour à la ligne.

A l'opposé, nous avons la "span", imaginons qu'on veut séparer un texte en 2 parties, chacun d'une couleur différente, si on les met chacun dans une div, ca va sauter une ligne entre les 2. C'est pas le but. Les boites qui permettent de faire cela sur la même ligne sont les span, elles sont de type "inline". Par contre, elles sont moins flexibles, par défaut on ne peut pas définir leur dimension, ceci dépend uniquement de leur contenu.

Néanmoins tous ces comportements par défaut sont modifiables en CSS.

Les débutants ayant du mal avec ce principe utilise beaucoup le saut de ligne <BR> pour espacer leur contenus, alors qu'en réalité c'est inutile, tout cela se fait avec plus de facilité avec les div et le CSS (margin, padding ect...).

Concernant les id, c'est un identifiant unique, il sert par exemple à cibler un élément pour des liens dans la même page, si 2 éléments ont la même id, comment savoir ou le lien va rediriger? Et de la même façon ca sert à cibler un élément HTML pour l'utiliser dans le JavaScript.

Maintenant supposons que j'ai plusieurs titres dans ma page, et je veux leur donner tous le même style en CSS, comment je les sélectionne? via les class, qui grosso modo veut dire "groupe". Je leur donne tous une class commune que je configure tranquillement dans le CSS.

D'ailleurs la bonne pratique est de ne jamais utiliser les id dans le CSS, mais uniquement les class.

« D'ailleurs la bonne pratique est de ne jamais utiliser les id dans le CSS, mais uniquement les class. »

Donc, selon toi, il ne faudrait jamais utiliser d'id dans le HTML autrement que pour être manipulé par le JS ?

Ton propos est excessif. L'utilisation d'id peut être parfaitement légitime dans les sélecteurs CSS. Seulement, ça doit être fait d'une manière judicieuse.

Merci pour vos réponses.

Je comprends bien la forme mais le fond reste obscur, étant débutant et au vue du nombre de post sur le sujet, je pense que c'est vraiment un problème de pratique donc qui concerne tous les débutants.

J'assimilerais le concept de la balise <div> avec le temps et la pratique !

Merci en tous les cas.

Domi65 a écrit:

« D'ailleurs la bonne pratique est de ne jamais utiliser les id dans le CSS, mais uniquement les class. »

Donc, selon toi, il ne faudrait jamais utiliser d'id dans le HTML autrement que pour être manipulé par le JS ?

Ton propos est excessif. L'utilisation d'id peut être parfaitement légitime dans les sélecteurs CSS. Seulement, ça doit être fait d'une manière judicieuse.

Pour les débutants c'est une grosse source de bug les id dans le CSS, à cause des priorités mal maitrisées, autant l'eviter au maximum. Apres pour quelqu'un de plus à l'aise, la question ne se pose pas à mon avis ;).