Fiche de synthèse HTML pour la syntaxe et les tâches courantes

Lorsqu'on utilise HTML, une antisèche, une page rapide et récapitulative (cheatsheet) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une documentation HTML exhaustive ainsi que différents tutoriels HTML détaillés. Toutefois, dans la plupart des cas, il suffit juste d'une rapide vérification afin de pouvoir continuer. Cet article, sous la forme d'une antisèche synthétique, est là pour fournir des exemples de codes concis pour les usages les plus fréquents des éléments les plus utilisés.

Note : Les balises HTML doivent en premier lieu être utilisées pour leur sémantique et non pour leur apparence. Il est toujours possible de modifier la mise en forme d'une balise donnée grâce à CSS. Aussi, quand vous utilisez HTML, soyez concentré-e sur la signification plutôt que sur l'apparence finale.

Éléments en ligne

Un élément est une partie d'une page web. Certains éléments sont agissent comme des conteneurs : ils sont grands et contiennent de plus petits éléments. Certains éléments sont plus petits et sont imbriqués dans des éléments plus grands. Par défaut les éléments « en ligne » apparaissent les uns à côté des autres sur une page web. Ils prennent autant de largeur que nécessaire sur une page et s'organisent horizontalement à la façon des mots dans une phrase ou des livres dans une bibliothèque. Tous les éléments en ligne peuvent être placés à l'intérieur de l'élément <body>.

Éléments en ligne : usage et exemples
Usage	Élément	Exemple
Un lien	`<a>`	html `<a href="https://example.org"> Un lien vers example.org</a>.` [フレーム]
Une image	`<img>`	html `<img src="beast.png" width="25" />` [フレーム]
Un conteneur en ligne	`<span>`	html `Utilisé pour grouper des éléments, par exemple pour <span style="color:blue">les mettre en forme</span>.` [フレーム]
Emphase du texte	`<em>`	html `<em>La classe non ?</em>.` [フレーム]
Texte idiomatique	`<i>`	html `Marque la phrase <i>généralement en italique</i>.` [フレーム]
Texte d'attention	`<b>`	html `Met en avant un <b>mot ou une phrase d'une certaine importance</b>.` [フレーム]
Texte d'importance	`<strong>`	html `<strong>Ce contenu est important !</strong>` [フレーム]
Marquer du texte	`<mark>`	html `<mark>Vous me voyez ?</mark>` [フレーム]
Texte barré	`<s>`	html `<s>Je ne suis plus pertinent.</s>` [フレーム]
Mise en indice	`<sub>`	html `H<sub>2</sub>O` [フレーム]
Texte de commentaire	`<small>`	html `Utilisé pour représenter <small>les petites notes </small> d'un document.` [フレーム]
Adresse	`<address>`	html `<address>15 Rue du Bourg</address>` [フレーム]
Citation textuelle	`<cite>`	html `Pour plus d'informations sur les monstres, voir <cite>Le monstrueux livre des monstres</cite>.` [フレーム]
Mise en exposant	`<sup>`	html `x<sup>2</sup>` [フレーム]
Citation en ligne	`<q>`	html `<q>Toi aussi mon fils ?</q>, a-t-il dit.` [フレーム]
Un saut de ligne	`<br>`	html `Ligne 1<br>Ligne 2` [フレーム]
Un saut de ligne possible	`<wbr>`	html `<div style="width: 200px"> Llanfair<wbr>pwllgwyngyllgogerychwyrngogogoch. </div>` [フレーム]
Date	`<time>`	html `Utilisé pour mettre en forme la date. Par exemple : <time datetime="2020-05-24" pubdate> Publié le 24 mai 2020</time>.` [フレーム]
Code	`<code>`	html `Ce texte est au format normal, mais <code>celui-ci représente du code</code>.` [フレーム]
Audio	`<audio>`	html `<audio controls="controls"> <source="t-rex-roar.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge audio. </audio>` [フレーム]
Video	`<video>`	html `<video controls width="250" src="https://archive.org/download/ElephantsDream/ed_hd.ogv" > L'élément <code>video</code> n'est pas pris en charge. </video>` [フレーム]

Éléments de bloc

Les éléments de bloc, en revanche, occupent toutes la largeur de la page. Ils occupent une ligne entière et ne sont pas apposés les uns à côtés des autres. Ils s'empilent plutôt à l'instar des paragraphes dans un texte.

Note : Parce que cette feuille de triche est limitée à quelques éléments représentant des structures spécifiques ou ayant une sémantique particulière, l'élément <div> n'est pas inclus intentionnellement — car l'élément div ne représente rien et n'a pas de sémantique particulière.

Usage	Élément	Exemple
Un paragraphe	`<p>`	html `<p>Je suis un paragraphe</p> <p>Et un autre paragraph</p>` [フレーム]
Une citation étendue	`<blockquote>`	html `Ils sont alors dit : <blockquote>L'élément blockquote indique une citation étendue.</blockquote>` [フレーム]
Information supplémentaire	`<details>`	html `<details> <summary>Anti-sèche HTML</summary> <p>Éléments en ligne</p> <p>Éléments de bloc</p> </details>` [フレーム]
Une liste non-ordonnée	`<ul>`	html `<ul> <li>Je suis un élément de liste</li> <li>Et moi un autre</li> </ul>` [フレーム]
Une liste ordonnée	`<ol>`	html `<ol> <li>Je suis le premier élément</li> <li>Et moi le deuxième</li> </ol>` [フレーム]
Une liste de définitions	`<dl>`	html `<dl> <dt>Un terme</dt> <dd>La définition du terme</dd> <dt>Un autre terme</dt> <dd>La définition d'un autre terme</dd> </dl>` [フレーム]
Un séparateur horizontal	`<hr>`	html `avant<hr>après` [フレーム]
Un titre	<h1>-<h6>	html `<h1> Titre de niveau 1 </h1> <h2> Titre de niveau 2 </h2> <h3> Titre de niveau 3 </h3> <h4> Titre de niveau 4 </h4> <h5> Titre de niveau 5 </h5> <h6> Titre de niveau 6 </h6>` [フレーム]

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨3 oct. 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content