Structure de votre code
Les erreurs de cette section sont fondamentalement reliées avec la façon dont vous codez votre projet. Il est question ici de la manipulation des différentes balises que nous avons étudiées dans le cours. Il est question aussi de la structure de votre contenu en lien avec le schéma. Trop souvent, celui-ci n'est pas respecté et cela occasionne d'importants problèmes de positionnement de vos éléments à l'écran. D'où l'importance de bien lire et de bien observer ce schéma pour vous éviter des problèmes de positionnement de votre projet.
La fermeture des balises
[ Toujours fermer adéquatement vos balises ]
Peu importe la balise, il est essentiel que celle-ci puisse se fermer adéquatement dans le code. Dans l'exemple ici, la balise <header> n'est pas fermée. Nous pourrions aussi dire que la balise <section> n'est pas ouverte. Bref, la conséquence ici c'est que le fureteur va avoir du mal à bien interpréter l'affichage du contenu présent dans ce regroupement. Il faut éviter à tout prix ce genre d'erreurs.
ASTUCES
Assurez-vous de bien installer EMMET dans Brackets avant de débuter le codage de votre projet. Cette extension va vous permettre d'ouvrir et surtout de fermer vos balises AUTOMATIQUEMENT. Plusieurs ne semblent pas l'utiliser, car nous voyons encore des balises ouvrantes, mais qui ne sont pas fermées adéquatement.
La relation entre le code et le schéma
[ Respectez en tout temps le schéma de la structure ]
En se référant à l'image du schéma (de l'examen), il n'est nullement question de la balise <div> dans les regroupements. Il s'agit d'une mauvaise interprétation de l'étudiant qui pourrait occasionner d'importants problèmes sur le plan de la mise en page des éléments.
La balise <div> est une balise de type block, donc elle provoque un saut de ligne avant et après l'élément. Sur le plan de la mise en page du bouton, on se retrouve avec un décalage avant ainsi qu'après le <div>. Afin d'éviter ce genre de décalage non souhaité, il est essentiel de bien lire le schéma et de le respecter à la lettre.
[ Bien lire le schéma de la structure ]
Voici un autre cas de mauvaise interprétation du schéma que nous vous avons fourni lors de l'examen. Il est question du <footer> et l'étudiant a remplacé le div.copyright avec la balise <h1>. Nous avons bien du mal à expliquer les raisons qui ont poussé l'étudiant à prendre une telle décision, mais il est clair que la mise en forme n'est pas celle espérée avec cette balise. Même sur le plan de la sémantique, il est pratiquement impossible de voir le titre principal dans la balise <footer> (qui est complètement situé à la fin de votre page...).
La structure de base d'un site web
[ Respectez la structure de base d'un site ]
Pour qu'une page web puisse s'afficher adéquatement, il est essentiel que les parties fondamentales d'une structure HTML y soient : le doctype, la balise <html>, la balise <head> ainsi que le <body>. Dans l'exemple suivant, il manque clairement une balise importante pour l'affichage du contenu à l'écran : le <body>. Bien que les fureteurs compensent ce manque, il ne faut pas compter sur l'interprétation des fureteurs. Le meilleur moyen d'y arriver c'est d'avoir une certaine rigueur dans le code que vous écrivez.
ASTUCES
Grâce à EMMET (peut importe le logiciel VSC ou Brackets), il est possible de faire afficher la structure de base nécessaire au développement d'une page web. Une fois que EMMET est installé, il suffit de taper le symbole suivant ! et d'appuyer sur la touche TAB. Vous allez voir l'apparition de la structure comme nous l'avons défini plus tôt.
Les balises de structure du contenu principal
[ Toujours donner un sens à l'organisation de votre contenu ]
Le problème dans cet exemple c'est que le contenu n'est pas englobé dans une balise de structure, en occurrence la balise <article>. Il s'agit d'un problème sur le plan de la symbolique du contenu. En définissant la balise <article> et en intégrant les autres balises à l'intérieur, on comprend qu'elles traitent du même sujet.
ASTUCES
La balise <main> et la balise <article> vont ensemble. Elles sont pratiquement inséparables. Rappelez-vous que si vous insérer un <main>, c'est que vous avez aussi besoin d'un <article>.
De plus, afin de vous aider à y voir plus clair dans la représentation des balises de contenu, nous allons prendre l'exemple d'un livre :
- <main> = La couverture d'un livre
- <article> = Les pages d'un livre
- <section> = Les chapitres d'un livre
- <div> = Les séparations purement graphique du contenu (aucun lien avec la symbolique ou le sens du contenu)
