Mémo — HTML

Le squelette

index.html
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <title>Titre de l'onglet</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- le contenu visible -->

    <script src="app.js"></script>
  </body>
</html>
Élément Rôle
<!DOCTYPE html> HTML moderne. Toujours en première ligne
<head> Infos sur la page. Invisible
<meta charset="UTF-8" /> Autorise les accents
<title> Texte de l’onglet
<link> Branche la feuille de style
<body> Le contenu visible
<script> Branche le JavaScript. Tout en bas

Le texte

<h1>Titre principal</h1>   <!-- un seul par page -->
<h2>Grande partie</h2>
<h3>Sous-partie</h3>

<p>Un paragraphe.</p>
<strong>important</strong>
<em>insisté</em>
<br />                     <!-- retour à la ligne -->
<!-- un commentaire, invisible dans la page -->

Les listes

<ul>              <!-- puces -->
  <li>Un</li>
  <li>Deux</li>
</ul>

<ol>              <!-- numéros, ajoutés par le navigateur -->
  <li>Première étape</li>
  <li>Deuxième étape</li>
</ol>

Les liens et les images

<a href="https://exemple.fr">Vers un autre site</a>
<a href="page2.html">Vers une page de mon site</a>
<a href="https://exemple.fr" target="_blank">Dans un nouvel onglet</a>

<img src="photo.jpg" alt="Description de l'image" />
Importantalt n’est pas optionnel

Il est lu par les logiciels des personnes aveugles et s’affiche si l’image ne charge pas. Décrivez ce qu’on voit.

La structure de la page

<body>
  <header>…</header>   <!-- haut : titre, menu -->
  <main>…</main>       <!-- contenu principal, UNE seule fois -->
  <footer>…</footer>   <!-- bas : auteur, contact -->
</body>

Deux conteneurs neutres, sans signification :

<div>…</div>      <!-- un bloc (prend toute la largeur) -->
<span>…</span>    <!-- un morceau dans une ligne de texte -->

Les formulaires

<form id="monForm">
  <label for="prenom">Prénom :</label>
  <input type="text" id="prenom" placeholder="Camille" required />

  <label for="age">Âge :</label>
  <input type="number" id="age" min="0" max="120" />

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

  <label for="ville">Ville :</label>
  <select id="ville">
    <option value="paris">Paris</option>
    <option value="lyon">Lyon</option>
  </select>

  <input type="checkbox" id="ok" />
  <label for="ok">J'accepte</label>

  <button type="submit">Envoyer</button>
</form>
Type d’input Usage
text Texte libre
number Nombre
email Adresse email
password Masqué
date Sélecteur de date
checkbox Case à cocher
radio Choix unique
range Curseur
color Sélecteur de couleur
Important<label for="x"> doit correspondre à id="x"

Sinon le champ est inutilisable au lecteur d’écran et le clic sur le libellé ne fait rien.

Les attributs

<balise nom="valeur">contenu</balise>
  • Guillemets obligatoires
  • Pas d’espace autour du =
  • Plusieurs attributs séparés par une espace
Attribut Sur quoi Rôle
id tout Identifiant unique, pour le JS
class tout Étiquette de style, réutilisable
href <a> Destination du lien
src <img>, <script> Fichier source
alt <img> Description textuelle
type <input>, <button> Nature du champ
placeholder champs Exemple grisé
required champs Champ obligatoire

Les balises auto-fermantes

Pas de balise de fin : <img /> · <br /> · <meta /> · <input /> · <link />

Les règles de nommage des fichiers

  1. Pas d’espace → ma-page.html
  2. Pas d’accent → presentation.html
  3. Tout en minuscules → index.html

Les erreurs fréquentes

Erreur Symptôme
<h1>…<h1> au lieu de </h1> Toute la suite de la page devient un titre
<meta charset> oublié é à la place de é
src=photo.jpg sans guillemets L’image ne s’affiche pas
Casse du nom de fichier L’image ou le CSS ne charge pas
<script> placé dans le <head> null dans la console