Aller au contenu

Le HTML

Le HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer le contenu des pages web. Il définit ce que contient une page : texte, images, liens, etc.

Qu'est-ce que le HTML ?

Le HTML n'est pas un langage de programmation : c'est un langage de description (ou de balisage). Il ne permet pas de faire des calculs, des boucles ou des conditions comme Python. Son rôle est de structurer le contenu d'une page web.

Principe des balises

Le HTML fonctionne avec des balises (tags en anglais). Une balise est un mot-clé entouré de chevrons < >.

La plupart des balises fonctionnent par paires : - Une balise ouvrante : <balise> - Une balise fermante : </balise> (avec un slash /)

<p>Ceci est un paragraphe</p>

Certaines balises sont auto-fermantes (elles n'ont pas de contenu) : 

<br>      <!-- Retour à la ligne -->
<hr>      <!-- Ligne horizontale -->
<img>     <!-- Image -->

Les attributs

Les balises peuvent avoir des attributs qui apportent des informations supplémentaires :

<balise attribut="valeur">Contenu</balise>

Exemples : 

<a href="https://www.google.fr">Lien vers Google</a>
<img src="photo.jpg" alt="Description de l'image">

Structure d'une page HTML5

Toute page HTML5 doit respecter une structure minimale :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de ma page</title>
</head>
<body>
    <!-- Le contenu visible de la page -->
</body>
</html>

Explication de chaque élément

Élément Rôle
<!DOCTYPE html> Indique au navigateur qu'il s'agit d'un document HTML5
<html lang="fr"> Élément racine, contient toute la page. L'attribut lang précise la langue
<head> En-tête du document (métadonnées, titre, liens CSS...). Non visible
<meta charset="UTF-8"> Définit l'encodage des caractères (UTF-8 pour les accents)
<title> Titre affiché dans l'onglet du navigateur
<body> Corps du document. Contenu visible de la page

Arborescence HTML

Une page HTML forme une arborescence (structure en arbre) :

html
├── head
│   ├── meta
│   └── title
└── body
    ├── h1
    ├── p
    └── ...

Les éléments à l'intérieur d'autres éléments sont appelés enfants. L'élément qui les contient est leur parent.

Les balises de texte

Titres

HTML propose 6 niveaux de titres, de <h1> (le plus important) à <h6> (le moins important) :

<h1>Titre principal</h1>
<h2>Titre de section</h2>
<h3>Sous-titre</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

Bonne pratique : Une page ne devrait avoir qu'un seul <h1>. Les titres doivent être hiérarchiques (pas de <h3> après un <h1> sans <h2> entre les deux).

Paragraphes et mise en forme

<p>Un paragraphe de texte.</p>

<strong>Texte important (gras)</strong>
<em>Texte mis en emphase (italique)</em>
<mark>Texte surligné</mark>
<del>Texte barré</del>
<sub>Texte en indice</sub> (comme H<sub>2</sub>O)
<sup>Texte en exposant</sup> (comme 2<sup>3</sup>)

Retour à la ligne et séparation

<br>    <!-- Retour à la ligne simple -->
<hr>    <!-- Ligne de séparation horizontale -->

Les liens hypertextes

Les liens sont créés avec la balise <a> (anchor = ancre) :

<a href="https://www.exemple.fr">Texte du lien</a>

Attributs importants

Attribut Rôle
href URL de destination (obligatoire)
target="_blank" Ouvre le lien dans un nouvel onglet
title Info-bulle au survol

Types de liens

<!-- Lien externe (vers un autre site) -->
<a href="https://www.google.fr">Google</a>

<!-- Lien interne (vers une autre page du site) -->
<a href="contact.html">Page contact</a>

<!-- Lien vers un fichier -->
<a href="documents/rapport.pdf">Télécharger le PDF</a>

<!-- Lien vers une ancre (même page) -->
<a href="#section2">Aller à la section 2</a>

<!-- Lien email -->
<a href="mailto:contact@exemple.fr">Envoyer un email</a>

Créer une ancre

Pour créer un point d'ancrage dans la page :

<h2 id="section2">Section 2</h2>

Le lien <a href="#section2"> amènera directement à cet élément.

Les images

Les images sont insérées avec la balise <img> (auto-fermante) :

<img src="chemin/vers/image.jpg" alt="Description de l'image">

Attributs obligatoires

Attribut Rôle
src Chemin vers l'image (obligatoire)
alt Texte alternatif si l'image ne charge pas (obligatoire pour l'accessibilité)

Attributs optionnels

<img src="photo.jpg" alt="Photo de vacances" width="400" height="300">

Formats d'images courants

Format Extension Utilisation
JPEG .jpg, .jpeg Photos
PNG .png Images avec transparence
GIF .gif Animations simples
SVG .svg Images vectorielles
WebP .webp Format moderne (compression optimisée)

Image cliquable (lien)

<a href="https://www.exemple.fr">
    <img src="logo.png" alt="Logo">
</a>

Les listes

Liste non ordonnée (à puces)

<ul>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    <li>Troisième élément</li>
</ul>

Rendu : - Premier élément - Deuxième élément - Troisième élément

Liste ordonnée (numérotée)

<ol>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    <li>Troisième élément</li>
</ol>

Rendu : 1. Premier élément 2. Deuxième élément 3. Troisième élément

Liste de définitions

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Listes imbriquées

<ul>
    <li>Fruits
        <ul>
            <li>Pomme</li>
            <li>Banane</li>
        </ul>
    </li>
    <li>Légumes</li>
</ul>

Les tableaux

Les tableaux servent à présenter des données tabulaires (et non pour la mise en page !).

<table>
    <thead>
        <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Âge</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dupont</td>
            <td>Jean</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Martin</td>
            <td>Marie</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

Structure d'un tableau

Balise Rôle
<table> Conteneur du tableau
<thead> En-tête du tableau
<tbody> Corps du tableau
<tfoot> Pied du tableau (optionnel)
<tr> Ligne (table row)
<th> Cellule d'en-tête (table header)
<td> Cellule de données (table data)

Fusionner des cellules

<!-- Fusionner 2 colonnes -->
<td colspan="2">Cellule sur 2 colonnes</td>

<!-- Fusionner 3 lignes -->
<td rowspan="3">Cellule sur 3 lignes</td>

Les balises sémantiques HTML5

HTML5 introduit des balises sémantiques qui donnent du sens à la structure :

<header>    <!-- En-tête de page ou de section -->
<nav>       <!-- Menu de navigation -->
<main>      <!-- Contenu principal (unique par page) -->
<article>   <!-- Contenu autonome (article, post...) -->
<section>   <!-- Section thématique -->
<aside>     <!-- Contenu annexe (barre latérale) -->
<footer>    <!-- Pied de page ou de section -->

Exemple de structure sémantique

<body>
    <header>
        <h1>Mon Site</h1>
        <nav>
            <ul>
                <li><a href="index.html">Accueil</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <article>
            <h2>Mon premier article</h2>
            <p>Contenu de l'article...</p>
        </article>
    </main>

    <aside>
        <h3>À propos</h3>
        <p>Informations complémentaires</p>
    </aside>

    <footer>
        <p>&copy; 2024 - Mon Site</p>
    </footer>
</body>

Pourquoi utiliser les balises sémantiques ?

  1. Accessibilité : Les lecteurs d'écran comprennent mieux la structure
  2. SEO : Les moteurs de recherche indexent mieux le contenu
  3. Maintenabilité : Le code est plus lisible et compréhensible

Les formulaires

Les formulaires permettent de collecter des informations auprès de l'utilisateur.

Structure de base

<form action="traitement.php" method="post">
    <!-- Champs du formulaire -->
    <button type="submit">Envoyer</button>
</form>
Attribut Rôle
action URL vers laquelle les données seront envoyées
method Méthode HTTP (get ou post)

Les champs de saisie

<!-- Champ texte -->
<input type="text" name="nom" placeholder="Votre nom">

<!-- Email -->
<input type="email" name="email" placeholder="votre@email.fr">

<!-- Mot de passe -->
<input type="password" name="mdp">

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

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

<!-- Case à cocher -->
<input type="checkbox" name="newsletter" id="news">
<label for="news">S'inscrire à la newsletter</label>

<!-- Bouton radio -->
<input type="radio" name="genre" value="homme" id="h">
<label for="h">Homme</label>
<input type="radio" name="genre" value="femme" id="f">
<label for="f">Femme</label>

<!-- Zone de texte multiligne -->
<textarea name="message" rows="5" cols="30"></textarea>

<!-- Liste déroulante -->
<select name="pays">
    <option value="fr">France</option>
    <option value="be">Belgique</option>
    <option value="ch">Suisse</option>
</select>

Les labels

Les <label> améliorent l'accessibilité et l'ergonomie :

<label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom">

L'attribut for du label doit correspondre à l'id du champ.

Attributs utiles des inputs

Attribut Rôle
required Champ obligatoire
placeholder Texte d'indication (grisé)
value Valeur par défaut
disabled Champ désactivé
readonly Champ en lecture seule
maxlength Nombre max de caractères

Les commentaires

Les commentaires ne sont pas affichés par le navigateur :

<!-- Ceci est un commentaire -->

<!--
    Commentaire
    sur plusieurs
    lignes
-->

Utilité : Documenter le code, désactiver temporairement du code, organiser les sections.

Les caractères spéciaux

Certains caractères doivent être encodés en HTML :

Caractère Code HTML Nom
< &lt; Less than
> &gt; Greater than
& &amp; Ampersand
" &quot; Quote
(espace insécable) &nbsp; Non-breaking space
© &copy; Copyright
€ &euro; Euro

Bonnes pratiques

  1. Toujours indenter le code pour une meilleure lisibilité
  2. Utiliser des noms de fichiers en minuscules, sans accents ni espaces
  3. Valider son code avec le validateur W3C : https://validator.w3.org/
  4. Utiliser les balises sémantiques plutôt que des <div> partout
  5. Toujours mettre un alt sur les images
  6. Séparer structure (HTML) et présentation (CSS)

Exercices

Exercice 1 : Structure de base

Créez une page HTML5 valide contenant : - Un titre de page "Ma première page" - Un titre principal <h1> "Bienvenue" - Un paragraphe de présentation - Un lien vers Google

Exercice 2 : Les listes

Créez une page présentant : - Une liste non ordonnée de vos 5 films préférés - Une liste ordonnée des étapes pour faire des pâtes

Exercice 3 : Images et liens

Créez une page contenant : - Une image de votre choix avec un texte alternatif approprié - Un lien vers Wikipédia qui s'ouvre dans un nouvel onglet - L'image doit être cliquable et mener vers la source de l'image

Exercice 4 : Tableau

Créez un tableau HTML présentant les informations suivantes :

Matière Coefficient Moyenne
Maths 4 14
NSI 4 16
Français 3 12

Exercice 5 : Formulaire

Créez un formulaire d'inscription contenant : - Un champ pour le nom (obligatoire) - Un champ pour l'email (obligatoire) - Un champ pour le mot de passe - Une case à cocher pour accepter les CGU - Un bouton d'envoi

Exercice 6 : Page complète

Créez une page web complète sur un sujet de votre choix avec : - Une structure sémantique (header, nav, main, footer) - Un menu de navigation avec au moins 3 liens - Un article avec titre, paragraphes et une image - Un tableau récapitulatif - Un pied de page avec copyright

Voir la correction

Ressources

Auteur : Florian Mathieu

Licence CC BY NC

Licence Creative Commons
Ce cours est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.