⬅ Retour au menu

Balises HTML essentielles

Mot clé Balise Rôle Exemple
Titre de l’onglet <title>Titre</title> Texte affiché dans l’onglet du navigateur. (Non visible dans la page)
Titre principal <h1>Titre</h1> Titre le plus important.

Exemple de Titre H1
Sous-titres <h2>...</h2> à <h6>...</h6> Titres de niveaux inférieurs.

Exemple H2

Exemple H3

Exemple H4
Paragraphe <p>...</p> Un paragraphe de texte.

Ceci est un paragraphe.
Lien hypertexte <a href="url">...</a> Créer un lien vers une page. Un lien
Image <img src="image.jpg" alt="texte"> Affiche une image. (Une image apparaîtrait ici)
Retour à la ligne <br> Force un saut de ligne. Ligne 1
Ligne 2
Liste ordonnée <ol>    <li>...</li> </ol> Liste numérotée.
  1. Item 1
  2. Item 2
Liste non ordonnée <ul>    <li>...</li> </ul> Liste à puces.
  • Élément A
  • Élément B
Élément de liste <li>...</li> Élément d’une liste. (Visible dans les deux exemples précédents)
Division <div>...</div> Regroupe un bloc de contenu.
Bloc de contenu
Section <section>...</section> Zone thématique de la page.
Section exemple
Commentaire <!-- commentaire --> Note invisible dans le navigateur. (Non visible dans la page)

Rappel: l'indentation en HTML

L’indentation consiste à décaler les lignes de code vers la droite pour montrer quelles balises sont « à l’intérieur » d’autres balises. On réalise ce décalage en appuyant sur la touche Tabulation (souvent marquée par une flèche ↹ sur certains claviers).

Pourquoi l’indentation est importante :

Exemple sans indentation (difficile à lire) :

<div><h2>Titre</h2><p>Un paragraphe.</p></div>

Exemple avec indentation (lisible et propre) :

<div>
        <h2>Titre</h2>
        <p>Un paragraphe.</p>
    </div>