Imbrication du code
En ce qui concerne l'imbrication du code, plusieurs d'entre vous ne maîtrisent pas encore tout à fait cette notion. Il est important de bien comprendre que coder en HTML, c'est l'équivalent de jouer avec des bacs de différentes tailles et de les emboîter un peu comme on le fait avec les poupées russes. Avez-vous éprouvé des problèmes de positionnement dans vos productions? Si vous répondez oui à cette question, c'est que l'imbrication de vos éléments n'était pas adéquate. Si les bonnes balises sont aux bons endroits, alors il y aura un "match" avec la feuille de style et tout se positionnera comme par magie...
Le contenu à l'intérieur d'une balise
[ Imbrication adéquate du contenu dans la balise ]
J'attire votre attention sur le mot camping qui est à l'extérieur du <div>. Procéder de la sorte n'aide aucunement l'imbrication de vos éléments. Présentement, le fureteur comprend que le <div> est vide. Admettons qu'il y a du CSS qui est spécifiquement affecté à la classe .btn, il est impossible d'atteindre le libellé camping de la sorte. C'est important de l'intégrer à l'intérieur des balises ouvrantes et fermantes du <div>.
L'imbrication de la structure générale
[ Inclusion des éléments dans le div.interface ]
Bien que le <footer> peut se retrouver volontairement à l'extérieur du div.interface, dans le cas qui nous concerne ici ce n'est pas le cas. Selon le schéma de la structure, le <footer> était inclus à l'intérieur du conteneur englobant tout le site (le fameux div.interface). Dans la majorité de vos productions que vous allez faire, il est rare de sortir des éléments à l'extérieur du conteneur principal.
ASTUCES
Le div.interface est un conteneur qui va vous permettre d'avoir un meilleur contrôle sur la construction de la structure et cette pratique va vous permettre de mieux gérer les marges (margin) et l'espacement interne (padding) plus tard.
[ Ne pas oublier d'inclure le <body> ]
Bien que les éléments s'affichent dans le fureteur, l'exemple suivant n'est pas recommandé tout simplement qu'il ne s'agit pas d'une bonne pratique de codage. La balise <body> définit le corps du document. Son rôle est primordial afin de bien assister le fureteur dans l'affichage des éléments qu'on souhaite voir sur notre page. De plus, le conteneur général n'est pas dans la structure.
Il est important de bien respecter la structure que nous vous donnons sur papier (le schéma des balises). Ce schéma vous indique ce dont vous avez besoin afin de vous assurer d'un affichage optimal sur le plan des balises. Si vous ne respectez pas l'intégralité de la structure imposée dans le schéma, il est normal que vous éprouviez des problèmes de positionnement et de mise en forme de vos éléments.
