Cours HTML

À quoi sert un tableau ?

Un tableau sert à afficher des données organisées en lignes et en colonnes. Il ne faut pas utiliser un tableau pour construire la mise en page générale d’un site. Les tableaux sont faits pour des données tabulaires : horaires, statistiques, catalogues, comparatifs, notes, résultats, etc.

Les balises principales

• <table> : le tableau
• <caption> : le titre du tableau
• <thead> : l’en-tête
• <tbody> : le corps du tableau
• <tfoot> : le pied du tableau
• <tr> : une ligne
• <th> : une cellule d’en-tête
• <td> : une cellule de donnée

Exemple simple

<table>
  <caption>Notes des étudiants</caption>
  <thead>
    <tr>
      <th>Nom</th>
      <th>Matière</th>
      <th>Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lina</td>
      <td>HTML</td>
      <td>17</td>
    </tr>
    <tr>
      <td>Yanis</td>
      <td>CSS</td>
      <td>15</td>
    </tr>
  </tbody>
</table>

Bonnes pratiques

• Ajouter un <caption> pour expliquer le tableau.
• Utiliser <th> pour les en-têtes, pas seulement <td>.
• Structurer avec <thead>, <tbody> et <tfoot> quand c’est utile.
• Éviter les tableaux pour placer des blocs dans la page.
• Penser à l’accessibilité et à la compréhension des données.

Fusion de cellules

On peut fusionner des cellules avec :

• colspan : fusion sur plusieurs colonnes
• rowspan : fusion sur plusieurs lignes

<tr>
  <th colspan="2">Résultat global</th>
</tr>

À quoi sert un formulaire ?

Un formulaire permet à l’utilisateur de saisir et envoyer des informations : inscription, connexion, recherche, contact, commande, avis, filtre, etc.

Les balises principales

• <form> : le formulaire
• <label> : l’étiquette d’un champ
• <input> : champ de saisie
• <textarea> : zone de texte longue
• <select> : liste déroulante
• <option> : option d’une liste
• <button> : bouton
• <fieldset> : groupe de champs
• <legend> : titre d’un groupe

Exemple de formulaire

<form action="/traitement" method="post">
  <fieldset>
    <legend>Contact</legend>

    <p>
      <label for="nom">Nom</label>
      <input type="text" id="nom" name="nom" required />
    </p>

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

    <p>
      <label for="message">Message</label>
      <textarea id="message" name="message" rows="5" cols="30"></textarea>
    </p>

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

Les types courants de <input>

• text : texte simple
• email : adresse email
• password : mot de passe
• number : nombre
• tel : téléphone
• date : date
• radio : choix unique
• checkbox : choix multiples
• file : fichier
• submit : envoi du formulaire

Attributs importants

• action : adresse où envoyer les données
• method : méthode d’envoi, souvent get ou post
• name : nom technique de la donnée
• id : identifiant unique dans la page
• for : relie un <label> à un champ
• required : champ obligatoire
• placeholder : texte d’exemple
• value : valeur par défaut

Pourquoi le couple label + for est important

Un champ doit être lié à son libellé. Cela améliore l’accessibilité, le confort d’utilisation et le fonctionnement avec les lecteurs d’écran.

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

GET et POST

GET place les données dans l’URL. Utile pour une recherche ou un filtre.

POST envoie les données dans la requête. Utile pour des données plus sensibles ou plus longues.

Bonnes pratiques

• Chaque champ important doit avoir un label.
• Choisir le bon type d’input.
• Utiliser required seulement quand c’est nécessaire.
• Regrouper les champs liés avec <fieldset>.
• Écrire des intitulés clairs.
• Prévoir une structure logique avant le style.

À quoi servent les microdatas ?

Les microdonnées permettent d’ajouter du sens au contenu HTML. Elles aident les moteurs de recherche et d’autres outils à mieux comprendre ce qu’une page contient.

Par exemple, on peut préciser qu’un bloc représente une personne, un article, un produit, un événement, une recette, une entreprise ou un avis.

Schema.org

Schema.org est un vocabulaire standard utilisé pour décrire les données d’une page. On l’utilise avec des attributs HTML comme itemscope, itemtype et itemprop.

Les attributs de base

• itemscope : déclare un élément comme entité
• itemtype : indique le type de l’entité
• itemprop : décrit une propriété de cette entité

Exemple : une personne

<section itemscope itemtype="https://schema.org/Person">
  <h3 itemprop="name">Marie Dupont</h3>
  <p>Métier : <span itemprop="jobTitle">Intégratrice web</span></p>
  <p>Email : <a href="mailto:marie@example.com" itemprop="email">marie@example.com</a></p>
</section>

Exemple : un article

<article itemscope itemtype="https://schema.org/Article">
  <h2 itemprop="headline">Apprendre le HTML sémantique</h2>
  <p>
    Publié le
    <time datetime="2026-04-23" itemprop="datePublished">23 avril 2026</time>
  </p>
  <p itemprop="author">Sofia Martin</p>
  <div itemprop="articleBody">
    Le HTML sémantique permet de structurer correctement une page web.
  </div>
</article>

Pourquoi c’est utile

• Mieux décrire le contenu de la page
• Améliorer la compréhension par les moteurs de recherche
• Faciliter l’exploitation automatique des données
• Rendre le contenu plus explicite sur le plan sémantique

Attention

Les microdatas ne remplacent pas une bonne structure HTML. Elles viennent en complément. Il faut déjà avoir un contenu bien organisé avec des balises adaptées.

1. Respecter la sémantique

Chaque balise doit être utilisée selon son rôle. Un titre avec <h1> à <h6>, un paragraphe avec <p>, une liste avec <ul> ou <ol>, une navigation avec <nav>, un contenu principal avec <main>, etc.

2. Avoir une structure logique

Une page doit suivre une hiérarchie claire : en-tête, navigation, contenu principal, sections, articles, pied de page.

3. Penser à l’accessibilité

• Mettre un texte alternatif pertinent sur les images avec alt
• Lier les labels aux champs
• Garder un ordre de titres cohérent
• Écrire des liens compréhensibles
• Utiliser des balises adaptées au lieu de tout mettre dans des <div>

4. Écrire un HTML valide

Il faut fermer correctement les balises, respecter l’imbrication et éviter les attributs inutiles. Un HTML propre est plus facile à maintenir.

5. Séparer structure et présentation

HTML décrit le contenu. CSS gère le style. JavaScript gère le comportement. Même si ici on travaille uniquement en HTML, il faut comprendre cette séparation.

6. Éviter les balises non sémantiques quand une meilleure balise existe

Il ne faut pas utiliser <div> partout par réflexe. On préfère par exemple <header>, <section>, <article>, <aside>, <footer> quand elles correspondent au bon usage.

7. Penser au sens avant de penser au design

En intégration, on commence par comprendre la structure réelle du contenu. Le style vient ensuite.

Étape 1 : lire la maquette ou le besoin

Avant d’écrire du code, il faut observer ce qu’on doit intégrer : quels blocs existent, quels contenus sont des titres, quels éléments sont des listes, quels boutons sont de vrais boutons, quels blocs sont des cartes, quels contenus sont répétés.

Étape 2 : repérer les grandes zones de la page

On identifie la structure principale :

• le <header>
• la navigation <nav>
• le contenu principal <main>
• les sections <section> ou articles <article>
• le <footer>

Étape 3 : construire la hiérarchie des titres

Il faut placer les titres dans le bon ordre. On commence généralement par un <h1> pour le titre principal de la page, puis des <h2> pour les grandes parties, puis des <h3> pour les sous-parties.

Étape 4 : intégrer le contenu brut

On écrit d’abord les textes, les liens, les images, les listes, les boutons, les formulaires, les tableaux. Le but est d’avoir une page complète et logique avant toute question de style.

Étape 5 : choisir les bonnes balises

À chaque contenu correspond idéalement une balise adaptée. C’est une étape centrale du travail d’intégration HTML.

Étape 6 : vérifier la cohérence sémantique

• Les titres sont-ils bien organisés ?
• Les listes sont-elles de vraies listes ?
• Les boutons sont-ils des <button> quand il faut déclencher une action ?
• Les liens sont-ils des <a> quand ils mènent vers une autre ressource ?
• Les formulaires sont-ils bien structurés ?

Étape 7 : vérifier l’accessibilité de base

• Les images ont-elles un alt ?
• Les champs ont-ils un label ?
• Les liens sont-ils compréhensibles hors contexte ?
• La structure est-elle lisible sans CSS ?

Méthode simple pour débuter

1. Comprendre le contenu
2. Découper la page en blocs logiques
3. Choisir les balises sémantiques
4. Écrire le HTML complet
5. Relire la structure
6. Vérifier accessibilité et cohérence

Ce qu’il faut retenir

Quand on commence l’intégration, on ne doit pas penser d’abord à “faire joli”, mais à bien structurer. Un bon HTML est compréhensible, logique, sémantique et accessible.