Cours de Developpement Web

HTML5 — Module 2 : Balises de texte

5
par IARO

Typographie, mise en forme et elements de texte HTML5 • Niveau debutant

Balises deModule 2
texte et typographie
Titres, paragraphes, mise en forme, citations, code et elements avances

Objectifs du module

Utiliser correctement les 6 niveaux de titres h1 a h6

Maitriser les balises de mise en forme : strong, em, mark, del, ins...

Integrer des citations, du code et du texte preformate

Utiliser les elements avances : abbr, dfn, time, sup, sub, bdi, wbr

Distinguer les elements de bloc et les elements en ligne

Appliquer les bonnes pratiques typographiques en HTML5

Niveau Duree Prerequis Module

Debutant 3 a 4h Module 1 complete 2 / 16

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 1 / 14
HTML5 Module 2 — Balises de texte et typographie par IARO

1 Elements de bloc vs Elements en ligne

En HTML5, les elements sont classes en deux grandes categories selon leur comportement d affichage.
Comprendre cette distinction est fondamental pour maitriser la mise en page.

ELEMENTS DE BLOC (Block) ELEMENTS EN LIGNE (Inline)

Occupent toute la largeur disponible N occupent que la place necessaire

Commencent sur une nouvelle ligne Resten dans le flux du texte
Peuvent contenir des blocs et du texte Contiennent uniquement du texte ou d autres elements inline

<p> <h1>-<h6> <div> <ul> <ol> <strong> <em> <a> <span> <img>
<li> <blockquote> <pre> <hr> <table> <code> <mark> <abbr> <time> <sup>

2 Les titres h1 a h6 — Hierarchie et SEO

HTML5 propose 6 niveaux de titres. Ils structurent le contenu de facon hierarchique, comme dans un livre (chapitre
> section > sous-section). Cette hierarchie est cruciale pour le SEO et pour les lecteurs d ecran (accessibilite).

[Link]
<h1>Titre principal (un seul par page)</h1>
<h2>Titre de section</h2>
<h3>Titre de sous-section</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6 (le plus petit)</h6>

Balise Taille par defaut Role semantique SEO

<h1> 2em (~32px) Titre principal de la page Tres important

<h2> 1.5em (~24px) Titre de section principale Important

<h3> 1.17em (~19px) Sous-section Moyen

<h4> 1em (~16px) Groupe de contenu Faible

<h5> 0.83em (~13px) Detail de contenu Tres faible

<h6> 0.67em (~11px) Note ou detail mineur Negligeable

Regle d or : une seule balise <h1> par page. Ne pas sauter de niveaux (pas de h1 suivi directement de h4). Ne
pas choisir les titres pour leur taille mais pour leur sens semantique. Utilisez CSS pour modifier l apparence, pas
les balises de titre.
!

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 2 / 14
HTML5 Module 2 — Balises de texte et typographie par IARO

3 Paragraphe, retour a la ligne et separation

[Link]
<!-- Paragraphe : element de bloc, ajoute une marge avant/apres -->
<p>Ceci est un paragraphe. Le navigateur ajoute automatiquement
un espace avant et apres chaque paragraphe.</p>

<p>Deuxieme paragraphe. Meme si vous sautez plusieurs lignes

dans le code HTML, le navigateur n en affiche qu une.</p>

<!-- Retour a la ligne : balise void, ne cree pas de nouveau bloc -->
<p>Ligne 1<br>
Ligne 2<br>
Ligne 3</p>

<!-- Separateur horizontal : ligne de separation visuelle -->

<hr>

<!-- Espace insecable : evite le retour a la ligne entre deux mots -->
<p>M.&nbsp;Dupont est arrive.</p>

Eviter d utiliser <br> pour creer de l espace entre des blocs. Utilisez CSS (margin, padding) a la place. <br> sert
uniquement aux retours a la ligne intentionnels dans un flux de texte (adresses postales, poemes, paroles de
i chansons).

4 Mise en forme du texte — Gras, italique, importance

HTML5 distingue la mise en forme semantique (qui donne du sens) de la mise en forme purement visuelle. Il faut
toujours privilegier les balises semantiques.

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 3 / 14
HTML5 Module 2 — Balises de texte et typographie par IARO

Balise Rendu visuel Description et usage

<strong> Texte en gras Importance forte, semantique (SEO, lecteurs d ecran)

<em> Texte en italique Emphase, accentuation semantique du propos

<b> Texte en gras Gras visuel sans importance semantique particuliere

<i> Texte en italique Italique visuel, termes techniques, noms propres

<mark> Texte surligne jaune Mise en evidence, resultat de recherche

<small> Texte plus petit Mentions legales, copyright, notes de bas de page

<del> Texte barre Contenu supprime ou obsolete (historique)

<ins> Texte souligne Contenu insere ou ajoute recemment

<s> Texte barre Contenu inexact ou non pertinent (ex: prix barre)

<u> Texte souligne Annotation (erreur orthographe), eviter pour liens

[Link]
<!-- Semantique vs visuel -->
<strong>Important !</strong> <!-- semantique, utilise par SEO -->
<b>Mise en gras</b> <!-- visuel seulement -->
<em>Insistance sur ce mot</em> <!-- semantique -->
<i>Nom scientifique</i> <!-- visuel / convention -->

<!-- Combinaisons -->

<strong><em>Tres important et accentue</em></strong>

<!-- Mark, del, ins, s -->

<p>Prix normal : <del>50 EUR</del> Promo : <mark>35 EUR</mark></p>
<p>Ancienne version <del>v1</del> <ins>v2</ins> disponible</p>
<p>Ce produit est <s>disponible</s> en rupture de stock.</p>

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 4 / 14
HTML5 Module 2 — Balises de texte et typographie par IARO

5 Citations — blockquote, cite et q

HTML5 propose plusieurs elements pour citer des sources. La distinction entre citation en bloc (blockquote) et
citation inline (q) est importante pour la semantique et l accessibilite.

[Link]
<!-- Citation longue en bloc -->
<blockquote cite="[Link]
<p>Le seul moyen de faire du bon travail est d aimer ce que l on fait.</p>
<footer>— <cite>Steve Jobs</cite>, Stanford, 2005</footer>
</blockquote>

<!-- Citation courte en ligne -->

<p>Comme disait Einstein : <q>L imagination est plus importante
que le savoir.</q></p>

<!-- Titre d une oeuvre -->

<p>J ai lu <cite>Le Petit Prince</cite> d Antoine de Saint-Exupery.</p>
<p>Film : <cite>Inception</cite> de Christopher Nolan (2010).</p>

Balise Usage Rendu par defaut

<blockquote> Citation longue, plusieurs phrases, extrait Bloc indente

<q> Citation courte inline dans un paragraphe Guillemets auto

<cite> Titre d une oeuvre, film, livre, article Italique

6 Code et texte preformate — code, pre, kbd, samp, var

HTML5 propose plusieurs balises pour afficher du code informatique et du texte technique. Ces balises utilisent
par defaut une police a chasse fixe (monospace).

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 5 / 14
HTML5 Module 2 — Balises de texte et typographie par IARO

[Link]
<!-- Code inline : petit bout de code dans une phrase -->
<p>Utilisez la balise <code>&lt;p&gt;</code> pour les paragraphes.</p>

<!-- Bloc de code preformate : espaces et sauts de ligne preserves -->

<pre><code>
function saluer(nom) {
return "Bonjour " + nom;
}
[Link](saluer('IARO'));
</code></pre>

<!-- Saisie clavier -->

<p>Appuyez sur <kbd>Ctrl</kbd> + <kbd>S</kbd> pour sauvegarder.</p>

<!-- Sortie programme / resultat -->

<p>Resultat : <samp>Hello World</samp></p>

<!-- Variable mathematique ou de programmation -->

<p>La variable <var>x</var> represente la largeur.</p>

Balise Rendu visuel Description et usage

<code> [Link]() Code informatique inline dans du texte

<pre> Texte exact Texte preformate, preserve espaces et sauts ligne

<kbd> Ctrl + S Saisie clavier, raccourci, touche du clavier

<samp> Hello World Sortie ou resultat d un programme informatique

<var> x=5 Variable mathematique ou de programmation

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 6 / 14
HTML5 Module 2 — Balises de texte et typographie par IARO

7 Exposants et indices — sup et sub

Les balises sup (superscript) et sub (subscript) permettent d afficher du texte en exposant ou en indice. Elles sont
essentielles pour les formules mathematiques, les formules chimiques et les references bibliographiques.

[Link]
<!-- Exposant (superscript) -->
<p>E = mc²</p>
<p>Le 1^er janvier 2025</p>
<p>Selon les etudes^[1], le HTML5...</p>

<!-- Indice (subscript) -->

<p>L eau : H₂O</p>
<p>Le dioxyde de carbone : CO₂</p>
<p>Glucose : C₆H₁₂O₆</p>

<!-- Combinaison -->

<p>x₁² + x₂² = r²</p>

8 Abreviations et definitions — abbr et dfn

Ces deux balises ameliorent la comprehension et l accessibilite en explicitant les termes techniques, acronymes et
definitions directement dans le contenu.

[Link]
<!-- Abreviation : affiche une infobulle au survol -->
<abbr title="HyperText Markup Language">HTML</abbr>
<abbr title="Cascading Style Sheets">CSS</abbr>
<abbr title="World Wide Web Consortium">W3C</abbr>

<!-- Usage dans une phrase -->

<p>Le <abbr title="Document Object Model">DOM</abbr> est une
representation en arbre du document HTML.</p>

<!-- Definition : premiere occurrence d un terme defini -->

<p><dfn>Le HTML</dfn> est le langage de balisage standard du Web.</p>

<!-- Combinaison abbr + dfn -->

<p><dfn><abbr title="Artificial Intelligence">AI</abbr></dfn>
designe les systemes capables d imiter l intelligence humaine.</p>

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 7 / 14
HTML5 Module 2 — Balises de texte et typographie par IARO

La balise <abbr> avec l attribut title est particulierement importante pour l accessibilite : les lecteurs d ecran lisent
l expansion complete de l abreviation. C est une bonne pratique de toujours definir les acronymes a leur premiere
i apparition dans un texte.

9 Temps et dates — la balise time

La balise time permet de representer des dates et heures de maniere semantique. L attribut datetime contient la
valeur machine (format ISO 8601) tandis que le contenu visible peut etre en langage naturel.

[Link]
<!-- Date simple -->
<time datetime="2025-01-01">1er janvier 2025</time>

<!-- Heure -->

<time datetime="14:30">14h30</time>

<!-- Date et heure completes -->

<time datetime="2025-06-15T09:00:00">15 juin 2025 a 9h</time>

<!-- Duree -->

<time datetime="PT2H30M">2 heures 30 minutes</time>

<!-- Usage dans un article -->

<p>Publie le <time datetime="2025-03-20">20 mars 2025</time></p>
<article>
<h2>Cours HTML5</h2>
<p>Mis a jour : <time datetime="2025-04-01">1er avril 2025</time></p>
</article>

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 8 / 14
HTML5 Module 2 — Balises de texte et typographie par IARO

10 Elements avances — span, bdi, bdo, wbr

Ces elements ont des usages plus specifiques mais sont essentiels dans certaines situations, notamment pour l
internationalisation, le texte bidirectionnel et la gestion des retours a la ligne.

[Link]
<!-- span : conteneur inline neutre pour appliquer CSS ou JS -->
<p>Le prix est <span class="prix rouge">45 EUR</span>.</p>
<p><span id="compteur">0</span> articles dans le panier.</p>

<!-- bdi : isolation bidirectionnelle (texte de direction inconnue) -->

<p>Utilisateur : <bdi>■■■■■</bdi> a poste un commentaire.</p>
<p>Score de <bdi>Ahmed</bdi> : 100 points.</p>

<!-- bdo : surcharge de la direction du texte -->

<bdo dir="rtl">Texte affiche de droite a gauche</bdo>
<bdo dir="ltr">Left to right forced</bdo>

<!-- wbr : point de coupure optionnel pour les longs mots -->
<p>[Link]
<p>Lopadotemachoselachogaleokranioleipsano<wbr>drimhypotrimmatosilphio<wbr>paraomelitokatakechymeno</p>

Balise Rendu visuel Description et usage

<span> Conteneur neutre Conteneur inline sans semantique, pour CSS et JS

<bdi> Texte isole Isole un texte de direction inconnue (arabe, heb.)

<bdo> Texte inverse Force la direction du texte (rtl / ltr)

<wbr> Coupure opt. Indique ou le navigateur peut couper un long mot

11 Tableau complet — Toutes les balises de texte

Reference complete de toutes les balises de texte HTML5 avec leur rendu et usage.

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 9 / 14
HTML5 Module 2 — Balises de texte et typographie par IARO

Balise Rendu visuel Description et usage

<h1>-<h6> Titre principal... Titres de 6 niveaux, structurent le document

<p> Paragraphe Bloc de texte, le plus utilise en HTML

<br> Retour ligne Retour a la ligne dans un flux de texte

<hr> ---Ligne--- Separateur thematique horizontal

<strong> Gras semantique Importance forte, impacte le SEO

<em> Italique semant. Emphase, accentuation semantique

<b> Gras visuel Gras sans valeur semantique

<i> Italique visuel Termes techniques, expressions etrangeres

<mark> Surligne jaune Mise en evidence, resultats de recherche

<small> Petit texte Mentions legales, copyright, notes bas de page

<del> Texte barre Contenu supprime, historique des modifications

<ins> Texte souligne Contenu insere ou ajoute

<s> Barre (obsolete) Prix barre, information depassee

<u> Souligne Annotation, erreur orthographique

<blockquote> Citation bloc Citation longue avec source

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 10 / 14
HTML5 Module 2 — Balises de texte et typographie par IARO

Balise Rendu visuel Description et usage

<q> Citation inline Citation courte inline dans le texte

<cite> Titre oeuvre Titre d un livre, film, chanson

<code> code mono Code informatique inline

<pre> Preformate Texte avec espaces preserves

<kbd> Ctrl+S Touche clavier ou saisie

<samp> Hello World Sortie d un programme

<var> x=5 Variable mathematique ou de programmation

<sup> x^2 Exposant, reference, ordinal (1er)

<sub> H2O Indice, formule chimique

<abbr> HTML (tooltip) Abreviation avec expansion au survol

<dfn> Definition Premiere definition d un terme

<time> 1er jan. 2025 Date ou heure lisible par machine

<span> Neutre inline Conteneur inline sans semantique

<bdi> Texte isole Isolation bidirectionnelle pour texte RTL

<bdo> Texte inverse Direction du texte forcee (rtl/ltr)

<wbr> Coupure opt. Point de coupure optionnel pour longs mots

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 11 / 14
HTML5 Module 2 — Balises de texte et typographie par IARO

12 Bonnes pratiques typographiques HTML5

Pratique Recommandation

Un seul <h1> par page Le titre principal doit etre unique et pertinent (SEO)

Hierarchie des titres Ne jamais sauter de niveau (h1 > h2 > h3, pas h1 > h4)

strong vs b Preferer <strong> pour l importance semantique, <b> pour le style

em vs i Preferer <em> pour l emphase semantique, <i> pour le style

abbr avec title Toujours renseigner l attribut title sur <abbr>

time avec datetime Toujours inclure l attribut datetime en format ISO 8601

Eviter <br> excessif Utiliser CSS margin/padding pour les espacements

code dans pre Toujours imbriquer <code> dans <pre> pour les blocs de code

Pas de <u> pour les liens <u> peut etre confondu avec un lien hypertexte

Entites pour caracteres speciaux Utiliser &lt; &gt; &amp; au lieu des caracteres bruts

Semantique avant tout Choisir la balise selon son sens, pas son apparence

13 Exercice pratique — Article de blog complet

Analysez et reproduisez cet article de blog qui utilise toutes les balises du Module 2.

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 12 / 14
HTML5 Module 2 — Balises de texte et typographie par IARO

[Link]
<article>
<h1>Introduction au <abbr title='HyperText Markup Language'>HTML</abbr>5</h1>
<p>Publie le <time datetime="2025-04-01">1er avril 2025</time>
par <strong>Equipe IARO</strong></p>
<hr>
<h2>Qu est-ce que le HTML5 ?</h2>
<p>Le <dfn>HTML5</dfn> est la <em>cinquieme version</em> du langage
<abbr title='HyperText Markup Language'>HTML</abbr>.
Il apporte de <mark>nombreuses nouveautes</mark> par rapport
a ses predecesseurs.</p>
<h3>Formule magique</h3>
<p>E = mc² | H₂O | CO₂</p>
<h2>Exemple de code</h2>
<pre><code><!DOCTYPE html>
&lt;html lang='fr'&gt;
&lt;/html&gt;</code></pre>
<blockquote cite='[Link]
<p>Le Web est pour tout le monde.</p>
<footer>— <cite>Tim Berners-Lee</cite></footer>
</blockquote>
<p>Appuyez sur <kbd>Ctrl</kbd>+<kbd>U</kbd> pour voir le code.</p>
</article>

14 Resume du Module 2

Concept A retenir

Titres h1-h6 Un seul h1, hierarchie respectee, sens avant apparence

Bloc vs Inline Bloc = pleine largeur / Inline = dans le flux texte

strong / em Semantique (SEO, accessibilite) — preferer a b et i

b/i Visuel uniquement — sans valeur semantique

mark / del / ins Surlignage, suppression, insertion de contenu

blockquote / q Citations longues (bloc) et courtes (inline)

code / pre Code inline et blocs preformates

kbd / samp / var Clavier, sortie programme, variable

sup / sub Exposant (x2, 1er) et indice (H2O, CO2)

abbr / dfn Abreviations (+ title) et definitions

time Dates/heures avec attribut datetime ISO 8601

span Conteneur inline neutre pour CSS et JavaScript

bdi / bdo / wbr Direction texte et coupure optionnelle

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 13 / 14
HTML5 Module 2 — Balises de texte et typographie par IARO

Fin du Module 2 — Prochain : Module 3 : Semantique HTML5

IARO | Cours de Developpement Web | HTML5 - Module 2 : Balises de texte et typographie Page 14 / 14