Pourquoi on ne dois pas utiliser le HTML pour remplir le rôle du CSS ?

Non classé, Web DevelopmentNo Comments

You Are Here:, Web DevelopmentPourquoi on ne dois pas utiliser le HTML pour remplir le rôle du CSS ?

Pratiquement chaque personne qui code en HTML & CSS a déjà entendu dire qu’il ne faut surtout pas utiliser le HTML pour remplir le rôle du CSS. Et ceux peu importe ton niveau (débutant, intermédiaire etc…), tu tu dois la respecter, sinon sa aura des conséquences négatif sur ton site. Si tu n’a vraiment jamais entendu cette phrase, et bien désormais tu la connais ! Mais est-ce qu’on ta dit pourquoi le faire et surtout quelles sont les effets si on ne le fait pas. Pourquoi n’a-t-on pas le droit de faire comme on veux, si une balise est là c’est pour être utilisé non ?! Et c’est ce que beaucoup de débutant font comme erreur, mais ne t’inquiète pas puisque cet article a été écrit pour que tu ne fasse jamais cette erreur. Et que tu comprennes le pourquoi du comment, et ne pas juste connaître la règle sans savoir le reste ! En réalité, je vais plutôt te parler des balises et propriétés à ne pas utiliser et quoi utiliser à la place. Je tiens également à préciser qu’il est possible que cet article devienne un jour ou l’autre obsolète, tout dépens de l’évolution du HTML & CSS, ainsi que des navigateurs.

 

Si tu est dans le cas ou tu n’a pas entendu parlé de cette règle fondamentale du HTML & CSS, je t’assure qu’après avoir lut cet article tu la sauras par cœur et tu sauras tout ce qu’il y a savoir à son sujet ! Cependant, il est préférable voir même obligatoire que tu connaisses un minimum le HTML & CSS pour ne pas être perdu. j’ai d’ailleurs réalisé un article sur ce sujet, lit le avant de lire celui la si tu ne connais pas du tout ces langages : Comment débuter en programmation ?. (auto-pub :D) Trève de blablaterie, passe à la théorie !

 

Qu’est ce qui est déconseillé de faire en HTML ?

Quand je dis déconseillé, je devrais dire “ce que tu ne dois pas faire” et cela dans ton propre intérêt. En effet il existe certaine propriété et balise HTML qui ne sont vraiment pas à utiliser car il sont dépréciées voir même obsolètes, que voici :

  • Balises : font, basefont, center, s, u, etc…
  • Propriétés : align, width, height, size, color, border, background, bgcolor, border, face, target, etc…

Tu auras surement remarqué, que la plupart de ces propriétés HTML sont présentent en CSS, et c’est justement pour cela qu’il est pas judicieux de les utiliser, mais on reviendra sur les conséquences un peu plus-tard. Cependant, je dois tout de même te dire de ne pas les utiliser pour ne pas risqué de voir ton site changer du jour au lendemain. En effet, ses propriétés ont pratiquement tous été remplacé par du CSS considérées comme “plus propre“. Et ne sont plus prisent en charge dans les normes actuelle du HTML, donc plus mise à jour. Malgré le faite qu’ils sont encore fonctionnelle aujourd’hui rien n’assure qu’elles le seront dans quelques années. Tout dépens de l’évolution des navigateurs actuelle.

 

Et pour les balises : <strong>, <em>, <i>, <b> ?

Même s’ils ne sont pas vraiment déconseillé, un débat du moins des questions se posent souvent sur s’il est préférable d’utiliser <strong> ou <b> / <em> ou <i>. Et je te le dis de suite, aucune ne remplace un autre. Ce sont des balises typiques que les débutants vont utiliser pour le rendu visuel. Cependant, si tu ne connais pas leur utilité les voici :

  • <i> : Indique une portion de texte “décalée” du contenu principal (par défaut en italique)
  • <b> : Indique un texte mis en valeur différemment (par défaut en gras)
  • <em> : Indique une portion de texte affectée par une emphase.
  • <strong> : Indique une mise en exergue plus forte (renforcement)

Tu auras donc compris qu’elles ont pratiquement la même utilité, il faut donc bien faire attention à ne pas les confondre. Même si dans la plupart des cas quand un texte est en gras, cela signifie qu’il est important mais c’est justement là qu’il ne faut pas faire l’erreur de confondre l’apport sémantique de la balise <strong> avec son rendu purement visuelle que l’on peut voir avec <b>. A noter que ce choix conventionnel des navigateurs ne repose sur aucune règle établie : dans le futur, ils pourraient très bien décider d’afficher <strong> en taille de caractère agrandie ou <em> avec un retrait à gauche et en couleur, etc… Pour en revenir aux balises <i> et <b>, elle n’apport rien de sémantique à la page, juste un rendu visuelle et tu pourrais donc croire que ce n’est pas très grave si tu les utilises. Mais détrompe toi car c’est exactement pareille qu’avec les autres (dans la 1ère partie), elles peuvent disparaître. En conclusion, je dirais que tu ne dois pas ou le moins possible utiliser ses balises !

 

Quelles sont les conséquences ?

Comment j’ai pus le dire précédemment, la principale raison qui devrait te forcer de ne pas utiliser les propriétés ou balises citées plus haut, est qu’ils peuvent disparaître ou changer d’utilité du jour au lendemain. Et ainsi, rendre ta page obsolète avec tout un tas de bug, et voilà la principale conséquence. La seconde est que si tu utilise ce genre de balises / propriétés, cela va rendre ton code beaucoup moins lisible par les navigateurs et va considérablement baisser ton référencement SEO, ainsi que d’augmenter le temps de chargement de tes pages, crée des incompatibilités etc… Et ceux pour la simple et unique raison c’est que le HTML & CSS est considérée comme un standard du web, et le but des standards est de faire une séparation stricte entre le contenu et la mise en forme du site web. Grosso modo, il faut que tout ce qui est visuelle (CSS) sois séparé du contenue (HTML). Et enfin, le problème bien moindre est que si tu réalise un site pour quelqu’un en freelance par exemple, si le client s’y connais un minimum il va très vite remarquer que le code n’est pas parfait, ce qui risque de te poser quelque problème. Même si c’est moins pratique d’utiliser le CSS plutôt que les balises simples du HTML, il faut vraiment ne pas utiliser le HTML pour remplir le rôle du CSS, sauf dans les cas les plus extrêmes !

 

Comment y remédier ?

C’est bien, je t’es parlé de ce qui n’est pas forcément recommandé de faire en HTML, mais je ne t’ai pas dit quoi faire à la place. Même si c’est relativement simple. En ce qui concerne les balises et propriété (HTML de la 1ère partie), il te faudra tout simplement remplacer ceux-ci par du CSS, en utilisant des “class” ou “id“. Comme dans les exemple ci-dessous, avec tout d’abord ce qu’il ne faut pas faire, puis ce qu’il faut faire.

 

Et pour ce qui est de <strong>, <em>, <i> et <b> tu va faire comme pour les autres, c’est à dire mettre un “id” ou “class“, pour modifié en CSS le style du contenu. Et enfin, pour la balise <span>, qui n’est pas la plus apprécié je te conseille de la remplacer par la balise <div> !

 

Je suis sur que maintenant tu sais pourquoi il est fondamentale de respecter cette règle du HTML & CSS. Et que tu pourras t’en souvenir pour ne jamais faire cette erreur, et que tu pourras te venter de la connaître 😀 Mais n’oublie pas :

“Si vous n’échouez pas de temps à autres, c’est signe que vous ne faites rien d’innovant.” –Woody Allen

Oui, j’ai décidé de terminer mes articles avec une citation innovante. Dans tout les cas j’arrête cet article ici ! Mais je voudrais savoir si cet article ta été utile ou du moins ta plus, n’hésite pas à me donner ton avis en commentaire ou sur mes réseaux sociaux ! Aller bonne apprentissage jeune outsider !

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top