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

Q: Pourquoi utiliser des balises sémantiques HTML5 plutôt que des divs ?

Les balises sémantiques ( , , , , , , ) communiquent le sens du contenu aux moteurs de recherche et aux technologies d'assistance (lecteurs d'écran). Elles améliorent le SEO (Google comprend la structure), l'accessibilité (WCAG), et la maintenabilité du code. Un ne dit rien de son contenu — une dit "c'est une navigation".

Html Css Structure Projet-Web Bonnes-Pratiques Organisation Header Nav Aside Footer Seo Integration-Web Front-End Tutoriel-Html

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

Apprenez à organiser un projet web complet : structure de dossiers, widgets header/nav/aside/footer, bonnes pratiques HTML/CSS et fondamentaux SEO.

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

BEM : .block__element--modifier
Noms explicites : .btn-primary, .card-title
Minuscules et tirets : .main-navigation (pas de camelCase)
Éviter : .red-text, .big-font (trop spécifique au style)

7. Gestion des fichiers

Un fichier CSS par responsabilité (layout, composants, typography)
Ne pas imbrquer trop de dossiers (max 3 niveaux)
Utiliser .gitignore pour ignorer node_modules, build/
Versionner avec un système de contrôle (Git)

Résumé : Une bonne structure = code maintenable, performant et accessible. C'est la fondation d'un projet web professionnel.

Questions fréquentes

Une page HTML5 complète : pour déclarer le standard, pour la langue, avec , , , et la meta description. Le contient les éléments visibles : , , . Cette structure sémantique est essentielle pour le SEO et l'accessibilité.

Les balises sémantiques (, , , , , , ) communiquent le sens du contenu aux moteurs de recherche et aux technologies d'assistance (lecteurs d'écran). Elles améliorent le SEO (Google comprend la structure), l'accessibilité (WCAG), et la maintenabilité du code. Un ne dit rien de son contenu — une dit "c'est une navigation".

Utilisez toujours UTF-8 : . UTF-8 supporte tous les caractères de toutes les langues (accents français, caractères asiatiques, emojis) sans problème d'affichage. Placez cette balise en tout premier dans le , avant tout autre contenu, pour éviter les problèmes d'interprétation de caractères par le navigateur.

Ajoutez impérativement dans le — sans ça, les mobiles affichent la version desktop zoomée à 50%. Ensuite, utilisez des unités relatives (%, rem, em, vw/vh), Flexbox ou CSS Grid pour la mise en page, et des images responsives avec max-width: 100%. Le principe Mobile First consiste à écrire le CSS mobile d'abord, puis à ajouter des media queries pour les écrans plus larges.

Publié/Développé par Mezgani Said

Développeur web full‑stack et formateur spécialisé en Angular, TypeScript et Node.js, il partage sur AngularForAll des ressources complètes pour les développeurs : tutoriels pratiques, guides pas‑à‑pas, outils gratuits, exercices, QCM techniques et retours d’expérience issus de projets réels (SaaS, micro‑frontends, architectures modulaires, applications d’entreprise).
Le site couvre l’ensemble de l’écosystème web : front‑end, intégration HTML/CSS, Composants réutilisables, SEO, back‑end, cloud, IA, CLI, productivité, bien‑être, outils web et métiers du digital.
Un espace pensé pour générer, apprendre, progresser et développer des projets modernes avec des bonnes pratiques professionnelles.