Introduction à HTML

Titre Professionnel DWWM - Développeur Web et Web Mobile

2025-2026

📋 Plan du cours

C'est quoi, HTML ?
Syntaxe des balises
Structure du document
Les balises ont un sens !
Contenu multimédia
Vers la mise en page
Bonnes pratiques

C'est quoi, HTML ?

Définition
Historique
Utilisations

Définition

🇬🇧 Hypertext Markup Language = 🇫🇷 Langage de balisage hypertexte

Langage de présentation utilisé pour décrire les pages web
Utilise des balises pour structurer le texte et apporter des informations
Ce n'est PAS un langage de programmation
C'est un langage de marquage qui donne du sens au contenu

💡 À retenir : HTML structure le contenu, CSS le met en forme, JavaScript le rend interactif

📅 Historique

Année	Événement
1991	HTML est adopté comme base du web par Tim Berners-Lee
1995	Première version standardisée (HTML 2.0)
1997	Standards maintenus par le W3C (HTML 3, HTML 4, XHTML)
2014	Le W3C et le WHATWG publient HTML5
2019	HTML5 devient un Living Standard

🌐 Utilisations

Liens hypertextes : permet de lier des fichiers entre eux
World Wide Web : les documents reliés forment le "Web"
Navigation : permet de naviguer entre pages et sites

🔗 Le "hypertexte" dans HTML

C'est la capacité de créer des liens entre documents !

Syntaxe des balises

Comment écrire une balise ?
Contenu d'une balise
Attributs
Exercice pratique

✍️ Comment écrire une balise ?

Structure de base

Une balise ouvrante : <balise>
Une balise fermante : </balise>
Délimitées par des chevrons < et >
La balise fermante contient un slash (/)

<balise></balise>

<p>Ceci est un paragraphe</p>

<h1>Ceci est un titre</h1>

<a href="lien.html">Un lien</a>

📦 Contenu d'une balise

Que peut contenir une balise ?

Du texte
D'autres balises (imbrication)
Rien (balises auto-fermantes)

⚠️ Règle : Les balises doivent être bien imbriquées

<!-- Balise avec texte -->
<p>Du texte</p>

<!-- Balises imbriquées -->
<p>
    Texte avec <strong>mot en gras</strong>
</p>

<!-- Auto-fermante -->
<img src="image.jpg" alt="Photo">
<br>

✅ ❌ Imbrication : bon et mauvais exemples

❌ MAUVAIS

<!-- Mauvaise imbrication -->
<p>Texte <strong>gras</p></strong>

<!-- Balises qui se chevauchent -->
<div>
    <p>Paragraphe
</div>
    </p>

✅ CORRECT

<!-- Bonne imbrication -->
<p>Texte <strong>gras</strong></p>

<!-- Imbrication correcte -->
<div>
    <p>Paragraphe</p>
</div>

🏷️ Attributs

À quoi servent les attributs ?

Informations supplémentaires
Uniquement sur la balise ouvrante
Syntaxe : nom="valeur"
Toujours entre guillemets doubles

💡 Bonnes pratiques :

Guillemets doubles " "
Pas d'espace autour du =
Noms en minuscules

<!-- Un attribut -->
<a href="page.html">Lien</a>

<!-- Plusieurs attributs -->
<img 
    src="photo.jpg"
    alt="Description"
    width="300"
>

<!-- Balise avec attributs ET contenu -->
<a 
    href="https://google.com"
    target="_blank"
    rel="noopener noreferrer"
>
    Google
</a>

🎮 Exercice 1 : Équipe Pokémon

⏱️ Durée : 15 minutes

🎯 Objectif

Représenter l'équipe Pokémon sous forme de balises HTML

📝 Consignes

Balise <team> contenant tous les Pokémon
Une balise <pokemon> par Pokémon
Nom, numéro, niveau, types, stats en attributs
Attaques en balises <move> imbriquées
Noms en anglais

📊 Données de l'équipe

Nom	N°	Niv	Types	Stats	Attaques
Pikachu	25	5	Électrik	35/55/40/90	Éclair, Vive-Attaque, Reflet, Cage Éclair
Papilusion	12	10	Insecte, Vol	60/45/50/70	Cyclone, Poudre Dodo, Choc Mental, Poudre Toxik

✅ Correction Exercice 1

<team>
    <pokemon 
        name="Pikachu"
        number="25"
        level="5"
        types="Électrik"
        hp="35"
        attack="55"
        defense="40"
        speed="90"
    >
        <move>Éclair</move>
        <move>Vive-Attaque</move>
        <move>Reflet</move>
        <move>Cage Éclair</move>
    </pokemon>
    
    <pokemon 
        name="Papilusion"
        number="12"
        level="10"
        types="Insecte,Vol"
        hp="60"
        attack="45"
        defense="50"
        speed="70"
    >
        <move>Cyclone</move>
        <move>Poudre Dodo</move>
        <move>Choc Mental</move>
        <move>Poudre Toxik</move>
    </pokemon>
</team>

Structure du document

La base
L'en-tête : <head>
Le corps : <body>
Exercice

🏗️ La base d'un document HTML

Structure minimale

<!DOCTYPE html> : déclare HTML5
<html lang="fr"> : racine + langue
<head> : métadonnées
<body> : contenu visible

💡 Important :

DOCTYPE en premier
Toujours préciser la langue
Un seul head et body par page

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Titre</title>
    </head>
    
    <body>
        <!-- Contenu visible -->
        <h1>Bonjour ! 👋</h1>
    </body>
</html>

📋 L'en-tête : <head>

Métadonnées essentielles

charset="UTF-8" : encodage 🎉é
<title> : titre onglet
viewport : responsive mobile
description : SEO Google
<link> : CSS, favicon

<head>
    <!-- Obligatoire -->
    <meta charset="UTF-8">
    
    <!-- Responsive -->
    <meta 
        name="viewport"
        content="width=device-width, 
                 initial-scale=1.0"
    >
    
    <!-- Titre -->
    <title>Équipe Pokémon</title>
    
    <!-- CSS -->
    <link 
        rel="stylesheet"
        href="style.css"
    >
</head>

📄 Le corps : <body>

Le contenu visible

Tout le contenu visible
Textes, images, vidéos, liens

💡 Organisation :

<header> : en-tête
<main> : contenu principal
<footer> : pied de page

<body>
    <header>
        <h1>Mon équipe</h1>
        <nav>
            <!-- Menu -->
        </nav>
    </header>
    
    <main>
        <h2>Bienvenue</h2>
        <p>Découvrez...</p>
    </main>
    
    <footer>
        <p>© 2025</p>
    </footer>
</body>

🎮 Exercice 2 : Structure de base

⏱️ Durée : 10 minutes

🎯 Objectif

Créer la structure HTML complète

📝 Consignes

Créer index.html
Structure HTML5 de base
Métadonnées : français, UTF-8, viewport
Titre : "Équipe Pokémon"
Sections : header, main, footer
Commentaires dans chaque section

✅ Correction Exercice 2

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Équipe Pokémon</title>
</head>

<body>
    <!-- En-tête : titre + navigation -->
    <header>
        
    </header>
    
    <!-- Contenu principal -->
    <main>
        
    </main>
    
    <!-- Pied de page -->
    <footer>
        
    </footer>
</body>
</html>

Les balises ont un sens !

Balises pour le texte
Balises sectionnantes
Liens
Exercice

🎯 Pourquoi la sémantique ?

✅ Avantages

Accessibilité : lecteurs d'écran
SEO : Google comprend mieux
Maintenabilité : code plus clair
Performance : rendu optimisé

❌ Problèmes du HTML non sémantique

Difficile à maintenir
Mauvais SEO
Inaccessible
Non professionnel

                💡 Règle d'or : Utilisez la balise qui correspond au sens, pas à l'apparence !
            

📝 Balises texte : Titres et paragraphes

Titres : <h1> à <h6>

h1 : titre principal (1 seul)
h2 : sous-titre niveau 2
h3 à h6 : niveaux suivants

⚠️ Ne pas sauter de niveaux !
h1 → h2 → h3 ✅
h1 → h3 ❌

Paragraphes : <p>

Représente un paragraphe
Marges automatiques

<h1>Mon équipe Pokémon</h1>

<h2>Pokémon Électrik</h2>

<h3>Pikachu</h3>
<p>
    Pikachu est un Pokémon 
    de type Électrik très rapide.
</p>

<h3>Raichu</h3>
<p>
    Raichu est l'évolution de Pikachu.
</p>

<h2>Pokémon Vol</h2>

📝 Balises texte : Listes

Liste non ordonnée : <ul>

Unordered List (puces)
Éléments sans ordre particulier

Liste ordonnée : <ol>

Ordered List (numérotée)
Éléments avec un ordre

Élément : <li>

List Item
Dans ul ou ol

<!-- Liste non ordonnée -->
<h3>Attaques de Pikachu</h3>
<ul>
    <li>Éclair</li>
    <li>Vive-Attaque</li>
    <li>Reflet</li>
</ul>

<!-- Liste ordonnée -->
<h3>Top 3 Pokémon</h3>
<ol>
    <li>Dracaufeu</li>
    <li>Pikachu</li>
    <li>Mewtwo</li>
</ol>

📝 Balises texte : Emphase

Balises d'emphase

<em> : importance modérée (italique)
<strong> : forte importance (gras)

Balises génériques

<span> : inline sans signification
<div> : bloc sans signification

❌ À éviter : <b> et <i>
Préférer <strong> et <em>

<p>
    Pikachu est 
    <em>très populaire</em>
    et possède des capacités
    <strong>électriques puissantes</strong>.
</p>

<!-- Span pour style -->
<p>
    Type : <span class="type">Électrik</span>
</p>

<!-- Div pour grouper -->
<div class="pokemon-card">
    <h3>Pikachu</h3>
    <p>Niveau 5</p>
</div>

📦 Balises sectionnantes : Structure

<header>

En-tête de page/section
Logo, titre, navigation

<main>

Contenu principal unique
1 seul par page

<footer>

Pied de page
Copyright, liens légaux

<nav>

Section de navigation
Menu, fil d'Ariane

<body>
    <header>
        <h1>Mon équipe</h1>
        <nav>
            <ul>
                <li>
                    <a href="#accueil">
                        Accueil
                    </a>
                </li>
                <li>
                    <a href="#equipe">
                        Équipe
                    </a>
                </li>
            </ul>
        </nav>
    </header>
    
    <main>
        <!-- Contenu -->
    </main>
    
    <footer>
        <p>© 2025</p>
    </footer>
</body>

📦 Balises sectionnantes : Contenu

<section>

Section thématique
Groupe d'éléments liés
Avec titre h2

<article>

Contenu autonome
Article, produit, carte...
Peut avoir header/footer

<aside>

Contenu complémentaire
Sidebar, encart

<main>
    <section>
        <h2>Pokémon Électrik</h2>
        
        <article>
            <header>
                <h3>Pikachu #025</h3>
                <p>Niveau 5</p>
            </header>
            
            <p>Pikachu est...</p>
            
            <footer>
                <p>Capturé le 01/03/2025</p>
            </footer>
        </article>
    </section>
    
    <aside>
        <h3>Le saviez-vous ?</h3>
        <p>Pikachu est la mascotte</p>
    </aside>
</main>

🔗 Liens : <a>

Attributs

href : URL (obligatoire)
target="_blank" : nouvel onglet
rel="noopener noreferrer" : sécurité

Types de liens

Absolu : https://site.com
Relatif : page.html
Ancre : #section
Email : mailto:email@
Tel : tel:+33...

<!-- Lien interne -->
<a href="equipe.html">
    Mon équipe
</a>

<!-- Lien externe -->
<a 
    href="https://pokepedia.fr"
    target="_blank"
    rel="noopener noreferrer"
>
    Poképedia
</a>

<!-- Ancre -->
<a href="#pikachu">Voir Pikachu</a>

<!-- Email -->
<a href="mailto:contact@pokemon.com">
    Contact
</a>

🎮 Exercice 3 : Contenu sémantique

⏱️ Durée : 25 minutes

🎯 Objectif

Intégrer le contenu avec balises sémantiques

📝 Consignes

Header : titre h1 + menu navigation (liste numérotée de liens)
Main : article Pikachu avec titre h2 + sections stats et attaques
Footer : © Sud Management 2025

✅ Correction Exercice 3

<body>
    <header>
        <h1>Mon équipe Pokémon</h1>
        <nav>
            <ol>
                <li><a href="#pikachu">Pikachu</a></li>
            </ol>
        </nav>
    </header>
    
    <main>
        <article id="pikachu">
            <h2>Pikachu <span>#025</span></h2>
            
            <section>
                <h3>Statistiques</h3>
                <ul>
                    <li>PV : 35</li>
                    <li>Attaque : 55</li>
                    <li>Défense : 40</li>
                    <li>Vitesse : 90</li>
                </ul>
            </section>
            
            <section>
                <h3>Attaques</h3>
                <ul>
                    <li>Éclair</li>
                    <li>Vive-Attaque</li>
                    <li>Reflet</li>
                    <li>Cage Éclair</li>
                </ul>
            </section>
        </article>
    </main>
    
    <footer>
        <p>© Sud Management 2025</p>
    </footer>
</body>

Contenu multimédia

Les images
Audio et vidéo
Exercice

🖼️ Les images : <img>

Attributs essentiels

src : URL (obligatoire)
alt : description (obligatoire !)
width/height : dimensions

✅ Bonnes pratiques :

Toujours mettre alt
Alt descriptif pour images importantes
Alt vide pour déco
Spécifier dimensions

<!-- Image simple -->
<img 
    src="pikachu.png"
    alt="Pikachu, Pokémon jaune Électrik"
>

<!-- Avec dimensions -->
<img 
    src="images/pikachu.jpg"
    alt="Portrait de Pikachu"
    width="300"
    height="300"
>

<!-- Décorative (alt vide) -->
<img 
    src="decoration.png"
    alt=""
>

🎵 🎬 Audio et Vidéo

<audio>

controls : affiche contrôles
<source> : fichier audio
Plusieurs sources pour compatibilité

<video>

controls : affiche contrôles
width/height : dimensions
<source> : fichier vidéo

<!-- Audio -->
<audio controls>
    <source 
        src="pikachu-cry.mp3"
        type="audio/mpeg"
    >
    Navigateur non compatible
</audio>

<!-- Vidéo -->
<video 
    width="640"
    height="360"
    controls
    poster="preview.jpg"
>
    <source 
        src="combat.mp4"
        type="video/mp4"
    >
</video>

🎮 Exercice 4 : Multimédia

⏱️ Durée : 15 minutes

🎯 Objectif

Ajouter image et audio à Pikachu

📝 Consignes

Télécharger image et cri sur Poképedia
Enregistrer dans dossier media/
Ajouter section "Ressources multimédia"
Intégrer image (width="200") et lecteur audio

✅ Correction Exercice 4

<section>
    <h3>Ressources multimédia</h3>
    
    <img 
        src="media/pikachu.png"
        alt="Pikachu, petit Pokémon jaune Électrik"
        width="200"
    >
    
    <p>Écouter le cri de Pikachu :</p>
    <audio controls>
        <source 
            src="media/pikachu-cry.mp3"
            type="audio/mpeg"
        >
        Votre navigateur ne supporte pas l'audio.
    </audio>
</section>

Vers la mise en page

Attribut "style"
Balise <style>
Balise <link>

🎨 HTML vs CSS

📌 Principe fondamental

HTML = Structure et contenu (le fond)
CSS = Présentation (la forme)

🏗️ HTML

Structure du document
Sens des éléments
Le contenu
Organisation logique

🎨 CSS

Couleurs
Polices
Espacements
Disposition
Animations

💡 Bonne pratique : Toujours séparer structure et présentation !

Attribut "style"

CSS inline

Directement sur la balise
Attribut style
Syntaxe : prop: valeur;

❌ À éviter !

Difficile à maintenir
Code répétitif
Mélange HTML et CSS

<p style="color: red;">
    Texte en rouge
</p>

<p style="color: blue; font-size: 20px;">
    Texte bleu 20px
</p>

<!-- ❌ Mauvaise pratique -->
<h1 style="color: orange;">Titre 1</h1>
<h1 style="color: orange;">Titre 2</h1>
<!-- → Code répétitif ! -->

Balise <style>

CSS interne

Dans le <head>
Règles CSS
Pour toute la page

✅ Mieux que style

Règles centralisées
Pas de répétition

<head>
    <style>
        /* Tous les h1 */
        h1 {
            color: orange;
            font-size: 2em;
        }
        
        /* Tous les paragraphes */
        p {
            color: blue;
        }
        
        /* Class pokemon */
        .pokemon {
            background: #ffe6cc;
            padding: 20px;
        }
    </style>
</head>

Balise <link> : Méthode recommandée ✅

CSS externe

CSS dans fichier .css
Lien depuis HTML
Dans le <head>

✅ LA bonne méthode !

Séparation HTML/CSS
Réutilisable
Cache navigateur
Facile à maintenir

<!-- index.html -->
<head>
    <link 
        rel="stylesheet"
        href="css/style.css"
    >
</head>

<!-- css/style.css -->
h1 {
    color: orange;
    font-size: 2.5em;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

Bonnes pratiques

Organisation du code
Nommage
Validation
Accessibilité

📐 Organisation et indentation

❌ MAUVAIS

<main><article><h2>Titre</h2><p>
Texte</p></article></main>

✅ BON

<main>
    <article>
        <h2>Titre</h2>
        <p>Texte</p>
    </article>
</main>

💡 Règles d'indentation

2 ou 4 espaces (pas de tabs)
1 niveau par imbrication
Balises sœurs au même niveau
Utiliser auto-indentation (VS Code)

🏷️ Nommage

✅ Fichiers

Toujours en minuscules
Pas d'espaces (utiliser -)
Pas d'accents
Page d'accueil : index.html

✅ BON

index.html
mon-equipe.html
pikachu.jpg
style.css

❌ MAUVAIS

Index.HTML
Mon Équipe.html
Pikachu n°25.JPG
Style CSS.css

✔️ Validation W3C

🔍 Validateur

validator.w3.org

Vérifie la validité HTML
Détecte les erreurs
Suggère améliorations
À utiliser régulièrement !

🛠️ Outils

VS Code
Extensions : Live Server, Prettier
DevTools (F12)

📚 Documentation

MDN Web Docs : developer.mozilla.org
→ LA référence HTML/CSS/JS
Can I Use : caniuse.com
→ Compatibilité navigateurs

♿ Accessibilité

Pourquoi ?

15% de la population a un handicap. Un site accessible est utilisable par tous !

✅ Règles de base

Toujours mettre alt sur images
Utiliser balises sémantiques
Structure de titres logique
Contraste de couleurs suffisant
Liens avec texte descriptif
Langue spécifiée

❌ Mauvais

<img src="img.jpg">
<div>Titre</div>

✅ Bon

<img src="pikachu.jpg" alt="Pikachu">
<h2>Titre</h2>

📝 Récapitulatif des balises

Catégorie	Balises	Description
Structure	<html>, <head>, <body>	Base du document
Métadonnées	<meta>, <title>, <link>	Informations page
Texte	<h1>-<h6>, <p>, <em>, <strong>	Titres, paragraphes
Listes	<ul>, <ol>, <li>	Listes
Sections	<header>, <main>, <footer>, <nav>, <section>, <article>	Structure sémantique
Liens	<a>	Liens hypertextes
Multimédia	<img>, <audio>, <video>	Images, sons, vidéos

🚀 Pour aller plus loin

📚 Balises à découvrir

Tableaux : <table>, <tr>, <td>
Formulaires : <form>, <input>, <button>
Détails : <details>, <summary>
Figure : <figure>, <figcaption>
Code : <code>, <pre>

🎯 Prochaines étapes

CSS : Mise en page
- Flexbox et Grid
- Responsive design
JavaScript : Interactivité
- Manipulation DOM
- Événements

                💡 Conseils
                Pratiquer régulièrement
Lire du code (F12 sur sites)
Consulter MDN

            

🎉 Félicitations !

Vous avez terminé l'introduction à HTML

✅ Structure HTML maîtrisée

✅ Balises sémantiques comprises

✅ Bonnes pratiques acquises

👉 Prochaine étape : CSS

Des questions ? 💬