Lorsque vous créez un site web, la bonne pratique consiste à séparer le contenu (HTML), le design (CSS) et les interactions (JavaScript) dans des fichiers distincts. Cela rend votre code plus lisible et plus facile à maintenir.Cependant, pour que votre page web puisse utiliser vos styles et vos scripts, vous devez explicitement lui indiquer où trouver ces fichiers externes.
Lier une feuille de style CSS
Pour appliquer un design à votre page HTML, vous devez charger un fichier externe contenant vos règles CSS (généralement nommé style.css).
Utiliser la balise link
L’inclusion d’un fichier CSS se fait grâce à la balise <link>. Cette balise est orpheline, ce qui signifie qu’elle ne possède pas de balise de fermeture.
Elle utilise deux attributs obligatoires :
rel="stylesheet": indique au navigateur qu’il s’agit d’une feuille de style.href: contient le chemin vers votre fichier CSS.
Où placer le CSS ?
La balise <link> doit toujours être placée à l’intérieur de la balise <head> de votre document HTML. Cela garantit que le navigateur charge les styles avant d’afficher le contenu, évitant ainsi un effet visuel désagréable où la page apparaîtrait sans mise en forme pendant une fraction de seconde.
Voici à quoi ressemble le code complet :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
<!-- Chargement du fichier CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bonjour le monde</h1>
</body>
</html>
Ajouter un script JavaScript
Pour rendre votre page interactive, vous devez y attacher un fichier JavaScript (par exemple script.js). La méthode est légèrement différente de celle du CSS.
La balise script
Pour charger du JavaScript, on utilise la balise <script>. Contrairement à la balise <link>, il s’agit d’une balise paire : elle nécessite obligatoirement une balise de fermeture </script>, même si elle est vide.
L’attribut qui indique l’emplacement du fichier n’est pas href, mais src (pour source).
Où placer le script ?
Le chargement d’un script bloque l’affichage de la page HTML tant qu’il n’est pas terminé. Pour éviter cela, il existe deux méthodes.
Méthode 1 : Avant la fermeture du body (Méthode classique)
Historiquement, on plaçait les scripts tout en bas de la page, juste avant la balise </body>. Ainsi, le HTML était lu et affiché en premier.
<body>
<h1>Bonjour le monde</h1>
<!-- Chargement du script en fin de page -->
<script src="script.js"></script>
</body>Méthode 2 : Dans le head avec defer (Standard moderne)
Aujourd’hui, la meilleure pratique consiste à placer la balise <script> dans le <head> (avec le CSS) en lui ajoutant l’attribut defer. Cet attribut indique au navigateur de télécharger le script en arrière-plan et de ne l’exécuter qu’une fois la page entièrement chargée.
<head>
<meta charset="UTF-8">
<title>Ma page web</title>
<link rel="stylesheet" href="style.css">
<!-- Chargement du script optimisé -->
<script src="script.js" defer></script>
</head>
Erreurs courantes : pourquoi ça ne marche pas ?
Si votre style ne s’applique pas ou si votre script ne se lance pas, l’erreur provient presque toujours du chemin indiqué ou d’une faute de frappe.
Attention à href et src
Une confusion très fréquente consiste à inverser les attributs :
- Le CSS utilise
href(Hypertext REFerence). - Le JavaScript utilise
src(SouRCe).
Comprendre les chemins relatifs
Si votre fichier HTML et votre fichier CSS sont dans le même dossier, href="style.css" suffit. En revanche, s’ils sont organisés dans des sous-dossiers, vous devez adapter le chemin :
- Si le CSS est dans un dossier enfant nommé « css » :
href="css/style.css" - Si le JavaScript est dans un dossier enfant nommé « js » :
src="js/script.js"
Vérifier avec la console du navigateur
Pour confirmer que vos fichiers sont bien chargés, faites un clic droit sur votre page web et sélectionnez « Inspecter ». Allez dans l’onglet Console. Si le navigateur ne trouve pas votre fichier CSS ou JS, il affichera une erreur rouge 404 Not Found indiquant que le chemin est incorrect.