HTML Computercode
In this page:
The code Tag
The code tag is used to display inline code snippets or technical keywords. It styles the text in a monospace font (like Courier) to distinguish it from surrounding body paragraphs.
Note: Use the code tag to format short programming terms, filenames, or properties inside a sentence.
Warning: The code tag is an inline element, meaning it will not preserve line breaks; use the pre tag for multi-line code blocks.
Example: The code Tag
<p>Run the <code>npm install</code> command.</p>Preformatted Code Blocks (pre and code)
To display a multi-line code block with its original line breaks, indentation, and spaces preserved, you wrap your code element inside a pre (preformatted) tag. Without the pre tag, the browser would collapse all your careful indentation and line breaks into a single line.
Note: Nest your code tag inside a pre tag to create clean, readable code blocks.
Warning: Ensure there are no blank lines or extra spaces right after your opening tags, as the browser will display them on your screen.
Example: Preformatted Code Blocks (pre and code)
<pre><code>function add(a, b) {
return a + b;
}</code></pre>Styling Keyboard Inputs (kbd)
The kbd element is used to represent user keyboard inputs, such as command shortcuts or keys to press. Browsers render the text inside kbd tags in a monospace font by default. This makes it easy to visually distinguish 'press Ctrl+S' instructions from regular body text.
Note: Apply simple border-radius and background styles to your kbd tags to make them look like physical keys on a keyboard.
Warning: Always write separate kbd tags for each key in a shortcut combination to keep your markup clean and legible.
Example: Styling Keyboard Inputs (kbd)
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>Displaying Terminal Output (samp)
The samp tag is used to represent output data from a computer system, terminal program, or active script process, rendering the text in a monospace font by default. This is commonly seen in tutorials that show a program's console output right below the code that produced it.
Note: Use the samp tag in your guides to show users the expected outcome of a terminal process.
Warning: Do not confuse samp with code, as samp represents output logs rather than written code scripts.
Example: Displaying Terminal Output (samp)
<p>The terminal displayed: <samp>Build successful</samp></p>Defining Variables in Code (var)
The var tag is used to represent variables in mathematical formulas, code arguments, or technical equations. The browser displays the text in an italicized format by default. This visual distinction helps readers immediately spot which parts of an example are placeholders versus fixed syntax.
Note: Use the var tag inside your mathematical formula layouts to make them look clean and professional.
Warning: Do not use the var tag as a replacement for standard italic styling tags like em, as var holds a highly technical meaning.
Example: Defining Variables in Code (var)
<p>The formula is <var>x</var> + <var>y</var> = 10</p>- Using the inline code tag alone to display multi-line code snippets, causing the formatting to break.
- Writing raw HTML tags (like ) inside code elements without escaping the brackets, which can crash your page layouts.
- Misusing kbd and samp as generic styling tags rather than as semantic technical notations.
- The code tag styles inline technical terms, properties, and filenames in a monospace font.
- To preserve line breaks and spacing inside multi-line code blocks, wrap your code tag inside a pre tag.
- Use kbd to represent keyboard inputs, samp to display system output logs, and var to style technical variables.
Standard computercode tags and monospace styles are supported natively by all web browsers.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: