Comments and neat nesting · Commentaires et enchaînement soigné
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Cette page nécessite un navigateur récent (avec support SharedArrayBuffer). Veuillez mettre à jour Chrome, Edge, Firefox ou Safari vers la dernière version.
English
Comments
- A comment is a note for you, not for the reader.
- The browser ignores it — it never shows on the page.
- Write it like this:
<!-- this is a comment -->.
Français
Commentaires
- Un commentaire est une note pour vous, pas pour le lecteur.
- Le navigateur l'ignore — il n'apparaît jamais sur la page.
- Écrivez-le ainsi :
<!-- this is a comment -->.
<!-- The header goes here -->
<h1>Welcome</h1>
<!-- TODO: add a photo below -->
English
Tags go inside tags
- HTML tags nest: one pair can sit inside another.
- A
<div>is a plain box you can put other things in. - Indent the inside tags a little, so the nesting is easy to read.
Français
Les balises sont insérées dans les balises
- Les balises HTML s'emboîtent : une paire peut se trouver à l'intérieur d'une autre.
- Une balise
<div>est une boîte simple où vous pouvez placer d'autres choses. - Indentez les balises intérieures un peu, pour que l'emboîtement soit facile à lire.
<div>
<h2>My card</h2>
<p>Some text inside the box.</p>
</div>
English
Common mistakes
- Tags must nest, not overlap:
<b><i>x</i></b>, never<b><i>x</b></i>. - A comment is
<!-- ... -->and is ignored by the browser.
Français
Erreurs courantes
- Les balises doivent s'emboîter, pas se chevaucher :
<b><i>x</i></b>, jamais<b><i>x</b></i>. - Un commentaire est
<!-- ... -->et est ignoré par le navigateur.
English
Now you try
- Comments help you stay organised; nesting builds structure.
- Leave a comment, then nest a paragraph inside a
<div>.
Français
À vous maintenant
- Les commentaires vous aident à rester organisé ; l'emboîtement crée une structure.
- Laissez un commentaire, puis emboîtez un paragraphe à l'intérieur d'une balise
<div>.
Explore · Explorer
Neat nesting = the tree · Enchaînement soigné = l'arbre
Indentation in your HTML mirrors the parent/child tree. · La indentation dans votre HTML reflète l'arbre parent/enfant.
Leave a note for yourself. Add a comment, like <!-- TODO: add a photo -->. · Laissez une note pour vous-même. Ajoutez un commentaire, comme <!-- TODO: add a photo -->.
Put the paragraph inside a box. Wrap it in a <div> … </div>. · Mettez le paragraphe dans une boîte. Enveloppez-le dans une balise <div> … </div>.