Commentaires HTML, sauts de ligne et espaces, avec rendu en direct | We.Inc
Comment écrire des commentaires HTML et CSS, ajouter des sauts de ligne et des espaces supplémentaires, et empêcher les espaces de fusionner. Chaque exemple est modifiable, avec le rendu affiché à côté.
Commentaires HTML, sauts de ligne et espaces
Écrivez un commentaire HTML sous la forme <!-- note --> ; les navigateurs ignorent tout ce qui se trouve entre les marqueurs. Forcez un saut de ligne dans un texte avec <br>, et commencez un nouveau paragraphe avec <p>. Les navigateurs réduisent les suites d'espaces à une seule, alors utilisez pour un espace fixe unique, ou la propriété CSS white-space pour conserver l'espacement que vous avez saisi.
Aide-mémoire
Vous voulez
Utilisez
Remarques
Une note en HTML
<!-- note -->
Visible dans le code source, jamais à l'écran
Une note en CSS
La seule forme de commentaire en CSS
Un saut de ligne dans une ligne de texte
<br>
Adresses, poèmes, paroles
Un nouveau bloc de texte
Donne un espacement que vous pouvez styliser
Un espace qui ne fusionne ni ne passe à la ligne
Entre un nombre et son unité
Conserver chaque espace et retour à la ligne
white-space: pre-wrap
Les longues lignes passent toujours à la ligne
Chaque cas de cette page montre le code et ce que le navigateur affiche réellement. Modifiez n'importe quel exemple et le résultat se met à jour, pour comprendre pourquoi un espace a disparu ou pourquoi un saut de ligne n'a rien fait avant de modifier votre propre page.
Trouvez le cas qui correspond à votre problème dans les sections ci-dessous : commentaires, sauts de ligne, espaces ou propriété white-space.
Modifiez le code à gauche. Le résultat à droite est un vrai rendu navigateur dans un cadre isolé, avec les scripts désactivés.
Copiez dans votre page la version qui fait ce dont vous avez besoin.
Si l'espacement semble toujours incorrect, consultez les dix erreurs vers la fin de la page ; la plupart des problèmes d'espaces fusionnés en font partie.
Utilisez les commentaires pour expliquer pourquoi le balisage est tel qu'il est, pas ce qu'il est. Un commentaire <!-- nav --> au-dessus d'un élément nav n'apporte rien.
Retirez les commentaires du HTML de production s'ils contiennent des notes internes, car n'importe qui peut les lire avec Afficher la source.
Préférez une margin ou un gap CSS à une pile de balises <br>. L'espacement en CSS peut varier selon la taille d'écran ; une rangée de sauts de ligne, non.
Placez entre des valeurs qui doivent rester sur une même ligne, comme 10 km ou Mr. Khan, au lieu de l'utiliser pour l'indentation.
Questions fréquentes
Comment mettre plusieurs lignes de HTML en commentaire ?
Placez <!-- avant la première ligne et --> après la dernière. Tout ce qui se trouve entre les deux, sur autant de lignes que vous voulez, est ignoré. Vous ne pouvez pas imbriquer un commentaire dans un autre, car le premier --> termine tout le commentaire et le reste s'affiche comme du texte.
Pourquoi mon HTML ignore-t-il les espaces supplémentaires ?
Le HTML traite toute suite d'espaces, de tabulations et de retours à la ligne dans un texte normal comme un seul espace. Cela vous permet d'indenter librement votre code source sans modifier la page. Pour conserver plusieurs espaces, utilisez des entités ou définissez white-space: pre-wrap sur l'élément en CSS.
Faut-il écrire <br>, <br/> ou <br /> ?
Les trois fonctionnent en HTML. <br> est la forme HTML simple. La barre oblique est facultative et ignorée par l'analyseur HTML, mais le JSX de React exige la forme auto-fermante <br />.
Puis-je utiliser des commentaires // en CSS ?
Non. Le CSS ne comprend que /* */. Une ligne commençant par // n'est pas un commentaire : l'analyseur la traite comme du code invalide et rejette la déclaration, voire toute la règle qui suit, ce qui explique pourquoi le bug peut sembler aléatoire.
Les commentaires conditionnels fonctionnent-ils encore ?
Non. Les commentaires conditionnels comme <!--[if IE]> n'étaient lus que par les anciennes versions d'Internet Explorer et ont été abandonnés dans Internet Explorer 10. Tous les navigateurs actuels les traitent comme des commentaires normaux, donc le balisage qu'ils contiennent n'apparaît jamais.
Quand un saut de ligne est le bon outil
Un <br> a sa place là où le saut de ligne fait partie du contenu lui-même : les lignes d'une adresse postale, le vers d'un poème, un bloc de signature. À ces endroits, un lecteur conserverait le saut s'il recopiait le texte à la main.
Partout ailleurs, le saut relève de la mise en page, et la mise en page relève du CSS. Deux paragraphes séparés par <br><br> rendent bien jusqu'à ce que le design demande plus d'espace sur ordinateur et moins sur téléphone. Deux éléments <p> avec une margin peuvent changer à n'importe quel breakpoint, et les lecteurs d'écran les annoncent comme des paragraphes distincts.
Pourquoi les espaces fusionnent, et les quatre façons de l'éviter
Pour un texte normal, le navigateur applique par défaut white-space: normal, qui fusionne chaque suite d'espaces blancs en un seul espace et passe à la ligne là où c'est nécessaire. C'est pourquoi l'indentation de votre code source n'apparaît jamais à l'écran.
Pour conserver les espaces, vous pouvez utiliser des entités ( et les plus larges   et  ), un élément <pre>, ou l'une des valeurs de white-space pre, pre-wrap, pre-line et break-spaces. Les entités conviennent à un ou deux espaces fixes ; les valeurs CSS conviennent à des blocs de texte entiers comme du code, des poèmes ou des notes saisies par les utilisateurs.
Les commentaires sont publics
Les commentaires HTML sont envoyés à chaque visiteur. Ils n'apparaissent pas sur la page, mais ils sont dans le code source, dans les copies enregistrées et dans ce que téléchargent les moteurs de recherche. Ne laissez jamais de mots de passe, d'adresses internes, de noms de clients ou de notes TODO sur des failles de sécurité dans un commentaire.
La plupart des outils de build peuvent retirer les commentaires pour vous. Vite et les bundlers similaires suppriment les commentaires JavaScript et CSS lors de la minification ; les commentaires HTML de votre fichier index peuvent nécessiter une étape de minification HTML si vous voulez les faire disparaître.
Commentaires HTML
Un commentaire commence par <!-- et se termine par -->. Il peut se placer entre des éléments ou envelopper des blocs entiers pour les désactiver pendant vos tests.
Commentaires sur une ligne et sur plusieurs lignes
Seuls les deux paragraphes sont affichés. Les commentaires, y compris celui qui enveloppe un paragraphe entier, ne laissent aucune trace à l'écran.
Pourquoi les commentaires ne peuvent pas être imbriqués
Le premier --> ferme trop tôt le commentaire extérieur, donc le texte restant et le --> final apparaissent sur la page.
Les anciens commentaires conditionnels ne font plus rien
Seuls Internet Explorer 9 et les versions antérieures les lisent. Les navigateurs actuels ignorent complètement l'avertissement, vous pouvez donc supprimer cette vieille astuce sans risque.
Sauts de ligne : <br>, <p> ou margin CSS
Lequel utiliser
Élément
Signification
À utiliser pour
<br>
Un saut dans un même bloc de texte
Adresses, poèmes, paroles
Un paragraphe distinct
Toute nouvelle idée ou tout nouveau bloc de texte
CSS margin or gap
Espace entre les blocs
Espacement de mise en page qui varie selon la taille d'écran
<hr>
Un changement de sujet
Une rupture thématique entre sections
Une adresse avec <br>
Les sauts font partie de l'adresse, donc <br> est ici le bon choix.
Balises <br> empilées contre paragraphes avec une margin
Les deux se ressemblent, mais la seconde version contient de vrais paragraphes et un espacement modifiable à un seul endroit.
Ajouter des espaces : les entités
Entités d'espace
Entité
Caractère
Largeur
Usage courant
U+00A0 espace insécable
Espace normal, jamais de retour à la ligne
10 kg, page 3
 
U+2002 espace demi-cadratin
Un demi-em
Espacements dans des listes ou des menus
 
U+2003 espace cadratin
Un em
Indenter une seule ligne
 
U+2009 espace fine
Étroite
Entre groupes de chiffres dans certains styles
Garder une valeur et son unité ensemble
Dans la boîte étroite, la première ligne peut passer à la ligne entre 50 et km. L'espace insécable garde la seconde paire ensemble.
Espaces fusionnés contre entités
Cinq espaces saisis deviennent un seul. Chaque entité conserve sa propre largeur.
Conserver espaces et retours à la ligne avec CSS white-space
Valeurs de white-space
Valeur
Espaces
Retours à la ligne
Coupe les longues lignes
Fusionnés
Fusionnés
Oui
Fusionnés
Fusionnés
Non
Conservés
Conservés
Non
Conservés
Conservés
Oui
Fusionnés
Conservés
Oui
Conservés, avec coupure possible
Conservés
Oui
pre, pre-wrap et pre-line côte à côte
Le même texte dans trois boîtes. pre conserve tout mais déborde du bord, pre-wrap conserve tout et passe à la ligne, pre-line ne conserve que les retours à la ligne.
Afficher un texte saisi dans un formulaire
Les notes issues d'un textarea gardent leurs retours à la ligne lorsqu'elles sont affichées avec pre-line, sans risque de transformer leur texte en HTML.
Commentaires CSS, et pourquoi // casse le CSS
La couleur mise en commentaire est ignorée et c'est le vert qui s'applique.
Ce que // fait à la règle suivante
La ligne // est lue comme faisant partie d'un sélecteur, donc toute la règle .warning est rejetée et le texte reste noir.
10 erreurs courantes
Erreurs et corrections
Erreur
Ce qui se passe
Correction
Saisir plusieurs espaces entre les mots
Ils fusionnent en un seul
or white-space: pre-wrap
Utiliser <br><br> pour espacer les paragraphes
L'espacement ne peut pas s'adapter à la taille d'écran
Des éléments <p> séparés et une margin
Imbriquer des commentaires
Le texte après le --> intérieur s'affiche sur la page
Utilisez un seul commentaire, ou supprimez le bloc
Écrire des commentaires // en CSS
La règle suivante est ignorée
Utilisez /* */
Écrire <!-- --> dans un fichier JavaScript
Erreur de syntaxe ou comportement étrange
Utilisez // ou /* */ en JS
Laisser des notes privées dans les commentaires HTML
N'importe qui peut les lire avec Afficher la source
Supprimez-les ou retirez les commentaires au build
Indenter du texte avec des rangées de
Casse sur les petits écrans
padding-left or text-indent
Deux tirets dans un commentaire
Les anciens validateurs le signalent ; c'est peu lisible
Évitez -- dans le texte d'un commentaire
Écrire <br> sans barre oblique en JSX
Le compilateur JSX signale une erreur
Écrivez <br /> en React
S'attendre à voir les retours à la ligne d'un textarea