HTML Computer Code

Tutorials and docs often show commands, property names, and HTML snippets. If you paste that text into a normal paragraph, the browser may collapse spaces and treat < as the start of a real tag. HTML provides elements meant for computer text so examples stay readable and safe.

What are computer-code elements?

These elements mark text that represents code, keyboard input, or program output — not ordinary prose. They help browsers choose a suitable default font (often monospace for code and pre) and they tell assistive tools that the span is computer-related. You still write the characters yourself; the tags add meaning and, with pre, preserve layout.

Direct answer

Use code for a short snippet inside a sentence. Use pre when spaces and line breaks must stay. A common block pattern is <pre><code>...</code></pre>. Mark keyboard keys with kbd and sample program output with samp when those roles are real. When the example itself is HTML, write < and > instead of raw < and > so the browser does not build live elements by accident.

Elements at a glance

Inline code

When you mention a short token inside a sentence, wrap it in code. That keeps the word visually distinct without forcing a whole block.

Reading the sample

• The sentence is normal paragraph text
• Only the property name sits inside code
• Readers can scan for the technical token quickly
• This is not a multi-line listing — for that, use pre

Blocks with pre and code

pre means preformatted: spaces and line breaks are kept roughly as you typed them. Nesting code inside pre is a clear pattern for a code block. In HTML examples, encode angle brackets.

Why encoding matters

If you write a raw <p> inside your tutorial page, the browser may create a real paragraph instead of showing the characters <p>. Encoding as <p> displays the example safely. The Entities session goes deeper on character references; here you only need the habit for angle brackets in HTML demos.

Keyboard input and sample output

Use kbd when you describe keys the user presses. Use samp when you show sample output from a program or command. Keep them honest — do not mark ordinary words as kbd just for a monospace look.

Practice in your editor

1. Write a sentence that mentions the font-size property inside code.
2. Add a pre+code block with two short HTML lines using < and >.
3. Add a tip line with kbd for a save shortcut.
4. Optional: add one samp line for fake command output.
5. Save and open — confirm spaces inside pre remain and encoded tags show as text.
6. Temporarily paste a raw <div> into the block without encoding, reload, see the problem, then encode it.

Mistakes that break examples

• Putting multi-line code only in code without pre — line breaks and indent may collapse
• Pasting raw <div> or <p> into the page without encoding — it becomes a live element
• Using pre for long articles of normal prose (it is for preformatted computer text, not essays)
• Marking every technical word with kbd when it is not keyboard input
• Forgetting to close pre or code so later text stays stuck in the preformatted style

Summary

• code marks short inline computer text
• pre keeps spaces and line breaks for blocks
• Combining pre and code is a common multi-line pattern
• Encode < and > in HTML examples as < and >
• kbd and samp cover keyboard input and sample output when those roles fit
• Choose the element from the meaning of the text, not only from the default font look