Structure d'un site

L’organisation classique des fichiers d’un site HTML/CSS/JS simple suit généralement cette structure :

Structure du site

DéfinitionLe fichier HTML principal

Le fichier HTML constitue le cœur d’un site.

Il contient la structure et le contenu que les visiteurs voient : titres, paragraphes, images, liens, menus…

Ce fichier joue également le rôle de chef d’orchestre :

  • il appelle les fichiers CSS pour appliquer le style,

  • il peut appeler des fichiers JavaScript pour rendre le site interactif,

  • il organise la navigation vers les autres pages.

Le nom index.html est important, car la plupart des serveurs web l’affichent automatiquement comme page d’accueil.

Si l’URL ne précise pas de chemin, c’est ce fichier qui est ouvert par défaut.

DéfinitionLe dossier css/

Le dossier css/

contient l’ensemble des feuilles de style du site (Cascading Style Sheets).

Le CSS définit la présentation visuelle du contenu HTML : couleurs, polices, tailles, marges, disposition des éléments, et adaptation de l’affichage aux différents écrans.

Placer les fichiers CSS dans un dossier dédié permet de regrouper toutes les règles de mise en forme au même endroit, facilitant ainsi la maintenance et l’évolution du site.

Lorsque le projet s’agrandit, plusieurs fichiers CSS peuvent être créés pour séparer les styles généraux, ceux d’une section spécifique ou ceux destinés aux mobiles.

DéfinitionLe dossier images/

Le dossier images/

regroupe toutes les ressources visuelles utilisées dans le site, telles que les logos, photos, icônes et images d’arrière-plan.

Le fait de les centraliser dans un dossier unique rend leur gestion plus simple et leur remplacement plus rapide.

Une bonne organisation interne (par exemple un sous-dossier pour les produits ou les bannières) permet également de retrouver facilement une image précise.

Il est recommandé d’utiliser des noms de fichiers explicites et de compresser les images pour optimiser le temps de chargement.

DéfinitionLe dossier js/ (optionnel)

Le dossier js/

contient les fichiers JavaScript, responsables des interactions et fonctionnalités dynamiques du site.

Ces scripts peuvent servir à animer des menus, vérifier la saisie dans un formulaire ou mettre à jour certaines parties de la page sans rechargement complet.

Regrouper le JavaScript dans un dossier distinct permet de séparer clairement la logique (JS) de la présentation (CSS) et du contenu (HTML).

Dans un site plus complexe, ce dossier peut contenir plusieurs fichiers, chacun dédié à une fonctionnalité spécifique.

DéfinitionAutres dossiers possibles

Selon les besoins, d’autres dossiers peuvent compléter la structure du site.

Par exemple, pages/ peut accueillir les pages HTML supplémentaires, videos/ contenir des fichiers vidéo intégrés au site ou fonts/ dans le dossier css/ stocker les polices personnalisées.

L’essentiel est de conserver une organisation claire, logique et facilement compréhensible, de manière à simplifier la maintenance et la collaboration entre plusieurs personnes.