Texte et mise en forme en HTML

Essayer de coder ← Retour aux sujets

Titres et paragraphes

h1–h6 · p

Les titres forment le plan de la page : un seul <h1>, puis des <h2>, <h3>… sans sauter de niveau.

Titre principal (un seul par page)

Sous-titres, du plus important au moins important

Un paragraphe

<br>

Retour à la ligne à l'intérieur d'un paragraphe

<hr>

Séparation thématique (un trait)

article.html

<h1>Le tri par sélection</h1>
<p>On cherche le minimum, puis on l'échange avec le premier élément.</p>
<h2>Complexité</h2>
<p>Quadratique : <strong>O(n²)</strong> comparaisons.</p>
<p>Adresse du lycée :<br>12 rue des Écoles<br>75000 Paris</p>

Rendu

Un grand titre, un paragraphe, un sous-titre « Complexité », puis un paragraphe et une adresse écrite sur trois lignes.

Mise en valeur

strong · em

On choisit la balise d'après le sens, pas d'après l'apparence : c'est le CSS qui décide de l'aspect.

<strong>important</strong>

Importance forte (gras par défaut)

<em>insistance</em>

Emphase, ton de la voix (italique par défaut)

<mark>surligné</mark>

Passage mis en évidence

Code informatique (police à chasse fixe)

Exposant / indice (c², H₂O)

Abréviation expliquée au survol

emphase.html

<p>L'eau s'écrit H<sub>2</sub>O et l'aire d'un carré vaut c<sup>2</sup>.</p>
<p><strong>Attention :</strong> la variable <code>i</code> commence à <em>zéro</em>.</p>
<p>Le <abbr title="Système d'exploitation">SE</abbr> gère les <mark>processus</mark>.</p>

Rendu

H₂O et c² avec indice et exposant ; « Attention : » en gras, i en police de code, zéro en italique ; « processus » surligné.

✏️ Le cours : donner du sens au texte

Le texte est le cœur d'une page. HTML fournit des balises pour lui donner du sens : titres, paragraphes, citations, code. Choisir la bonne balise aide les lecteurs d'écran, les moteurs de recherche, et toi-même quand tu relis ton code : l'apparence, elle, relève du CSS.

Les titres dessinent le plan de la page

<h1> à <h6> sont des niveaux de titre, pas des tailles de police. Un document bien construit a un seul <h1> (le sujet de la page), puis des <h2> pour les grandes parties, des <h3> pour leurs sous-parties, sans jamais sauter de niveau. Les lecteurs d'écran permettent de naviguer de titre en titre : un plan cohérent est un vrai outil d'accessibilité.

h1  Cours NSI
  h2  Chapitre 1 : Complexité
  h2  Chapitre 2 : Recherche
    h3  Séquentielle
    h3  Dichotomique

Éléments de bloc et éléments en ligne

Les éléments de bloc occupent toute la largeur et commencent sur une nouvelle ligne ; les éléments en ligne s'insèrent dans le fil du texte. <div> (bloc) et <span> (en ligne) sont des conteneurs neutres, sans sens particulier, utiles surtout pour appliquer du CSS.

Type	Comportement	Exemples
bloc	nouvelle ligne avant et après, pleine largeur	`<div>` `<p>` `<h1>`…`<h6>` `<ul>` `<table>` `<form>` `<section>`
en ligne	reste dans la ligne de texte	`<span>` `<a>` `<strong>` `<em>` `<code>` `<img>`

blocs.html

<div>
  <p>Un paragraphe est un bloc.</p>
  <p>Ce texte contient un <span>élément en ligne</span> et <a href="#">un lien</a>.</p>
</div>

Les espaces sont fusionnées

Dans le code source, une suite d'espaces, de tabulations et de sauts de ligne compte pour une seule espace à l'affichage. Pour forcer un saut de ligne, on utilise <br> ; pour conserver la mise en forme d'un bloc de code, <pre> ; pour une espace qui ne se coupe pas,  .

espaces.html

<p>Plusieurs      espaces
et sauts de ligne      sont fusionnés.</p>
<pre>
def carre(x):
    return x * x
</pre>

Rendu

Plusieurs espaces et sauts de ligne sont fusionnés.
def carre(x):
    return x * x

Citations, code et touches

<blockquote> introduit une citation longue, <q> une citation courte au milieu d'une phrase. <code> met en forme du code ; pour plusieurs lignes, on l'imbrique dans <pre>. <kbd> désigne une touche du clavier.

citation.html

<blockquote>
  <p>Un algorithme est une suite finie d'instructions qui résout un problème.</p>
</blockquote>
<p>Dans le terminal, tape <kbd>Ctrl</kbd> + <kbd>C</kbd> pour arrêter un programme.</p>
<pre><code>for i in range(3):
    print(i)</code></pre>

strong et em plutôt que b et i

<strong> et <em> portent un sens (importance, insistance) que les lecteurs d'écran peuvent restituer. <b> et <i> n'indiquent qu'un style (un mot étranger, un nom de produit). Pour mettre simplement en gras ou en italique, utilise CSS (font-weight, font-style), jamais les balises <font>, <center> ou <u> détournées, devenues obsolètes ou trompeuses.

Les entités à connaître

Entité	Résultat	Usage
`<` `>`	< >	afficher des chevrons sans ouvrir une balise
`&`	&	le caractère « et commercial »
`"`	"	un guillemet dans une valeur d'attribut
` `	(espace)	espace insécable (avant `:` `?` `!` en français, entre un nombre et son unité)
`©` `€` `…`	© € …	symboles courants

⚠️ Erreurs fréquentes

Utiliser un titre pour grossir du texte

À éviter

faux.html

<h3>Ce paragraphe est en gros</h3>   <!-- détourne un titre -->

Correct

correct.html

<p class="grand">Ce paragraphe est en gros</p>   <!-- la taille se règle en CSS -->

Espacer avec des <br> à répétition

À éviter

faux.html

<p>Premier</p><br><br><br><p>Second</p>   <!-- espace "à la main" -->

Correct

correct.html

<p>Premier</p><p>Second</p>   <!-- l'espacement se règle en CSS (margin) -->

Sauter des niveaux de titre

Passer d'un <h2> à un <h4>, ou écrire plusieurs <h1> pour « faire joli », casse le plan de la page pour les lecteurs d'écran et pour le référencement.

Compter sur les espaces du code source

Aligner des mots avec des espaces ne fonctionne pas : elles sont fusionnées. Utilise des éléments de mise en page (tableau pour des données, CSS pour l'alignement) ou <pre> pour du texte déjà aligné.

Imbriquer un <p> dans un <p>

Un paragraphe ne peut pas en contenir un autre : le navigateur ferme le premier tout seul, ce qui produit une structure différente de celle écrite. Pour des paragraphes à l'intérieur d'un bloc, utilise un <div>, un <section> ou un <blockquote>.

Mettre du texte « nu » dans le body

Du texte sans balise fonctionne, mais n'a aucune structure : entoure-le d'un <p>, d'un titre ou d'une liste selon son rôle.

📋 Aide-mémoire

Un seul <h1>, puis <h2>, <h3>… dans l'ordre ; les titres sont un plan, pas une taille.
Bloc : div, p, h1–h6, ul, table… ; en ligne : span, a, strong, em, code, img.
<strong> (important), <em> (insistance), <mark>, <code>, <kbd>, <sub>, <sup>, <abbr>.
Espaces et sauts de ligne du source fusionnés : <br>, <pre>,   pour les forcer.
<blockquote> citation longue, <q> citation courte, <pre><code> bloc de code.