Créer ta première page : structure & bonnes pratiques

Pourquoi organiser son projet

Quand on crée son premier site web, il est facile de tout mettre dans le même dossier. Mais à mesure que le projet grandit, c'est vite chaotique : fichiers perdus, code dupliqué, difficile à maintenir et à collaborer en équipe.

Une bonne organisation apporte :

Clarté : on sait où trouver chaque fichier
Maintenabilité : facile de modifier sans casser autre chose
Scalabilité : le projet grandit sans devenir un chaos
Collaboration : les autres développeurs comprennent la structure
Performance : organisation = optimisation plus facile
Productivité : gagner du temps au lieu de chercher des fichiers

À retenir : Une bonne structure au départ économise des heures de refactoring plus tard. C'est une fondation.

Structure de dossiers complète

Voici la structure recommandée pour un projet web professionnel :

mon-site-web/
├── index.html                 # Page d'accueil
├── about.html                 # À propos
├── contact.html               # Contact
├── 404.html                   # Page erreur 404
├── sitemap.xml                # Sitemap pour SEO
├── robots.txt                 # Instructions pour moteurs recherche
│
├── assets/                    # TOUS les assets (CSS, JS, images)
│   ├── css/
│   │   ├── main.css          # CSS global et reset
│   │   ├── layout.css        # Flexbox, Grid, responsive
│   │   ├── components.css    # Boutons, cards, modales
│   │   └── typography.css    # Polices, tailles, espacements
│   │
│   ├── js/
│   │   ├── main.js           # JavaScript global
│   │   ├── components.js     # Scripts réutilisables
│   │   └── utils.js          # Fonctions utilitaires
│   │
│   ├── images/
│   │   ├── logo.svg          # Logo de la marque
│   │   ├── icons/            # Icônes SVG
│   │   ├── hero/             # Images hero pages
│   │   ├── articles/         # Images articles
│   │   └── screenshots/      # Captures d'écran
│   │
│   └── fonts/
│       ├── main.woff2        # Polices custom
│       └── icons.woff2       # Polices icônes
│
├── components/               # Composants HTML réutilisables
│   ├── header.html
│   ├── nav.html
│   ├── footer.html
│   ├── sidebar.html
│   ├── card.html
│   └── button.html
│
├── includes/                 # Variables et configurations globales
│   └── config.html
│
├── docs/                     # Documentation du projet
│   ├── README.md
│   ├── CONTRIBUTING.md
│   └── ARCHITECTURE.md
│
└── .gitignore               # Fichiers à ignorer avec Git

Règles essentielles :

✅ Tous les assets (CSS, JS, images) dans le dossier assets/
✅ HTML pages à la racine pour des URLs simples
✅ Composants réutilisables dans components/
✅ Une structure de dossiers, pas de fichiers éparpillés
✅ Noms de dossiers en minuscules, tirets ou underscores

Organisation des fichiers HTML

Chaque page HTML doit suivre la même structure sémantique pour la cohérence :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Description pour SEO">
  <meta name="keywords" content="tag1, tag2, tag3">
  <meta name="author" content="Votre nom">

  <title>Titre de la page | Mon Site</title>

  <!-- Icône du site -->
  <link rel="icon" type="image/svg+xml" href="assets/images/logo.svg">

  <!-- CSS Reset et global -->
  <link rel="stylesheet" href="assets/css/main.css">
  <link rel="stylesheet" href="assets/css/layout.css">
  <link rel="stylesheet" href="assets/css/components.css">
  <link rel="stylesheet" href="assets/css/typography.css">

  <!-- Polices Google (optionnel) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
</head>

<body>
  <!-- En-tête principal -->
  <header class="site-header" role="banner">
    <!-- Voir section "Widgets et composants" -->
  </header>

  <!-- Navigation principale -->
  <nav class="main-nav" aria-label="Navigation principale">
    <!-- Voir section "Widgets et composants" -->
  </nav>

  <!-- Contenu principal -->
  <main id="main-content" role="main">
    <div class="container">
      <div class="row">
        <!-- Colonne principale (col-md-8 ou col-md-9) -->
        <section class="col-md-9">
          <!-- Contenu de la page -->
        </section>

        <!-- Sidebar (col-md-3 ou col-md-4) -->
        <aside class="col-md-3" aria-label="Barre latérale">
          <!-- Widgets latéraux -->
        </aside>
      </div>
    </div>
  </main>

  <!-- Pied de page -->
  <footer class="site-footer" role="contentinfo">
    <!-- Voir section "Widgets et composants" -->
  </footer>

  <!-- Scripts JavaScript -->
  <script src="assets/js/main.js"></script>
  <script src="assets/js/components.js"></script>
</body>
</html>

Points clés :

✅ lang="fr" pour l'accessibilité
✅ Meta tags pour SEO et responsive
✅ CSS en <head>, JS avant </body>
✅ Attributs role et aria-label pour l'accessibilité
✅ Structure sémantique : <header>, <nav>, <main>, <footer>

Widgets et composants réutilisables

1. Header (en-tête)

<header class="site-header">
  <div class="container">
    <div class="header-content">
      <!-- Logo -->
      <a href="/" class="logo" aria-label="Accueil">
        <img src="assets/images/logo.svg" alt="Logo Mon Site" width="150" height="50">
      </a>

      <!-- Tagline -->
      <p class="tagline">Bienvenue sur mon site web</p>

      <!-- Bouton menu mobile -->
      <button class="menu-toggle" id="menuToggle" aria-label="Ouvrir le menu">
        ☰
      </button>
    </div>
  </div>
</header>

2. Navigation

<nav class="main-nav" id="mainNav">
  <div class="container">
    <ul class="nav-list">
      <li class="nav-item">
        <a href="index.html" class="nav-link active">Accueil</a>
      </li>
      <li class="nav-item">
        <a href="about.html" class="nav-link">À propos</a>
      </li>
      <li class="nav-item">
        <a href="contact.html" class="nav-link">Contact</a>
      </li>
      <li class="nav-item nav-item--has-dropdown">
        <a href="#" class="nav-link">Services ▼</a>
        <ul class="nav-dropdown">
          <li><a href="services/web.html">Web Design</a></li>
          <li><a href="services/dev.html">Développement</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

3. Sidebar (barre latérale)

<aside class="sidebar">
  <!-- Widget recherche -->
  <div class="widget widget-search">
    <h3>Rechercher</h3>
    <form method="get" action="search.html">
      <input type="search" placeholder="Tapez..." required>
      <button type="submit">Chercher</button>
    </form>
  </div>

  <!-- Widget catégories -->
  <div class="widget widget-categories">
    <h3>Catégories</h3>
    <ul>
      <li><a href="#">HTML/CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">PHP</a></li>
    </ul>
  </div>

  <!-- Widget articles récents -->
  <div class="widget widget-recent">
    <h3>Articles récents</h3>
    <ul>
      <li><a href="#">Comment débuter en web</a></li>
      <li><a href="#">Les meilleures pratiques</a></li>
    </ul>
  </div>
</aside>

4. Section principale

<section class="main-content">
  <!-- Hero banner -->
  <div class="hero">
    <img src="assets/images/hero/home.jpg" alt="Bannière accueil">
    <div class="hero-overlay">
      <h1>Bienvenue sur mon site</h1>
      <p>Découvrez mes créations web</p>
    </div>
  </div>

  <!-- Articles/contenu -->
  <article class="post">
    <h2>Titre de l'article</h2>
    <div class="post-meta">
      <span class="post-date">24 avril 2026</span>
      <span class="post-author">Par Mezgani</span>
      <span class="post-category"><a href="#">HTML/CSS</a></span>
    </div>
    <p>Contenu de l'article...</p>
    <a href="#" class="read-more">Lire la suite →</a>
  </article>
</section>

5. Footer (pied de page)

<footer class="site-footer">
  <div class="container">
    <div class="footer-content">
      <!-- Colonne 1 : À propos -->
      <div class="footer-col">
        <h4>À propos</h4>
        <p>Mon site web pour partager mes connaissances...</p>
      </div>

      <!-- Colonne 2 : Liens utiles -->
      <div class="footer-col">
        <h4>Liens utiles</h4>
        <ul>
          <li><a href="#">Accueil</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>

      <!-- Colonne 3 : Réseaux sociaux -->
      <div class="footer-col">
        <h4>Me suivre</h4>
        <ul class="social-links">
          <li><a href="#" aria-label="Twitter">🐦</a></li>
          <li><a href="#" aria-label="GitHub">🐙</a></li>
          <li><a href="#" aria-label="LinkedIn">💼</a></li>
        </ul>
      </div>
    </div>

    <!-- Copyright -->
    <div class="footer-bottom">
      <p><small>&copy; 2026 Mon Site. Tous droits réservés.</small></p>
    </div>
  </div>
</footer>

Exemple complet d'une page

Voici un exemple complet d'une page HTML avec tout les composants :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Ma première page web avec HTML et CSS">
  <title>Accueil | Mon Site Web</title>
  <link rel="icon" href="assets/images/logo.svg">
  <link rel="stylesheet" href="assets/css/main.css">
</head>

<body>
  <header class="site-header">
    <div class="container">
      <a href="/" class="logo">
        <img src="assets/images/logo.svg" alt="Logo">
      </a>
      <h1>Mon Site Web</h1>
    </div>
  </header>

  <nav class="main-nav">
    <div class="container">
      <ul class="nav-list">
        <li><a href="index.html">Accueil</a></li>
        <li><a href="about.html">À propos</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
  </nav>

  <main id="main-content">
    <div class="container">
      <div class="row">
        <section class="col-md-8">
          <article>
            <h2>Bienvenue sur ma première page</h2>
            <p>Ceci est mon premier projet web créé avec HTML et CSS.</p>
          </article>
        </section>

        <aside class="col-md-4">
          <div class="widget">
            <h3>Catégories</h3>
            <ul>
              <li><a href="#">Web Design</a></li>
              <li><a href="#">Développement</a></li>
            </ul>
          </div>
        </aside>
      </div>
    </div>
  </main>

  <footer class="site-footer">
    <div class="container">
      <p>&copy; 2026 Mon Site. Tous droits réservés.</p>
    </div>
  </footer>

  <script src="assets/js/main.js"></script>
</body>
</html>

Bonnes pratiques essentielles

1. Sémantique HTML

✅ Utiliser <header>, <nav>, <main>, <footer>, <article>, <section>
✅ Une seule <h1> par page (le titre principal)
✅ Respecter la hiérarchie des titres : h1 → h2 → h3 (pas de sauts)
❌ Éviter les <div> pour tout, utiliser les balises sémantiques

2. Accessibilité

✅ Ajouter alt sur toutes les images
✅ Utiliser aria-label et role pour clarifier
✅ Contraste suffisant entre texte et fond (WCAG AA minimum)
✅ Tailles de police lisibles (min 16px)
✅ Spacing adéquat entre les éléments cliquables

3. Performance

✅ Minifier CSS et JavaScript
✅ Optimiser les images (WebP, compression)
✅ Lazy loading pour les images non critiques
✅ Mettre le CSS dans <head>, JS avant </body>
✅ Utiliser un CDN pour les librairies (jQuery, Bootstrap)

4. SEO (Search Engine Optimization)

<!-- SEO : Meta tags importants -->
<head>
  <title>Titre principal | Nom du site</title>
  <meta name="description" content="Description courte 160 caractères max">
  <meta name="keywords" content="mot-clé1, mot-clé2, mot-clé3">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Open Graph pour réseaux sociaux -->
  <meta property="og:title" content="Titre">
  <meta property="og:description" content="Description">
  <meta property="og:image" content="image.jpg">
</head>

5. Responsive Design

/* CSS responsive de base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px; /* Base pour rem */
}

/* Mobile-first : styles de base pour mobile */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
  line-height: 1.6;
  color: #333;
}

/* Tablettes et plus (breakpoint 768px) */
@media (min-width: 768px) {
  /* Styles pour tablettes */
}

/* Ordinateurs (breakpoint 992px) */
@media (min-width: 992px) {
  /* Styles pour ordinateurs */
}

6. Nommage des classes CSS