Accueil › Éducation technologique › Cours pratique › HTML
Cours pratique

🏷️ HTML

Écris et exécute ton propre code HTML, puis pioche des idées dans les 30 balises les plus utiles.

🧪 Compilateur HTML

Écris ton propre code HTML et clique sur « Exécuter » pour voir le résultat, tout de suite, sans quitter cette page.

TON CODE
APERÇU

🛡️ Ce compilateur est fabriqué par ClicksSchool et fonctionne 100 % dans ton navigateur.

📚 Aide-mémoire

Besoin d'une idée ? Pioche dans ces exemples et colle-les dans ton compilateur ci-dessus.

Titres <h1> à <h6> Paragraphe <p> Retour à la ligne <br> Séparateur <hr> Texte en gras <strong> Texte en italique <em> Petit texte <small> Texte surligné <mark> Liste à puces <ul> Liste numérotée <ol> Lien <a> Image <img> Bloc <div> Portion de texte <span> Citation en bloc <blockquote> Citation courte <q> Code <code> Tableau <table> Bouton <button> Champ de texte <input> Zone de texte <textarea> Étiquette <label> Liste déroulante <select> Case à cocher En-tête <header> Pied de page <footer> Navigation <nav> Section <section> Article <article> Commentaire <!-- -->

Titres <h1> à <h6>

Créent des titres, du plus important (h1) au moins important (h6).

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Petit titre</h3>

Paragraphe <p>

Sert à écrire un bloc de texte normal.

<p>Un paragraphe de texte normal.</p>

Retour à la ligne <br>

Force un retour à la ligne, sans créer un nouveau paragraphe.

Première ligne.<br>Deuxième ligne.

Séparateur <hr>

Trace une ligne pour séparer deux parties d'une page.

<p>Avant</p>
<hr>
<p>Après</p>

Texte en gras <strong>

Met le texte en gras pour montrer qu'il est important.

<strong>Ce texte est important.</strong>

Texte en italique <em>

Met un mot ou une phrase en valeur, en italique.

<em>Ce texte est en italique.</em>

Petit texte <small>

Affiche un texte en plus petit, utile pour les notes.

<small>Texte plus petit, comme une note.</small>

Texte surligné <mark>

Surligne un morceau de texte, comme un stylo fluo.

Un <mark>mot surligné</mark> dans une phrase.

Liste à puces <ul>

Crée une liste à puces ; chaque <li> est un élément.

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

Liste numérotée <ol>

Crée une liste numérotée automatiquement.

<ol>
  <li>Se lever</li>
  <li>Se laver</li>
</ol>

Lien <a>

Crée un lien cliquable vers une autre page.

<a href="https://example.com">Visiter un site</a>

Image <img>

Affiche une image sur la page.

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='100'%3E%3Crect width='160' height='100' fill='%23f4a93b' rx='12'/%3E%3Ctext x='80' y='55' font-family='sans-serif' font-size='16' fill='white' text-anchor='middle'%3EPhoto%3C/text%3E%3C/svg%3E" alt="une photo">

Bloc <div>

Un conteneur générique pour organiser un bloc de la page.

<div style="background:#f4ede0; padding:10px;">Je suis un bloc div.</div>

Portion de texte <span>

Comme <div>, mais pour une portion de texte à l'intérieur d'une ligne.

<p>Un mot <span style="color:#e85d4c;">en couleur</span> dans une phrase.</p>

Citation en bloc <blockquote>

Met en valeur une citation longue.

<blockquote>Le savoir est une richesse qui ne s'use pas.</blockquote>

Citation courte <q>

Entoure une courte citation avec des guillemets automatiques.

<p>Comme dit le proverbe : <q>petit à petit, l'oiseau fait son nid</q>.</p>

Code <code>

Affiche du texte dans une police de code, pour montrer un bout de programme.

<p>Utilise <code>console.log()</code> pour afficher un message.</p>

Tableau <table>

<table>, <tr>, <th> et <td> créent un tableau en lignes et colonnes.

<table border="1">
  <tr><th>Nom</th><th>Âge</th></tr>
  <tr><td>Léa</td><td>10</td></tr>
</table>

Bouton <button>

Affiche un bouton cliquable.

<button>Clique-moi</button>

Champ de texte <input>

Crée une case où l'utilisateur peut écrire une réponse.

<input type="text" placeholder="Ton prénom">

Zone de texte <textarea>

Une grande case pour écrire plusieurs lignes de texte.

<textarea rows="3">Écris un petit texte ici...</textarea>

Étiquette <label>

Décrit à quoi sert un champ de formulaire.

<label for="prenom">Ton prénom :</label><br>
<input id="prenom" type="text">

Liste déroulante <select>

<select> et <option> créent une liste déroulante de choix.

<select>
  <option>Lecture</option>
  <option>Sport</option>
</select>

Case à cocher

<input type="checkbox"> crée une case à cocher.

<label><input type="checkbox"> J'ai terminé</label>

Section <section>

Regroupe une partie cohérente du contenu d'une page.

<section>
  <h3>Ma passion</h3>
  <p>J'adore dessiner.</p>
</section>

Article <article>

Représente un contenu autonome, comme un article ou une actualité.

<article>
  <h3>Mon article</h3>
  <p>Un texte indépendant.</p>
</article>

Commentaire <!-- -->

Laisse une note dans le code, invisible sur la page.

<!-- Cette note n'apparaît pas -->
<p>Le commentaire n'apparaît pas ici.</p>

↩ Retour à Cours pratique