Pourquoi apprendre HTML5 ?

HTML5 est la brique de base de toute page web. Que vous visiez à devenir développeur, à lancer un site vitrine pour votre activité ou simplement à comprendre comment fonctionne le web, maîtriser HTML est indispensable. Bonne nouvelle : c’est l’un des langages les plus simples à apprendre, et vous obtenez un résultat visible immédiatement.

Prérequis

Niveau : aucun. Tutoriel pensé pour les vrais débutants.
Matériel : un ordinateur (Windows, macOS ou Linux) et une connexion Internet.
Logiciels : aucun pour démarrer ; nous installerons VS Code à l’étape 1.
Temps estimé : 30 à 45 minutes.

Votre première page web : c’est parti !

Pas besoin de logiciel spécial. Un simple éditeur de texte et un navigateur suffisent. En 30 minutes, vous aurez votre première page web fonctionnelle.

Étape 1 — Installer un éditeur de code

Téléchargez Visual Studio Code (gratuit) sur code.visualstudio.com. C’est l’éditeur le plus utilisé par les développeurs.

Extensions VS Code recommandées

Live Server (Ritwick Dey) : actualise la page automatiquement quand vous modifiez le code.
Auto Rename Tag : renomme la balise fermante quand vous modifiez l’ouvrante.
Prettier : formate votre code automatiquement à l’enregistrement.

Étape 2 — Créer les fichiers

Créez un dossier mon-premier-site sur votre bureau.
Ouvrez ce dossier dans VS Code (Fichier → Ouvrir le dossier).
Créez un fichier index.html.
Créez un fichier style.css.

Étape 3 — Le code HTML

Dans index.html, tapez ! puis appuyez sur Tab pour générer la structure de base (raccourci Emmet intégré à VS Code). Puis complétez :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Première Page Web</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <!-- EN-TÊTE -->
    <header>
        <nav>
            <span class="logo">MonSite</span>
            <ul>
                <li><a href="#accueil">Accueil</a></li>
                <li><a href="#apropos">À propos</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <!-- SECTION HERO -->
    <section id="accueil" class="hero">
        <h1>Bienvenue sur ma première page web !</h1>
        <p>Je suis en train d'apprendre le développement web.</p>
        <a href="#contact" class="bouton">Me contacter</a>
    </section>

    <!-- SECTION À PROPOS -->
    <section id="apropos">
        <h2>À propos de moi</h2>
        <p>Je m'appelle [votre nom] et je suis passionné par le numérique.
           J'apprends le développement web pour créer des sites et applications
           qui résolvent des problèmes concrets au Sénégal.</p>

        <h3>Mes compétences</h3>
        <ul>
            <li>HTML5 et CSS3</li>
            <li>JavaScript (en cours)</li>
            <li>WordPress</li>
        </ul>
    </section>

    <!-- SECTION SERVICES -->
    <section id="services">
        <h2>Mes services</h2>
        <div class="cartes">
            <div class="carte">
                <h3>Sites Web</h3>
                <p>Création de sites vitrines modernes et responsives.</p>
            </div>
            <div class="carte">
                <h3>Design</h3>
                <p>Design graphique et identité visuelle.</p>
            </div>
            <div class="carte">
                <h3>Mobile</h3>
                <p>Sites optimisés pour tous les appareils.</p>
            </div>
        </div>
    </section>

    <!-- SECTION CONTACT -->
    <section id="contact">
        <h2>Contactez-moi</h2>
        <form>
            <input type="text" placeholder="Votre nom" required>
            <input type="email" placeholder="Votre email" required>
            <textarea placeholder="Votre message" rows="5"></textarea>
            <button type="submit">Envoyer</button>
        </form>
    </section>

    <!-- PIED DE PAGE -->
    <footer>
        <p>&copy; 2026 MonSite — Fait à Dakar</p>
    </footer>

</body>
</html>

Étape 4 — Le CSS

Dans style.css :

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

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Navigation */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.logo { font-size: 24px; font-weight: bold; color: #667eea; }

nav ul { list-style: none; display: flex; gap: 25px; }

nav a { text-decoration: none; color: #555; }
nav a:hover { color: #667eea; }

/* Hero */
.hero {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    text-align: center;
    padding: 100px 20px;
}

.hero h1 { font-size: 42px; margin-bottom: 15px; }
.hero p { font-size: 20px; margin-bottom: 30px; opacity: 0.9; }

.bouton {
    display: inline-block;
    padding: 14px 35px;
    background: white;
    color: #667eea;
    text-decoration: none;
    border-radius: 25px;
    font-weight: bold;
}

/* Sections */
section { padding: 80px 40px; max-width: 1000px; margin: 0 auto; }

h2 { font-size: 32px; margin-bottom: 20px; color: #1a1a1a; text-align: center; }

/* Cartes */
.cartes { display: flex; gap: 20px; margin-top: 30px; }

.carte {
    flex: 1;
    padding: 30px;
    background: #f8f9fa;
    border-radius: 12px;
    text-align: center;
}

.carte h3 { font-size: 20px; margin-bottom: 10px; }

/* Formulaire */
form { max-width: 500px; margin: 0 auto; }

input, textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
}

button {
    width: 100%;
    padding: 14px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background: #1a1a1a;
    color: #999;
}

/* Responsive */
@media (max-width: 768px) {
    .cartes { flex-direction: column; }
    .hero h1 { font-size: 28px; }
    nav ul { display: none; }
}

Étape 5 — Voir le résultat

Si vous avez l’extension Live Server : clic droit sur index.html → Open with Live Server.
Sinon : double-cliquez sur index.html dans votre explorateur de fichiers.
Votre page s’ouvre dans le navigateur !

Ce que vous avez appris

La structure d’un document HTML5
Les balises sémantiques (header, nav, section, footer)
Les titres, paragraphes, listes et liens
Le CSS de base (couleurs, espacement, mise en page)
Flexbox pour les mises en page
Le responsive design avec les media queries

Erreurs fréquentes

La page s’ouvre toute blanche

Cause : le fichier index.html est vide ou contient une erreur de syntaxe (une balise non fermée, par exemple).
Solution : vérifiez qu’Auto Rename Tag est activé, et utilisez le validateur officiel validator.w3.org pour repérer les erreurs.

Les accents apparaissent en caractères bizarres (« é » → « Ã© »)

Cause : la balise <meta charset="UTF-8"> est absente ou le fichier n’est pas enregistré en UTF-8.
Solution : vérifiez la balise meta charset dans le <head> et, dans VS Code, regardez en bas à droite que l’encodage est bien UTF-8.

Le CSS ne s’applique pas

Cause : le chemin vers style.css est incorrect, ou les deux fichiers ne sont pas dans le même dossier.
Solution : vérifiez que <link rel="stylesheet" href="style.css"> pointe vers le bon nom de fichier (sensible à la casse), et que les deux fichiers sont côte à côte.

Live Server ne démarre pas

Cause : port 5500 déjà utilisé, ou aucun fichier HTML ouvert dans l’éditeur.
Solution : ouvrez d’abord index.html dans VS Code, puis lancez Live Server. Si le port est occupé, modifiez-le dans les paramètres de l’extension.

Balises sémantiques HTML5

<header> : en-tête de page ou section.
<nav> : navigation principale.
<main> : contenu unique de la page. Une seule fois.
<article> : contenu autonome (billet, fiche produit).
<section> : regroupement thématique avec un titre.
<aside> : contenu latéral.
<footer> : pied de page.

Les lecteurs d’écran (NVDA, VoiceOver) annoncent ces repères : un utilisateur aveugle peut sauter directement à <main>. Google les utilise aussi comme indices de structure.

Microdonnées Schema.org

Voici la mise en pratique pour Microdonnées Schema.org. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

<script type='application/ld+json'>
{
  '@context': 'https://schema.org',
  '@type': 'Article',
  'headline': 'Mon premier article HTML5',
  'author': { '@type': 'Person', 'name': 'Mariama Diop' },
  'datePublished': '2026-05-05',
  'image': 'https://exemple.sn/cover.jpg'
}
</script>

Validez via le Rich Results Test de Google. Si l’outil détecte le type Article, votre page peut apparaître avec une vignette et une date dans les résultats.

Accessibilité de base

Toute image porteuse d’information a un alt non vide. Décoratives : alt=''.
Formulaires avec <label for='id'> associés.
Attribut lang sur <html lang='fr'>.
Contraste texte/fond ≥ 4,5:1 (WCAG 2.2 AA).

Utilisez ARIA seulement quand HTML natif ne suffit pas : aria-label pour un bouton sans texte, aria-current='page' pour le lien actif.

OpenGraph et Twitter Card

Voici la mise en pratique pour OpenGraph et Twitter Card. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.

<meta property='og:title' content='Mon premier article HTML5'>
<meta property='og:description' content='Apprenez les balises sémantiques.'>
<meta property='og:image' content='https://exemple.sn/cover.jpg'>
<meta property='og:url' content='https://exemple.sn/article'>
<meta property='og:type' content='article'>
<meta name='twitter:card' content='summary_large_image'>

L’image OpenGraph idéale : 1200×630 px. Validez avec le Sharing Debugger LinkedIn et le validateur Meta.

Validation W3C

Avant la mise en ligne, soumettez votre page au validateur officiel (validator.w3.org). Il détecte les balises non fermées, attributs invalides, hiérarchies de titres cassées. Visez zéro erreur, zéro avertissement. Sur un projet plus large, automatisez via une extension VS Code (HTMLHint) ou un outil CI comme html-validate sur npm.

Aller plus loin : Web Components

Quand votre site grandit, vous répétez le même menu, le même footer sur 20 pages. Deux options sans framework lourd : Web Components natifs (Custom Elements + Shadow DOM) ou <template> chargés via fetch. Pour la majorité des projets débutants, générer les pages avec un static site generator simple (Eleventy, Astro) reste la voie la plus pragmatique.

Adaptation au contexte ouest-africain : performance, équipe, marché

Pour un développeur ou une PME basée à Dakar, Abidjan, Bamako, Cotonou, Lomé, Ouagadougou, Niamey ou Conakry qui livre des sites web ou applications custom, trois adaptations pèsent sur le succès des projets. Premièrement, la connectivité 4G inégale impose de réduire le poids des pages au strict nécessaire. Deuxièmement, le profil typique des développeurs disponibles localement est majoritairement formé sur du JavaScript moderne et du PHP. Troisièmement, le coût en FCFA des services cloud doit être anticipé : Hetzner CX22 à 4 500 FCFA/mois reste imbattable pour démarrer, Cloudflare Pages gratuit pour les sites statiques, Backblaze B2 à 6 USD/TB/mois pour les sauvegardes.

Tester sur appareils réels

Plus important que tous les outils synthétiques, tester son site sur un Android d’entrée de gamme (Galaxy A03 à 200 EUR neuf, Tecno Spark, Itel A60) avec une connexion 4G locale dégradée donne le seul verdict qui compte. Pour approfondir, voir le guide media queries responsive.

Pratiques avancées et outils complémentaires

Au-delà des patterns présentés, plusieurs outils complètent une maîtrise sérieuse. Premier axe : automatiser la qualité via une pipeline CI (GitHub Actions, GitLab CI) qui exécute tests, linting et audit avant chaque déploiement. Deuxième axe : monitorer en production avec Sentry pour les erreurs JavaScript ou New Relic pour les performances applicatives. Troisième axe : documenter les décisions importantes dans un dossier docs/adr/ avec format simple (contexte, décision, conséquences).

Ressources francophones pour approfondir

Plusieurs ressources gratuites en français permettent de monter en compétence rapidement. MDN Web Docs reste la documentation de référence. FreeCodeCamp propose des parcours de 300+ heures. Grafikart.fr offre des centaines de tutoriels vidéos en français. Pour la pratique, contribuer à un projet open source via GitHub est l’investissement le plus payant à moyen terme.

Pratiques avancées et outils complémentaires

Ressources francophones pour approfondir

Erreurs courantes à éviter en production

Trois patterns reviennent dans les projets web mal exécutés et coûtent cher à corriger plus tard. Premier pattern : copier-coller de code Stack Overflow sans comprendre le contexte d’origine. Deuxième pattern : ignorer les warnings de la console — chaque warning est un signal qui mérite d’être lu. Troisième pattern : ne pas tester sur de vrais appareils. DevTools simule mais ne remplace pas un test physique sur un Android d’entrée de gamme avec une 4G dégradée. Documenter chaque décision technique majeure dans un fichier ADR prend dix minutes et fait gagner des heures lors d’un incident ou d’un audit.

Erreurs courantes à éviter en production

Pour étoffer le tableau

Défi : personnalisez votre page

Remplacez les textes par vos vraies informations.
Changez les couleurs (remplacez #667eea par votre couleur).
Ajoutez 2 sections supplémentaires (témoignages, portfolio).
Hébergez gratuitement sur GitHub Pages (voir notre tutoriel dédié).

Pourquoi apprendre HTML5 ?

Prérequis

Votre première page web : c’est parti !

Étape 1 — Installer un éditeur de code

Extensions VS Code recommandées

Étape 2 — Créer les fichiers

Étape 3 — Le code HTML

Étape 4 — Le CSS

Étape 5 — Voir le résultat

Ce que vous avez appris

Erreurs fréquentes

La page s’ouvre toute blanche

Les accents apparaissent en caractères bizarres (« é » → « Ã© »)

Le CSS ne s’applique pas

Live Server ne démarre pas

Balises sémantiques HTML5

Microdonnées Schema.org

Accessibilité de base

OpenGraph et Twitter Card

Validation W3C

Aller plus loin : Web Components

Adaptation au contexte ouest-africain : performance, équipe, marché

Tester sur appareils réels

Pratiques avancées et outils complémentaires

Ressources francophones pour approfondir

Pratiques avancées et outils complémentaires

Ressources francophones pour approfondir

Erreurs courantes à éviter en production

Erreurs courantes à éviter en production

Pour étoffer le tableau

Défi : personnalisez votre page

Articles Similaires

Go (Golang) : le guide complet pour débuter de zéro

Bash scripting : le guide complet pour automatiser sous Linux

Publier et optimiser ses images Docker