HTML, CSS et JavaScript, quelle différence ?

Rédigé par Hugo Beisser, 22 ans, étudiant à EPITA.



Les langages web sont en constante évolution et se multiplient à vitesse croissante, projetant le web au rang des technologies majeures du 21ème siècle. Face à une telle diversité, on peut facilement s'emmêler les pinceaux, et il n'est pas toujours évident de comprendre le rôle et l'utilité de ces langages !

C'est ainsi que nous allons aborder le HTML, CSS et JavaScript, qui a eux trois, forment le socle du web. Mais quelles sont donc leurs différences ?


HTML & CSS : qui se ressemble s'assemble ? Pas toujours...


L'écrasante majorité des sites internet sont faits avec du HTML et du CSS. Certains services permettent de créer simplement des sites web à l'aide d'une interface graphique tout en ayant le rendu observable directement en live. Il faut savoir que ces logiciels génèrent en fait simplement du code HTML.

La première chose à comprendre est que HTML (Hypertext Markup Language) et CSS (Cascading Style Sheets) ne sont pas concurrents, mais forment un couple complémentaire.



HTML



HTML est un langage de balise qui sert à structurer sémantiquement une page web. Il permet d'ajouter du contenu tels que des menus, des blocs de texte, des images... Il représente donc un format de donnée qui contient tous les éléments d'une page web.

Chaque élément du site web est représenté par une balise ouvrante <xxx> et une balise... fermante </xxx>, où "xxx" est à remplacer par un mot-clé du langage qui indique la fonction de l'élément. Certaines balises correspondent à un élément visible directement comme du texte (paragraphe, titre...) tandis que d'autres sont des conteneurs. Par exemple, pour intégrer un titre suivi d'un paragraphe au sein d'une page web, il suffit de suivre la syntaxe suivante :


<div>  
    <h1>Blog d'un développeur fou</h1>
    <p>Pour le moment mon site web est encore en construction...</p>
</div>


Ici on remarquera la présence des balises "div", "h1", et "p" qui correspondent respectivement aux fonctions de conteneur, titre, et de paragraphe. Ce code affichera une simple page blanche contenant le titre, suivi d'un retour à la ligne et du texte contenu dans le paragraphe.

Le fait de bien structurer son code en utilisant les balises appropriées est plus important qu'il n'y paraît puisque cela augmente la visibilité de son site internet. En effet, les moteurs de recherche utilisent des algorithmes appelés "robots" pour parcourir les pages web, extraire leur informations, et les classifier.

Pour reprendre l'exemple précédent, un robot accordera plus d'importante à un titre qu'à un paragraphe, ici les mots "blog", "développeur", et "fou" seront donc à priori mis en avant par rapport à ceux du paragraphe.



html



CSS permet de définir la manière dont s'affichent les éléments d'une page à l'écran, c'est-à-dire qu'il sert à décrire leur positionnement (de part et d'autre de l'écran, ou au centre par exemple), l'image de fond, les polices de caractère, les couleurs, etc. Il permet également d'ajouter des marges, des effets ombres ou encore des bordures à ces éléments.

Reprenons encore une fois notre exemple HTML du dessus. Le but du jeu va être de définir des règles pour chacun des éléments de notre page, ainsi notre code CSS pourrait ressembler à cela :


div {  
    text-align: center;
} 

h1 {  
    font-size: 18px;
}


La règle "text-align" permet de modifier l'alignement du texte, tandis que "font-size" correspond à la taille de la police de caractères. Si l'on reprend donc dans l'ordre, ce code CSS centre tout le texte contenu dans les balises "div" présentent dans la page, c'est a dire le titre "h1" ainsi que le paragraphe "p", puis spécifie une taille plus grande pour le texte contenu dans toutes les balises de titre "h1".

Si l'envie nous prenait de rajouter un second titre et un second paragraphe juste après la balise fermante </div>, le CSS s'appliquant à tout le code HTML, nous aurions alors un second titre de taille plus grande suivi du nouveau paragraphe, mais tous deux non centrés, car la règle d'alignement ne serait pas appliquée en dehors du conteneur "div".

Pour résumer : le HTML est le contenu du site, tandis que le CSS correspond à son design. Ils ne sont donc pas des langages de programmation, mais plutôt de description des pages web. Le navigateur (Firefox, Chrome...) lit ces deux codes et peut ensuite faire son rendu à l'écran.



HTML



On pourra noter que ces deux langages sont parfois interprétés différemment selon le navigateur. L'apparence d'un même site internet pouvant donc varier légèrement, il est judicieux de tester si celui ci s'affiche correctement avec les différents navigateurs les plus populaires.


L'ajout du dynamisme : JavaScript, on ne t'a pas oublié !


Note : Halte à la confusion, il ne faut pas confondre JavaScript et Java ! Ces deux langages, bien que syntaxiquement assez proches à la base, ne fonctionnent pas du tout de la même façon et servent à effectuer des tâches totalement différentes. Ici, nous parlerons bien de JavaScript.

Créé en 1995, et au départ simple langage de script, JavaScript est aujourd'hui utilisé au sein d'environnements web très à la mode (Angular 2, ReactJS...), et s'impose désormais en tant que poids lourd du web.

Il permet grossièrement d'appliquer des fonctions aux codes HTML & CSS, apportant ainsi aux pages web un contenu dynamique et interactif, notamment par le biais d'effets d'animations et de transitions, ou l'ouverture de fenêtres pop-up.

Un exemple représentatif est celui d'une image qui va s'agrandir avec un effet de "glisser" vers le milieu de la fenêtre lorsque l'utilisateur clique dessus.



HTML



Il se distingue de HTML & CSS puisqu'il est un langage de programmation à part entière, c'est à dire qu'il permet d'écrire des instructions qui seront exécutées par l’ordinateur.

Pour résumer : JavaScript a comme vocation de dynamiser le contenu d'une page web statique (HTML & CSS) en apportant la possibilité à l'utilisateur d’interagir avec le site internet.

Aujourd'hui, il existe de nombreuses technologies web, certaines permettant même de publier un site complet sans avoir à écrire directement du code, mais il reste très intéressant d'en comprendre le véritable fonctionnement en arrière-plan. Dans cette optique, les langages HTML, CSS, et JavaScript constituent un excellent point de départ pour débuter.

Cet article vous a donné envie de vous familiariser et d'apprendre à utiliser ces langages ? Allez voir notre sélection des 5 meilleures plateformes pour apprendre à coder gratuitement !



Rédigé par Hugo Beisser
mosieur.hugo@gmail.com
Follow me on LinkedIn