Guide HTML
Balises & Attribut class
h1 · p · ul · li · table · thead · tbody · tr
colspan · rowspan · fieldset · legend · label · input
Objectif : Ce guide explique les principales balises HTML ainsi que l'attribut class. Il est conçu pour les
étudiants en cours de Réseaux / développement web souhaitant maîtriser la structure et la sémantique
HTML.
1. L'attribut class en HTML
L'attribut class est un attribut universel : il peut s'appliquer à n'importe quelle balise HTML. Il sert à
associer un ou plusieurs noms de classe à un élément, afin de :
• Lui appliquer des styles CSS ciblés.
• Le manipuler avec JavaScript (querySelector, classList…).
• Réutiliser un style sur plusieurs éléments différents.
Syntaxe
<p class="important">Texte mis en avant</p>
<div class="carte rouge grande">Contenu</div>
Plusieurs classes sont séparées par des espaces. En CSS, une classe est ciblée avec un point :
.important { color: red; }
Exemple complet HTML + CSS
<!-- HTML --> <p class="alerte">Erreur de connexion !</p> <p class="alerte
succes">Connexion réussie !</p> /* CSS */ .alerte { padding: 8px; border-radius: 4px; }
.succes { background-color: green; color: white; }
✎ Bonne pratique : nommez vos classes de façon sémantique (ex : .btn-primaire, .carte-produit) plutôt que visuelle
(ex : .rouge, .grand).
2. Balises de texte : h1, p, ul, li
Guide HTML — Balises & Attribut class Page 1
<h1> — Titre principal
Les balises <h1> à <h6> définissent la hiérarchie des titres. <h1> est le plus important (titre de page),
<h6> le moins important. Ils structurent le contenu et sont essentiels pour le référencement (SEO).
<h1>Titre principal</h1> <h2>Section</h2> <h3>Sous-section</h3>
✎ Un seul <h1> par page est recommandé.
<p> — Paragraphe
La balise <p> définit un bloc de texte. Le navigateur ajoute automatiquement des marges verticales
autour. Elle peut recevoir une classe pour personnaliser son apparence.
<p class="intro">Bienvenue sur notre plateforme.</p> <p>Nous proposons des formations en
informatique et réseaux.</p>
<ul> et <li> — Liste non ordonnée
<ul> (Unordered List) crée une liste à puces. Chaque item est encadré par <li> (List Item). Pour une liste
numérotée, on utilise <ol> (Ordered List).
<ul class="menu"> <li>Accueil</li> <li>Cours</li> <li>Contact</li> </ul>
Balise Type Rendu par défaut
<ul> Liste non ordonnée Puces (bullets)
<ol> Liste ordonnée 1. 2. 3. ...
<li> Élément de liste Un item par balise
Guide HTML — Balises & Attribut class Page 2
3. Tableaux HTML : table, thead, tbody, tr, colspan,
rowspan
Les tableaux permettent d'afficher des données structurées en lignes et colonnes. HTML fournit plusieurs
balises dédiées qui doivent être imbriquées correctement.
Balises de structure
Balise Rôle
<table> Conteneur principal du tableau
<thead> Section d'en-tête (noms de colonnes)
<tbody> Corps du tableau (données)
<tfoot> Pied du tableau (totaux, notes)
<tr> Table Row — une ligne
<th> Table Header — cellule d'en-tête (gras, centré par défaut)
<td> Table Data — cellule de données
Exemple de tableau complet
<table> <thead> <tr> <th>Étudiant</th> <th>Module</th> <th>Note</th> </tr> </thead>
<tbody> <tr> <td>Alice</td> <td>Réseaux L1</td> <td>17</td> </tr> <tr> <td>Bob</td>
<td>Réseaux L1</td> <td>14</td> </tr> </tbody> </table>
colspan — Fusionner des colonnes
colspan est un attribut qui s'applique sur <td> ou <th>. Il indique combien de colonnes la cellule doit
occuper horizontalement.
<th colspan="3">Résultats du semestre 1</th>
✎ Si vous fusionnez 2 colonnes avec colspan=2, supprimez les 2 cellules suivantes dans la même ligne.
rowspan — Fusionner des lignes
rowspan permet à une cellule de s'étendre sur plusieurs lignes. La valeur indique le nombre de lignes
concernées.
<td rowspan="2">Informatique</td>
Visualisation d'un tableau avec colspan et rowspan combinés :
Département (colspan=2)
Guide HTML — Balises & Attribut class Page 3
Réseaux L1
Info (rowspan=2)
Réseaux L2
<tr> <th colspan="2">Département</th> </tr> <tr> <td rowspan="2">Info</td> <td>Réseaux
L1</td> </tr> <tr> <td>Réseaux L2</td> </tr>
Guide HTML — Balises & Attribut class Page 4
4. Formulaires : fieldset, legend, label, input
Les formulaires HTML permettent la saisie et l'envoi de données. Plusieurs balises structurent et rendent
ces formulaires accessibles et sémantiques.
<fieldset> et <legend>
<fieldset> regroupe visuellement des champs liés (un cadre apparaît). <legend> donne un titre à ce
groupe, affiché dans le cadre. Ces balises améliorent l'accessibilité : les lecteurs d'écran annoncent la
légende avant chaque champ du groupe.
<fieldset> <legend>Informations personnelles</legend> <!-- champs ici --> </fieldset>
<label>
<label> associe un texte descriptif à un champ. Le lien entre le label et son champ se fait via l'attribut for,
dont la valeur doit correspondre à l'id du champ. Cliquer sur le label active automatiquement le champ
associé.
<label for="prenom">Prénom :</label> <input type="text" id="prenom" name="prenom">
✎ Toujours associer un label à chaque input pour l'accessibilité.
<input> — Les types principaux
La balise <input> est auto-fermante et crée le champ de saisie. Son comportement change entièrement
selon l'attribut type.
type= Description Exemple de code
text Saisie de texte libre
email Adresse e-mail (validation auto)
password Texte masqué
number Valeur numérique
date Sélecteur de date
checkbox Case à cocher (choix multiples)
radio Bouton radio (choix unique)
file Téléversement de fichier
hidden Champ caché (non visible)
submit Bouton d'envoi du formulaire
reset Réinitialise le formulaire
Attributs importants de <input>
Guide HTML — Balises & Attribut class Page 5
Attribut Rôle
id Identifiant unique, lié au label via for
name Nom du champ envoyé au serveur
placeholder Texte indicatif affiché dans le champ vide
required Rend le champ obligatoire (validation HTML5)
value Valeur par défaut ou valeur d'un bouton
disabled Désactive le champ (non modifiable, non envoyé)
class Classe CSS pour styliser le champ
Formulaire complet — Exemple
<form action="/inscription" method="post"> <fieldset> <legend>Identite</legend> <label
for="nom">Nom :</label> <input type="text" id="nom" name="nom" class="champ"
placeholder="Votre nom" required> <label for="email">Email :</label> <input type="email"
id="email" name="email" class="champ" placeholder="exemple@[Link]" required> <label
for="mdp">Mot de passe :</label> <input type="password" id="mdp" name="mdp"
class="champ"> </fieldset> <fieldset> <legend>Preferences</legend> <label> <input
type="checkbox" name="newsletter" value="1"> Recevoir la newsletter </label>
<label>Niveau :</label> <label> <input type="radio" name="niveau" value="L1"> L1 </label>
<label> <input type="radio" name="niveau" value="L2"> L2 </label> </fieldset> <input
type="submit" value="S inscrire" class="btn-submit"> <input type="reset" value="Effacer">
</form>
Guide HTML — Balises & Attribut class Page 6
5. Récapitulatif général
Balise / Attribut Catégorie Rôle
class (attribut) Universel Associe des classes CSS/JS à tout élément
<h1>…<h6> Texte Hiérarchie de titres (h1 = plus important)
<p> Texte Paragraphe de texte
<ul> Liste Liste non ordonnée (à puces)
<li> Liste Élément d'une liste ul ou ol
<table> Tableau Conteneur principal du tableau
<thead> Tableau En-tête du tableau
<tbody> Tableau Corps du tableau (données)
<tr> Tableau Ligne du tableau
colspan Tableau – attr. Fusionne plusieurs colonnes
rowspan Tableau – attr. Fusionne plusieurs lignes
<fieldset> Formulaire Groupe visuellement des champs liés
<legend> Formulaire Titre du groupe fieldset
<label> Formulaire Description accessible d'un champ input
<input> Formulaire Champ de saisie (type: text, radio, submit…)
A retenir : Une bonne structure HTML sémantique (utiliser la bonne balise au bon endroit) améliore
l'accessibilité, le référencement (SEO) et la maintenabilité de votre code. Combinez toujours l'attribut
class avec une convention de nommage claire pour garder vos feuilles de style organisées.
Guide HTML — Balises & Attribut class Page 7