HTML Computer Code.

Displaying code on the web requires specific tags to preserve formatting and communicate technical context to the browser.

The Essentials

<code> identifies a short snippet of code inline within a paragraph.

<pre> preserves all whitespace and line breaks exactly as typed.

<kbd> identifies keyboard input (like Ctrl+C or Enter).

<samp> identifies sample output from a computer program.

<var> is used for mathematical variables or placeholders in code.

Professional Insights

Preformatted Multi-line Code

✔ Use: → The combination of <pre><code> to display code blocks with indentation. ❌ Avoid: → Using <pre> for plain text that isn't technical code. 💡 Tip: → Inside <pre><code>, you must escape characters like < and > using < and > to prevent the browser from rendering them as tags.

Keyboard Shortcuts for UX

✔ Use: → <kbd> whenever you are giving instructions for user actions. ❌ Avoid: → Styling <kbd> to look like a normal button; keep it distinct as a key stroke. 💡 Tip: → You can nest <kbd> tags (e.g., <kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>) for more granular control over complex shortcuts.

Critical Pitfalls

Forgetting to wrap <code> inside <pre> for multi-line snippets.

Using <i> for variables instead of the semantic <var> tag.

Assuming <pre> will automatically highlight your code colors (you need a library like Prism for that).

Not escaping HTML tags inside code blocks, causing them to disappear from the view.

Interactive Lab

Sprint Tasks

Display the function 'print()' inside a <code> tag

Wrap 'Cmd+R' in a <kbd> tag

Create a multi-line code block using <pre> and <code>

Loading editor...

Production Preview