</> Cours HTML

Cours HTML

Maîtrisez les bases du HTML pour créer des pages web structurées et sémantiques.

0/12 leçons terminées

1. Introduction à HTML

HTML (HyperText Markup Language) est le langage de balisage utilisé pour créer la structure des pages web. Ce n'est pas un langage de programmation mais un langage de définition de structure. Chaque page web que vous visitez est construite à l'aide de HTML.

Structure d'un document HTML

Toute page HTML suit une structure de base comprenant une déclaration doctype, l'élément racine <html>, un en-tête <head> et un corps <body>.

<!-- Déclaration du type de document -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma première page</title>
</head>
<body>
    <h1>Bonjour le monde !</h1>
    <p>C'est ma première page web.</p>
</body>
</html>

Les parties essentielles

  • <!DOCTYPE html> : Indique au navigateur qu'il s'agit d'un document HTML5.
  • <html lang="fr"> : L'élément racine qui contient tout le document. L'attribut lang définit la langue.
  • <head> : Contient les métadonnées (charset, title, liens CSS, scripts).
  • <body> : Contient tout le contenu visible de la page.

2. Les balises de base

HTML utilise des balises pour structurer le contenu. Les balises les plus courantes sont les titres, les paragraphes, les liens et les images.

Les titres (h1 à h6)

Il existe 6 niveaux de titres, du plus important (<h1>) au moins important (<h6>). Il ne doit y avoir qu'un seul <h1> par page.

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Troisième niveau</h3>
<h4>Quatrième niveau</h4>
<h5>Cinquième niveau</h5>
<h6>Sixième niveau</h6>

Les paragraphes et le texte

La balise <p> crée un paragraphe. Pour aller à la ligne, on utilise <br>. Pour séparer visuellement du contenu, on utilise <hr>.

<p>Ceci est un paragraphe.</p>
<p>Deuxième ligne<br>Troisième ligne</p>
<hr>
<p>Un autre paragraphe après la ligne horizontale.</p>

Les liens et images

<!-- Lien hypertexte -->
<a href="https://example.com">Visiter le site</a>

<!-- Image -->
<img src="photo.jpg" alt="Description de l'image">

Récapitulatif des balises de base

  • <h1> à <h6> : Titres
  • <p> : Paragraphe
  • <a> : Lien hypertexte
  • <img> : Image (balise auto-fermante)
  • <br> : Retour à la ligne (auto-fermante)
  • <hr> : Ligne horizontale de séparation (auto-fermante)

3. Les listes

HTML propose trois types de listes : les listes à puces (non ordonnées), les listes numérotées (ordonnées) et les listes de descriptions.

Liste non ordonnée (ul)

Les éléments sont affichés avec des puces. Chaque élément est contenu dans une balise <li>.

<ul>
    <li>Pommes</li>
    <li>Bananes</li>
    <li>Cerises</li>
</ul>

Liste ordonnée (ol)

Les éléments sont numérotés automatiquement. L'attribut start permet de définir le numéro de départ, et type le style de numérotation.

<ol>
    <li>Premier</li>
    <li>Deuxième</li>
    <li>Troisième</li>
</ol>

<!-- Liste avec numérotation par lettres -->
<ol type="A">
    <li>Étape A</li>
    <li>Étape B</li>
</ol>

Liste de définition (dl)

Utilisée pour les termes et leurs définitions. Le mot est dans <dt> et la définition dans <dd>.

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - langage de balisage</dd>

    <dt>CSS</dt>
    <dd>Cascading Style Sheets - feuilles de style</dd>

    <dt>JavaScript</dt>
    <dd>Langage de programmation du web</dd>
</dl>

Listes imbriquées

Vous pouvez imbriquer des listes en plaçant une nouvelle liste à l'intérieur d'un élément <li>.

<ul>
    <li>Fruits
        <ul>
            <li>Pommes</li>
            <li>Poires</li>
        </ul>
    </li>
    <li>Légumes</li>
</ul>

4. Les tableaux

Les tableaux HTML permettent de présenter des données sous forme de lignes et colonnes. Ils sont composés de <table>, <tr> (ligne), <td> (cellule) et <th> (cellule d'en-tête).

Structure de base

<table>
    <tr>
        <th>Nom</th>
        <th>Âge</th>
        <th>Ville</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
        <td>Paris</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
        <td>Lyon</td>
    </tr>
</table>

En-tête et corps (thead / tbody)

Pour mieux structurer vos tableaux, utilisez <thead> pour les en-têtes et <tbody> pour le corps des données.

<table>
    <thead>
        <tr>
            <th>Langage</th>
            <th>Année</th>
            <th>Type</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>JavaScript</td>
            <td>1995</td>
            <td>Scripting</td>
        </tr>
        <tr>
            <td>Python</td>
            <td>1991</td>
            <td>Généraliste</td>
        </tr>
    </tbody>
</table>

colspan et rowspan

L'attribut colspan fusionne des cellules horizontalement, et rowspan fusionne verticalement.

<table>
    <tr>
        <th colspan="3">Titre du tableau</th>
    </tr>
    <tr>
        <td>Ligne 1</td>
        <td rowspan="2">Fusionnée sur 2 lignes</td>
        <td>Ligne 1 col 3</td>
    </tr>
    <tr>
        <td>Ligne 2</td>
        <td>Ligne 2 col 3</td>
    </tr>
</table>

5. Les liens et images

Les liens et les images sont deux éléments fondamentaux du web. Les liens permettent de naviguer entre les pages, et les images enrichissent le contenu visuel.

Les liens hypertextes (a)

La balise <a> crée un lien cliquable. L'attribut href définit la destination du lien.

<!-- Lien interne -->
<a href="page2.html">Aller à la page 2</a>

<!-- Lien externe -->
<a href="https://www.google.com">Google</a>

<!-- Lien qui s'ouvre dans un nouvel onglet -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Ouvrir dans un nouvel onglet
</a>

<!-- Ancre interne -->
<a href="#section2">Aller à la section 2</a>

Les attributs importants des liens

  • href : URL ou chemin vers la destination.
  • target="_blank" : Ouvre le lien dans un nouvel onglet.
  • rel="noopener noreferrer" : Sécurité recommandée avec _blank.
  • title : Texte affiché au survol du lien.

Les images (img)

La balise <img> est auto-fermante. L'attribut alt est obligatoire pour l'accessibilité.

<!-- Image de base -->
<img src="photo.jpg" alt="Paysage de montagne">

<!-- Image avec dimensions -->
<img src="logo.png"
     alt="Logo CodeAcademy"
     width="200"
     height="100">

La figure (figure / figcaption)

L'élément <figure> permet de grouper une image avec sa légende de manière sémantique.

<figure>
    <img src="chat.jpg" alt="Un chat endormi">
    <figcaption>Mon chat préféré en train de dormir</figcaption>
</figure>

6. Les formulaires

Les formulaires permettent aux utilisateurs d'envoyer des données au serveur. Ils sont essentiels pour les connexions, les inscriptions, les recherches et bien plus.

Structure d'un formulaire

La balise <form> contient tous les champs. Les attributs action et method définissent où et comment les données sont envoyées.

<form action="/traitement" method="POST">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom" placeholder="Votre nom">

    <label for="email">Email :</label>
    <input type="email" id="email" name="email">

    <label for="message">Message :</label>
    <textarea id="message" name="message" rows="5"></textarea>

    <label for="pays">Pays :</label>
    <select id="pays" name="pays">
        <option value="">-- Choisir --</option>
        <option value="france">France</option>
        <option value="belgique">Belgique</option>
        <option value="canada">Canada</option>
    </select>

    <button type="submit">Envoyer</button>
</form>

L'élément label

Le <label> est essentiel pour l'accessibilité. Il lie un texte à un champ de formulaire via l'attribut for qui correspond à l'id du champ.

<!-- Avec attribut for (recommandé) -->
<label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom">

<!-- Enveloppement (équivalent) -->
<label>
    Prénom :
    <input type="text" name="prenom">
</label>

Les boutons

<!-- Bouton d'envoi -->
<button type="submit">Envoyer</button>

<!-- Bouton de réinitialisation -->
<button type="reset">Réinitialiser</button>

<!-- Bouton générique (pas d'action par défaut) -->
<button type="button">Cliquez ici</button>

7. Types d'inputs

HTML5 propose de nombreux types de <input> pour collecter différents types de données. Chaque type offre des validations et des interfaces spécifiques au navigateur.

Les inputs textuels

<!-- Texte classique -->
<input type="text" name="pseudo" placeholder="Votre pseudo">

<!-- Email avec validation automatique -->
<input type="email" name="email" placeholder="nom@exemple.com">

<!-- Mot de passe (masqué) -->
<input type="password" name="mdp" minlength="8">

Les inputs numériques et de date

<!-- Nombre -->
<input type="number" name="age" min="0" max="120">

<!-- Date -->
<input type="date" name="naissance">

<!-- Curseur (slider) -->
<input type="range" name="volume" min="0" max="100" value="50">

Les inputs à choix

<!-- Checkbox (cases à cocher) -->
<input type="checkbox" id="newsletter" name="newsletter" value="oui">
<label for="newsletter">S'inscrire à la newsletter</label>

<!-- Radio (choix unique) -->
<input type="radio" id="homme" name="sexe" value="homme">
<label for="homme">Homme</label>

<input type="radio" id="femme" name="sexe" value="femme">
<label for="femme">Femme</label>

L'input fichier

<!-- Upload de fichier -->
<input type="file" name="avatar" accept="image/*">

<!-- Plusieurs fichiers -->
<input type="file" name="photos" multiple accept="image/*">

Attributs utiles

  • required : Champ obligatoire.
  • placeholder : Texte indicatif dans le champ.
  • disabled : Désactive le champ.
  • readonly : Rend le champ en lecture seule.
  • value : Définit la valeur par défaut.
  • min / max : Limites pour les inputs numériques.

8. Les balises sémantiques

HTML5 a introduit des balises sémantiques qui donnent un sens à la structure de la page. Cela améliore l'accessibilité, le référencement (SEO) et la lisibilité du code.

Structure sémantique d'une page

<body>
    <header>
        <nav>
            <ul>
                <li><a href="/">Accueil</a></li>
                <li><a href="/about">À propos</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h1>Titre de l'article</h1>
            <section>
                <h2>Sous-section</h2>
                <p>Contenu de la section...</p>
            </section>
        </article>
    </main>

    <aside>
        <h3>Articles connexes</h3>
        <ul>
            <li>Autre article 1</li>
            <li>Autre article 2</li>
        </ul>
    </aside>

    <footer>
        <p>&copy; 2026 Mon Site</p>
    </footer>
</body>

Description de chaque balise

  • <header> : En-tête d'une page ou d'une section. Contient généralement logo, titre, navigation.
  • <nav> : Conteneur de liens de navigation principaux.
  • <main> : Contenu principal de la page. Il ne doit y en avoir qu'un seul.
  • <section> : Section thématique du contenu. Généralement avec un titre.
  • <article> : Contenu autonome qui peut être distribué séparément (article, billet, carte).
  • <aside> : Contenu indirectement lié au contenu principal (barre latérale, liens connexes).
  • <footer> : Pied de page d'une section ou de la page. Contient copyright, liens légaux.

Pourquoi utiliser la sémantique ?

  • Accessibilité : Les lecteurs d'écran comprennent mieux la structure.
  • SEO : Les moteurs de recherche indexent mieux le contenu.
  • Maintenance : Le code est plus lisible et plus facile à maintenir.
  • Standards : C'est la bonne pratique recommandée par le W3C.

9. Les balises de contenu

HTML offre de nombreuses balises pour formater et structurer le texte. Certaines sont inline (dans le flux du texte) et d'autres sont block (créent un nouveau bloc).

Les balises inline de formatage

<!-- Texte en gras -->
<p>Ceci est du <strong>texte important</strong>.</p>

<!-- Texte en italique -->
<p>Ceci est du <em>texte en emphase</em>.</p>

<!-- Texte surligné -->
<p>Ce mot est <mark>surligné</mark>.</p>

<!-- Petit texte -->
<p><small>Mentions légales en petit</small></p>

Les conteneurs div et span

<div> et <span> sont des conteneurs génériques sans sémantique propre. Ils servent à regrouper du contenu pour le cibler avec du CSS ou du JavaScript.

<!-- div = conteneur bloc -->
<div class="card">
    <h3>Titre</h3>
    <p>Contenu de la carte</p>
</div>

<!-- span = conteneur inline -->
<p>Ce texte a une <span class="highlight">partie colorée</span>.</p>

La citation (blockquote)

La balise <blockquote> sert à citer un passage extérieur. L'attribut cite peut contenir la source.

<blockquote cite="https://example.com">
    <p>Le web est fait pour tout le monde.</p>
    <footer>— Tim Berners-Lee</footer>
</blockquote>

Le code

Les balises <code> et <pre> permettent d'afficher du code informatique.

<!-- Code inline -->
<p>Utilisez la fonction <code>console.log()</code> pour déboguer.</p>

<!-- Bloc de code pré-formaté -->
<pre><code>
function hello() {
    console.log("Bonjour !");
}
</code></pre>

10. Les médias

HTML5 permet d'intégrer directement des médias audio, vidéo et graphiques sans plugins externes.

La vidéo

La balise <video> permet d'intégrer une vidéo avec des contrôles natifs.

<video src="video.mp4" controls width="640" height="360">
    <track kind="subtitles" src="sous-titres.vtt" srclang="fr" label="Français">
    Votre navigateur ne supporte pas la vidéo.
</video>

L'audio

<audio controls src="musique.mp3">
    Votre navigateur ne supporte pas l'audio.
</audio>

Attributs des médias

  • controls : Affiche les boutons de contrôle (play, volume, etc.).
  • autoplay : Lance la lecture automatiquement.
  • loop : Boucle la lecture.
  • muted : Met en sourdine par défaut.
  • poster (vidéo) : Image affichée avant la lecture.

L'iframe

L'élément <iframe> permet d'intégrer du contenu d'un autre site (vidéos YouTube, cartes Google Maps, etc.).

<!-- Intégrer une vidéo YouTube -->
<iframe
    src="https://www.youtube.com/embed/ID_VIDEO"
    width="560"
    height="315"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media"
    allowfullscreen>
</iframe>

SVG inline

SVG (Scalable Vector Graphics) permet de dessiner des graphiques vectoriels directement en HTML.

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="orange" stroke="black" stroke-width="2"/>
</svg>

La balise canvas

L'élément <canvas> crée une zone de dessin vide qui peut être manipulée via JavaScript pour afficher des graphiques, animations ou jeux.

<canvas id="monCanvas" width="500" height="300">
    Votre navigateur ne supporte pas le canvas.
</canvas>

11. Les balises obsolètes et bonnes pratiques

Certains éléments HTML sont devenus obsolètes avec HTML5 et ne doivent plus être utilisés. Voici comment les remplacer et les bonnes pratiques à adopter.

Balises obsolètes à éviter

<!-- A NE PLUS UTILISER -->
<font color="red">Texte rouge</font>       <!-- Remplacer par CSS -->
<center>Centré</center>                    <!-- Remplacer par CSS -->
<marquee>Défilant</marquee>                 <!-- Remplacer par CSS/JS -->
<blink>Cliquant</blink>                    <!-- Remplacer par CSS/JS -->
<frame> / <frameset>               <!-- Remplacer par iframe -->
<b>Gras non sémantique</b>            <!-- Utiliser <strong> -->
<i>Italique non sémantique</i>       <!-- Utiliser <em> -->
<strike>Barré</strike>                  <!-- Utiliser <del> -->

Remplacements avec CSS

<!-- Au lieu de <font color="red"> -->
<p class="texte-rouge">Texte rouge</p>

/* CSS */
.texte-rouge { color: red; }

Bonnes pratiques HTML5

  • Toujours déclarer le DOCTYPE : <!DOCTYPE html>
  • Définir la langue : <html lang="fr">
  • Inclure le charset : <meta charset="UTF-8">
  • Un seul <h1> par page pour le titre principal.
  • Utiliser les balises sémantiques (<header>, <nav>, <main>, etc.).
  • Toujours ajouter l'attribut alt aux images.
  • Utiliser les <label> dans les formulaires.
  • Séparer structure et présentation : HTML pour la structure, CSS pour le style.
  • Valider votre HTML sur validator.w3.org.
  • Respecter l'accessibilité : ARIA, contraste, navigation au clavier.

Les attributs data-*

Les attributs data- permettent de stocker des informations personnalisées dans le HTML de manière valide.

<div data-user-id="42" data-role="admin">
    Contenu de l'utilisateur
</div>

<!-- Accessible via JavaScript -->
<!-- element.dataset.userId -->
<!-- element.dataset.role -->

12. Projet final

Maintenant que vous maîtrisez toutes les bases du HTML, il est temps de les mettre en pratique ! Ce projet final consiste à créer une page web complète en combinant toutes les notions apprises.

Ce que vous devez intégrer

  • Structure sémantique complète (header, nav, main, section, footer)
  • Une barre de navigation avec liens
  • Un titre principal et des sous-titres (h1 à h3)
  • Des paragraphes de texte
  • Des images avec attribut alt
  • Une liste à puces ET une liste numérotée
  • Un tableau avec thead, tbody, colspan
  • Un lien externe avec target="_blank"
  • Un formulaire complet avec label, input, select, textarea, button
  • Un bloc de citation (blockquote)
  • Du texte formaté (strong, em, mark, code)
  • Un élément audio ou vidéo

Exemple de template

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon Projet Final</title>
</head>
<body>

    <header>
        <h1>Mon Site Web</h1>
        <nav>
            <ul>
                <li><a href="#accueil">Accueil</a></li>
                <li><a href="#presentation">Présentation</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="accueil">
            <h2>Bienvenue</h2>
            <p>Ceci est mon <strong>projet final</strong> en HTML.</p>
            <img src="image.jpg" alt="Photo de présentation" width="400">
        </section>

        <section id="presentation">
            <h2>Présentation</h2>
            <p>Les technologies que j'ai apprises :</p>
            <ul>
                <li>HTML - Le balisage</li>
                <li>CSS - Le style (à venir)</li>
                <li>JavaScript - L'interactivité (à venir)</li>
            </ul>

            <table>
                <thead>
                    <tr>
                        <th>Langage</th>
                        <th>Niveau</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>HTML</td>
                        <td>Débutant</td>
                    </tr>
                    <tr>
                        <td>CSS</td>
                        <td>À apprendre</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <section id="contact">
            <h2>Contact</h2>
            <form action="#" method="POST">
                <label for="nom">Nom :</label>
                <input type="text" id="nom" name="nom" required>

                <label for="email">Email :</label>
                <input type="email" id="email" name="email" required>

                <label for="message">Message :</label>
                <textarea id="message" name="message" rows="5" required></textarea>

                <button type="submit">Envoyer</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2026 Mon Site Web</p>
    </footer>

</body>
</html>

Conseils pour réussir

  • Commencez par dessiner la structure sur papier avant de coder.
  • Utilisez les balises sémantiques appropriées pour chaque zone.
  • Vérifiez votre code avec le validateur W3C.
  • Testez votre page sur différents appareils.
  • Pensez à l'accessibilité : labels, alt, structure hiérarchique.