Code informatique HTML

Les tutoriels et la documentation montrent souvent des commandes, des noms de propriétés et des extraits HTML. Si vous collez ce texte dans un paragraphe normal, le navigateur peut réduire les espaces et traiter < comme le début d’une vraie balise. HTML fournit des éléments destinés au texte informatique pour que les exemples restent lisibles et sûrs. Cette session vous aide à choisir l’élément adapté à chaque rôle : un jeton court dans une phrase, un bloc multiligne, une touche que l’utilisateur appuie, ou une sortie d’exemple d’un programme. Séparer ces rôles rend les pages d’explication plus claires pour les lecteurs et les outils d’assistance, et évite l’erreur classique où l’exemple devient des éléments actifs dans le document.

Que sont les éléments de code informatique ?

Ces éléments marquent un texte qui représente du code, une saisie clavier ou une sortie de programme — pas de la prose ordinaire. Ils aident le navigateur à choisir une police par défaut adaptée (souvent à chasse fixe pour code et pre) et indiquent aux aides techniques que le passage est lié à l’informatique. Vous écrivez toujours les caractères vous-même ; les balises apportent du sens et, avec pre, conservent la mise en page. Elles ne changent pas la logique derrière la page ; leur rôle est sémantique et présentationnel. Si vous marquez chaque mot technique avec code sans besoin, vous troublez le lecteur ; si vous laissez du code multiligne sans pre, l’indentation que vous vouliez montrer peut disparaître.

Réponse directe

Utilisez code pour un court extrait dans une phrase. Utilisez pre lorsque espaces et sauts de ligne doivent rester. Un schéma de bloc courant est <pre><code>...</code></pre>. Marquez les touches avec kbd et une sortie d’exemple avec samp lorsque ces rôles sont réels. Quand l’exemple lui-même est du HTML, écrivez < et > au lieu de < et > bruts pour que le navigateur ne construise pas d’éléments actifs par accident. Cette habitude simple protège les pages de tutoriel : le lecteur voit les caractères que vous vouliez montrer, pas un paragraphe créé par erreur au milieu de l’exemple.

Les éléments en un coup d’œil

Code en ligne

Lorsque vous citez un jeton court dans une phrase, enveloppez-le dans code. Le mot reste distinct visuellement sans imposer un bloc entier. Ce schéma convient aux noms de propriétés, aux commandes courtes et aux noms de fonctions au milieu de l’explication. Ne marquez pas chaque mot technique du paragraphe ; réservez code aux jetons que le lecteur doit repérer rapidement. La mise en évidence visuelle vient du sens du balisage, pas d’un style décoratif inventé pour l’esthétique seule.

Lecture de l’exemple

• La phrase est un texte de paragraphe normal
• Seul le nom de propriété est dans code
• Le lecteur peut repérer le jeton technique rapidement
• Ce n’est pas une liste multiligne — pour cela, utilisez pre
• La police par défaut est souvent à chasse fixe, mais le sens compte plus que l’apparence seule
• Vous pouvez répéter plusieurs éléments code dans le même paragraphe si vous citez plusieurs jetons

Blocs avec pre et code

pre signifie préformaté : espaces et sauts de ligne restent à peu près comme vous les avez tapés. Imbriquer code dans pre est un schéma clair pour un bloc de code. Dans les exemples HTML, encodez les chevrons. Sans pre, les règles normales d’espaces blancs de HTML peuvent aplatir indentations et lignes en une seule ligne dense. La combinaison indique clairement aux lecteurs et aux outils que le contenu est du code avec la mise en page conservée.

Pourquoi l’encodage compte

Si vous écrivez un <p> brut dans la page du tutoriel, le navigateur peut créer un vrai paragraphe au lieu d’afficher les caractères <p>. Encoder en <p> affiche l’exemple en sécurité. La session Entités approfondit les références de caractères ; ici, vous n’avez besoin que de l’habitude des chevrons dans les démos HTML. Collez une fois une balise brute, rechargez, puis encodez : la différence apparaît aussitôt et se retient mieux qu’une théorie seule. L’encodage concerne le texte d’exemple dans votre page, pas le langage HTML que vous apprenez.

Saisie clavier et sortie d’exemple

Utilisez kbd lorsque vous décrivez des touches que l’utilisateur appuie. Utilisez samp lorsque vous montrez une sortie d’exemple d’un programme ou d’une commande. Restez honnête : ne marquez pas des mots ordinaires avec kbd seulement pour un aspect à chasse fixe. Si le texte est un nom de propriété CSS, code convient mieux ; s’il s’agit d’un raccourci clavier, kbd est le bon choix. Cette séparation sémantique rend la documentation plus claire et aide les lecteurs d’écran à comprendre le type de contenu.

Pratique dans l’éditeur

1. Écrivez une phrase qui mentionne la propriété font-size dans code.
2. Ajoutez un bloc pre+code avec deux courtes lignes HTML en < et >.
3. Ajoutez une ligne de conseil avec kbd pour un raccourci d’enregistrement.
4. Optionnel : une ligne samp pour une sortie de commande fictive.
5. Enregistrez et ouvrez — confirmez que les espaces dans pre restent et que les balises encodées s’affichent comme du texte.
6. Collez temporairement un <div> brut dans le bloc sans encodage, rechargez, observez le problème, puis encodez-le.
7. Relisez le paragraphe : chaque kbd représente-t-il une vraie touche ? La prose normale est-elle restée hors de pre ?
   Suivez les étapes dans l’ordre ; la sixième rend tangible le risque des balises brutes. Si les indentations disparaissent, vérifiez que le bloc est dans pre et que vous n’avez pas fermé la balise trop tôt. Si une section ou un paragraphe apparaît au milieu de l’exemple, il manque presque toujours l’encodage.

Erreurs qui cassent les exemples

• Mettre du code multiligne seulement dans code sans pre — sauts de ligne et indentation peuvent s’effondrer
• Coller un <div> ou un <p> brut sans encodage — cela devient un élément actif
• Utiliser pre pour de longs articles de prose normale (c’est pour le texte informatique préformaté, pas pour des essais)
• Marquer chaque mot technique avec kbd alors que ce n’est pas une saisie clavier
• Oublier de fermer pre ou code de sorte que le texte suivant reste coincé dans le style préformaté
• Compter seulement sur l’aspect à chasse fixe sans choisir l’élément selon le sens
• Encoder certains chevrons et en laisser d’autres bruts dans le même exemple — une partie texte, une partie balises actives

Résumé

• code marque un court texte informatique en ligne
• pre conserve espaces et sauts de ligne pour les blocs
• Combiner pre et code est un schéma multiligne courant
• Encodez < et > dans les exemples HTML en < et >
• kbd et samp couvrent la saisie clavier et la sortie d’exemple quand ces rôles conviennent
• Choisissez l’élément d’après le sens du texte, pas seulement d’après la police par défaut
• Après enregistrement, vérifiez : le lecteur voit-il les caractères que vous vouliez montrer ?
  Ainsi les pages de tutoriel restent plus claires et plus sûres : jetons courts dans la phrase, blocs avec mise en page conservée, touches et sortie dans leurs rôles corrects, et encodage qui empêche l’exemple de devenir des éléments actifs.