HTML (HyperText Markup Language)

I. 🔍 Qu’est-ce que HTML ?

Définition

HTML est un langage de balisage utilisé pour structurer le contenu d’une page web.

Il permet de dire à un navigateur :

"Voici un titre"

"Voici un paragraphe"

"Voici une image"

"Voici un lien"

etc.

⚠️ HTML ne sert pas à styliser (ça c’est le rôle du CSS) ni à rendre interactif (ça c’est le JavaScript).

II. Structure de base d’une page HTML

Voici la structure minimale d’un document HTML :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Ma première page</title>
  </head>
  <body>
    <h1>Bonjour, monde !</h1>
    <p>Ceci est ma première page web.</p>
  </body>
</html>

Détail :

Élément	Rôle
`<!DOCTYPE html>`	Indique qu’on utilise HTML5
`<html>`	Racine du document
`<head>`	Informations invisibles (métadonnées, titre…)
`<meta charset="UTF-8">`	Permet d’écrire des caractères accentués
`<title>`	Titre affiché dans l’onglet du navigateur
`<body>`	Contenu visible de la page

III. Les principales balises HTML

1. Les titres

<h1>Le titre principal</h1>
<h2>Un sous-titre</h2>
<h3>Encore plus petit...</h3>

Il existe de <h1> à <h6>.
Utilise une seule fois <h1> par page (c’est bon pour l’accessibilité et le référencement).

2. Les paragraphes et sauts de ligne

<p>Ceci est un paragraphe.</p>
<br> <!-- saut de ligne -->

<br> est une balise auto-fermante : elle n’a pas besoin de </br>.

3. Les textes en gras, italiques, soulignés…

<strong>Texte important</strong>
<em>Texte en italique</em>
<u>Texte souligné</u>

4. Les listes

Liste à puces

<ul>
  <li>Pomme</li>
  <li>Banane</li>
  <li>Orange</li>
</ul>

Liste numérotée

<ol>
  <li>Étape 1</li>
  <li>Étape 2</li>
</ol>

5. Les liens (hyperliens)

<a href="https://example.com">Clique ici</a>

href contient l’adresse vers laquelle on va être redirigé.

6. Les images

<img src="image.jpg" alt="Description de l’image">

src : chemin de l’image

alt : texte alternatif (important pour les personnes malvoyantes et le SEO)

7. Les tableaux

<table>
  <tr>
    <th>Nom</th>
    <th>Âge</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>20</td>
  </tr>
</table>

Balise	Rôle
`<table>`	Démarre un tableau
`<tr>`	Table Row = ligne
`<td>`	Table Data = cellule
`<th>`	Table Header = cellule d’en-tête (en gras et centrée)

8. Les formulaires (base)

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

  <input type="submit" value="Envoyer">
</form>

Les éléments d’un formulaire :

<input> pour les champs texte, cases à cocher, boutons radio, etc.

<label> pour associer un nom à un champ.

action : où les données sont envoyées.

method : méthode HTTP (généralement POST ou GET).

IV. Comment tester du HTML ?

Éditeur de texte simple

Crée un fichier avec l’extension .html (ex : index.html)

Ouvre-le avec un navigateur pour voir le résultat

V. Balises imbriquées

On peut imbriquer les balises comme des boîtes.

<p><strong>Attention :</strong> Ceci est un message important.</p>

⚠️ Toujours fermer correctement ses balises et les imbriquer dans le bon ordre !

VI. Bonnes pratiques HTML

Toujours avoir une structure <html>, <head>, <body>

Indenter correctement son code

Utiliser des balises sémantiques (par ex. <nav>, <main>, <article>…) quand possible

Ne jamais utiliser HTML pour la mise en page (pas de <center>, pas de style en ligne)