// Coding Club Haïti - Guide pour débutants

Apprendre les balises HTML facilement

Toutes les balises HTML essentielles expliquées simplement, avec des exemples concrets. La référence idéale pour bien débuter en développement web.

Explorer les balises Structure de base
Générateur de balise
✦ Générateur

// 01 - Définition de balise

Qu’est-ce qu’une balise ?

Une balise est un mot-clé entouré de chevrons, qui sert à indiquer au navigateur comment afficher un élément sur une page web. Par exemple un texte, un titre ou une image.

Les chevrons sont les deux signes utilisés en HTML pour encadrer une balise : le signe “<” (inférieur) et le signe “>” (supérieur). Par exemple, dans <p>, le mot “p” est placé entre ces deux chevrons.

// 02 - Template

La structure de base d'une page HTML

Copiez ce squelette pour démarrer n'importe quel projet web. C'est le point de départ de toute page HTML.

index.html - Structure complète 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <!-- Titre affiché dans l'onglet -->
    <title>Titre de la page</title>
    <!-- Encodage des caractères -->
    <meta charset="UTF-8">
    <!-- Responsive mobile -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
  <!-- Contient tout le contenu visible de la page : textes, images, liens etc... -->
  </body>
</html>
  • <!DOCTYPE html> Déclaration de type - Indique au navigateur que c'est du HTML5. Doit être la toute première ligne.
  • <html lang="fr"> Racine du document - Enveloppe tout. L'attribut lang est crucial pour le SEO et l'accessibilité.
  • <head> En-tête de la page - Invisible pour l'utilisateur, mais vital pour le navigateur, le SEO et les réseaux sociaux.
  • <title> Titre de la page - La balise title sert à définir le titre d’une page web, affiché dans l’onglet du navigateur et utilisé par Google pour le référencement et l’affichage dans les résultats de recherche.
  • charset UTF-8 Encodage - Permet d'afficher correctement les accents, les émojis et tous les caractères spéciaux.
  • viewport Responsive - Indispensable pour que la page s'adapte aux mobiles. Sans ça, votre site sera mal affiché.
  • <body> Corps de la page - Contient tout le contenu visible de la page : textes, images, liens, boutons. Tout ce que l'utilisateur voit

// 03 - Référence

Les balises HTML les plus utilisées

Chaque balise HTML a un rôle précis. Filtrez par catégorie ou recherchez directement la balise qui vous intéresse.

🔍
<html> Structure

La balise racine de toute page web. Elle enveloppe tout le contenu HTML du document. L'attribut lang indique la langue de la page.

<html lang="fr"> ...contenu... </html>
<head> Structure

Contient les métadonnées de la page : titre, encodage, styles CSS, scripts. Ces infos ne sont pas visibles mais essentielles au navigateur et au SEO.

<head> <title>Mon site</title> </head>
<body> Structure

Contient tout le contenu visible de la page : textes, images, liens, boutons. Tout ce que l'utilisateur voit est dans <body>.

<body> <h1>Bonjour !</h1> </body>
<header> Structure

Représente l'en-tête de la page ou d'une section. Contient généralement le logo, la navigation principale, le titre du site.

<header> <nav>Menu</nav> </header>
<footer> Structure

Représente le pied de page. Contient généralement les liens légaux, le copyright, les coordonnées et les liens secondaires.

<footer> <p>© 2024 MonSite</p> </footer>
<main> Structure

Contient le contenu principal de la page. Il ne doit y avoir qu'un seul <main> par page - utile pour l'accessibilité et le SEO.

<main> <article>...</article> </main>
<section> Structure

Délimite une section thématique de la page. Idéal pour séparer un héros, une présentation, une galerie ou un contact.

<section id="contact"> ... </section>
<article> Structure

Représente un contenu autonome et réutilisable : un article de blog, une fiche produit, un commentaire. Excellent pour le SEO.

<article> <h2>Mon article</h2> </article>
<aside> Structure

Contenu secondaire lié au contenu principal : encadré, barre latérale, publicité, liens connexes. Souvent affiché sur le côté.

<aside> <p>À lire aussi...</p> </aside>
<nav> Structure

Contient les liens de navigation principaux. Aide les moteurs de recherche et les lecteurs d'écran à identifier les menus de navigation.

<nav> <a href="/">Accueil</a> </nav>
<div> Structure

Conteneur générique de type bloc. N'a pas de sens sémantique - utilisez-le quand aucune balise sémantique ne convient. Très utilisé avec CSS.

<div class="carte"> Contenu... </div>
<span> Structure

Conteneur générique de type en ligne. Permet de styliser une portion de texte sans créer de nouveau bloc. Incontournable avec CSS.

<p>Texte <span class="rouge">coloré</span></p>
<h1> à <h6> Texte

Les six niveaux de titres HTML. <h1> est le plus important (unique par page pour le SEO), jusqu'à <h6>, le moins important.

<h1>Titre principal</h1> <h2>Sous-titre</h2> <h3>Section</h3>
<p> Texte

La balise de paragraphe. Tout bloc de texte courant doit être dans un <p>. Le navigateur ajoute automatiquement de l'espace avant et après.

<p>Ceci est un paragraphe de texte.</p>
<strong> Texte

Met en évidence un texte avec une importance forte. Le texte apparaît en gras. A un sens sémantique (importance) contrairement à <b>.

<p>C'est <strong>très important</strong>.</p>
<em> Texte

Indique une emphase sur le texte. Affiché en italique. A une valeur sémantique d'accentuation, contrairement à la balise <i>.

<p>C'est <em>vraiment bien</em>.</p>
<br> Texte

Insère un saut de ligne à l'intérieur d'un texte. C'est une balise auto-fermante (pas de </br>). À utiliser avec modération.

<p>Ligne 1<br>Ligne 2</p>
<hr> Texte

Trace une ligne horizontale de séparation thématique. Balise auto-fermante. Utile pour diviser visuellement des sections de contenu.

<p>Partie 1</p> <hr> <p>Partie 2</p>
<blockquote> Texte

Représente une citation longue extraite d'une autre source. L'attribut cite peut indiquer l'URL source. Affiché indenté par défaut.

<blockquote cite="https://..."> <p>Citation ici.</p> </blockquote>
<code> Texte

Affiche du code informatique en ligne avec une police à chasse fixe (monospace). Pour des blocs de code, combinez avec <pre>.

<p>Utilisez <code>console.log()</code></p>
<a> Lien

Crée un lien hypertexte vers une URL, une ancre ou une adresse mail. L'attribut href est obligatoire. target="_blank" ouvre dans un nouvel onglet.

<a href="https://balisehtml.com" target="_blank"> Visiter le site </a>
<link> Lien

Balise dans <head> qui lie des ressources externes. Sert principalement à importer des feuilles de style CSS. Balise auto-fermante.

<link rel="stylesheet" href="style.css">
<ul> Liste

Crée une liste non ordonnée (à puces). Chaque élément est dans une balise <li>. Idéale pour des listes où l'ordre n'a pas d'importance.

<ul> <li>HTML</li> <li>CSS</li> </ul>
<ol> Liste

Crée une liste ordonnée (numérotée). Les éléments sont numérotés automatiquement. Utiliser quand l'ordre est important (étapes, classements).

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

Définit un élément d'une liste. Doit toujours être enfant de <ul>, <ol> ou <menu>. Peut contenir n'importe quel contenu HTML.

<li>Un élément de liste</li>
<dl> / <dt> / <dd> Liste

Liste de définitions. <dt> est le terme, <dd> est sa définition. Parfait pour des glossaires, des FAQ ou des métadonnées.

<dl> <dt>HTML</dt> <dd>Langage de balisage</dd> </dl>
<img> Média

Intègre une image. src est le chemin de l'image, alt fournit un texte alternatif (obligatoire pour l'accessibilité et le SEO). Balise auto-fermante.

<img src="photo.jpg" alt="Description de l'image" />
<video> Média

Intègre une vidéo directement dans la page. Supporte controls, autoplay, muted, loop. Ajoutez plusieurs <source> pour la compatibilité.

<video controls width="640"> <source src="film.mp4"> </video>
<audio> Média

Intègre un fichier audio. L'attribut controls affiche les commandes de lecture. Supporte les formats MP3, WAV, OGG.

<audio controls> <source src="son.mp3"> </audio>
<figure> / <figcaption> Média

Regroupe un média (image, vidéo, code) avec sa légende. <figcaption> fournit une description visible. Améliore l'accessibilité.

<figure> <img src="img.jpg" alt="..."> <figcaption>Légende</figcaption> </figure>
<iframe> Média

Intègre une page externe dans la page courante. Utilisé pour les cartes Google Maps, les vidéos YouTube, les formulaires tiers.

<iframe src="https://youtube.com/embed/..." > </iframe>
<form> Formulaire

Crée un formulaire interactif. L'attribut action définit où envoyer les données, method définit le mode d'envoi (GET ou POST).

<form action="/envoi" method="post"> ...champs... </form>
<input> Formulaire

Champ de saisie. Le type change son comportement : text, email, password, number, checkbox, radio, file…

<input type="email" name="email" placeholder="votre@mail.fr">
<label> Formulaire

Étiquette associée à un champ de formulaire. L'attribut for doit correspondre à l'id du champ. Améliore l'accessibilité et l'UX.

<label for="nom">Votre nom :</label> <input id="nom" type="text">
<textarea> Formulaire

Zone de texte multiligne. Utile pour les messages longs, les commentaires. Les attributs rows et cols définissent sa taille initiale.

<textarea name="message" rows="5"></textarea>
<select> Formulaire

Crée une liste déroulante de choix. Chaque option est dans une balise <option>. Peut permettre une sélection multiple avec l'attribut multiple.

<select name="pays"> <option value="fr">France</option> <option value="be">Belgique</option> </select>
<button> Formulaire

Crée un bouton cliquable. Le type submit envoie le formulaire, reset réinitialise, button pour JS. Peut contenir du HTML (icônes).

<button type="submit"> Envoyer ✉️ </button>
<table> Tableau

Crée un tableau de données. Contient <thead> (en-tête), <tbody> (corps) et <tfoot> (pied). Pour les données, pas pour la mise en page.

<table> <thead>...</thead> <tbody>...</tbody> </table>
<tr> / <th> / <td> Tableau

<tr> = ligne, <th> = cellule d'en-tête (gras, centré), <td> = cellule de données. L'attribut colspan fusionne des colonnes.

<tr> <th>Nom</th> <th>Âge</th> </tr> <tr> <td>Alice</td> <td>24</td> </tr>

// 04 - Bonnes pratiques

Conseils essentiels pour bien écrire ses balises HTML

Des règles simples pour un code propre, accessible et bien référencé dès le départ.

🎯

Utiliser des balises sémantiques

Préférez <header>, <main>, <article> à des <div> génériques. Le sens des balises améliore le SEO et l'accessibilité.

🔤

Un seul <h1> par page

Le titre principal doit être unique et contenir votre mot-clé principal. Les sous-titres utilisent <h2> à <h6> dans l'ordre hiérarchique.

🖼️

Toujours l'attribut alt sur les images

L'attribut alt est obligatoire sur chaque <img>. Il décrit l'image pour les lecteurs d'écran et les robots des moteurs de recherche.

🔗

Des liens descriptifs

Évitez "cliquez ici". Le texte de vos <a> doit décrire la destination : "En savoir plus sur les balises HTML".

📐

Indenter son code proprement

Un bon indentage rend le code lisible. Chaque balise enfant doit être décalée de 2 espaces par rapport à son parent. Évitez les lignes trop longues.

✅

Toujours fermer ses balises

Toutes les balises non auto-fermantes doivent avoir une balise fermante. Utilisez le validateur W3C pour vérifier votre code.