Module 02 · Structurer le contenu

II. HTML avancé

Utilise les balises adaptées pour organiser les pages, recueillir des informations et intégrer des médias de façon accessible.

Continuer : apprendre CSS Revoir les bases HTML

Les balises sémantiques

Une balise sémantique décrit le rôle du contenu qu’elle contient. Elle rend la page plus claire pour les navigateurs, les moteurs de recherche et les technologies d’assistance.

<header>En-tête du site</header>
<nav aria-label="Navigation principale">Liens du menu</nav>
<main>
    <section>
        <h1>Titre de la page</h1>
        <article>Contenu autonome</article>
    </section>
</main>
<footer>Informations de pied de page</footer>

Les formulaires

Les formulaires permettent aux visiteurs de saisir des informations. Chaque champ doit avoir une étiquette associée et un nom pour pouvoir être identifié.

<form action="#" method="post">
    <label for="nom">Nom :</label>
    <input id="nom" name="nom" type="text"
           autocomplete="name" required>

    <label for="email">Adresse e-mail :</label>
    <input id="email" name="email" type="email"
           autocomplete="email" required>

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

required

Rend la saisie obligatoire.

placeholder

Donne un exemple de saisie, sans remplacer l’étiquette.

autocomplete

Aide le navigateur à remplir les champs.

minlength

Définit le nombre minimal de caractères.

Les tableaux

Réserve les tableaux aux données tabulaires. Utilise un titre et des en-têtes pour que les colonnes soient compréhensibles.

<table>
    <caption>Liste des apprenants</caption>
    <thead>
        <tr>
            <th scope="col">Nom</th>
            <th scope="col">Âge</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Yves</td>
            <td>17</td>
        </tr>
    </tbody>
</table>

Audio et vidéo

Les éléments <audio> et <video> permettent d’intégrer des médias avec des commandes de lecture natives.

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Votre navigateur ne peut pas lire ce fichier audio.
</audio>

<video controls width="500" poster="apercu.jpg">
    <source src="video.mp4" type="video/mp4">
    Votre navigateur ne peut pas lire cette vidéo.
</video>

Bon réflexe :

Ajoute des sous-titres à tes vidéos et fournis une alternative textuelle lorsque le contenu audio porte une information importante.