Cheatsheet HTML

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.

Mise en forme inline

Un élément dit « en ligne » ou inline prend autant d'espace que nécessaire. Ces éléments sont disposés horizontalement les uns à la suite des autres, à la façon des mots dans une phrase ou des livres dans une bibliothèque.

Utilisation	Fragment de code	Résultat
Un lien simple	<a href="https://developer.mozilla.org">Un lien vers MDN</a>	Un lien vers MDN
Une image simple	<img src="https://developer.mozilla.org/media/img/mdn-logo-sm.png" />
Un texte avec emphase	<em>Je suis distingué</em>	Je suis distingué
Un texte marqué comme important	<strong>Je suis important</strong>	Je suis important
Un texte mis en avant	<mark>Remarquez-moi</mark>	Remarquez-moi
Barrer du texte qui n'est plus pertinent	<s>Je ne suis plus d'actualité ou plus pertinent</s>	Je ne suis plus d'actualité ou plus pertinent
Souligner pour ajouter une annotation non-textuelle	Ceci est <u>mal orthographié</u>	Ceci est mal orthographié
Du texte qui doit être affiché en indice	H<sub>2</sub>O	H2O
Du texte qui doit être affiché en exposant	M<sup>me</sup> de Bovary	Mme de Bovary
Une citation dans le cours du texte	Il a dit : <q>Je suis ton père.</q>	Il a dit : Je suis ton père.
Un saut de ligne	Ligne 1 <br/> Ligne 2	Ligne 1 Ligne 2
Du code informatique (code « machine »)	<code>System.print.File("coucou")</code>	System.print.File("coucou")
Un fichier audio intégré	<audio controls src="https://mdn.mozillademos.org/files/2587/AudioTest%20%281%29.mp3">L'élément <code>audio</code> n'est pas supporté.</audio>
Un fichier vidéo intégré	<video controls src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4">L'élément <code>video</code> n'est pas supporté.</video>

Mise en forme block

Les éléments de bloc (block en anglais) s'organisent différemment. Ils prennent toute la largeur de la page. Étant donné qu'ils prennent toute cette largeur, on ne peut donc pas les disposer côté à côte horizontalement. Leur organisation sera plutôt celle de paragraphes dans une dissertation ou celle d'étages dans un immeuble.