HTML Computer Code Elements

November 1, 2025 by Dharmesh kumar

When you want to display programming code, keyboard shortcuts, or computer output on a web page, HTML provides a set of special elements called Computer Code Elements.

These tags don’t make the browser execute the code they only show it visually formatted, just like you’d see in a code editor or terminal window.

List of HTML Computer Code Elements

Element	Description	Example
<code>	Defines a piece of computer code	<code>print(“Hello World”)</code>
<kbd>	Represents keyboard input	<kbd>Ctrl</kbd><kbd>C</kbd>
<samp>	Displays sample program output	<samp>File not found</samp>
<var>	Represents a variable in programming or math	<var>x</var>+<var>y</var>
<pre>	Displays preformatted text, preserves spaces and line breaks	<pre>function test() {}</pre>

Example of Displaying Code in HTML

Let’s look at a full HTML example that uses all these tags together,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn HTML computer code elements with examples such as code, kbd, samp, var, and pre tags.">
  <meta name="keywords" content="HTML code elements, HTML pre tag, HTML kbd tag, HTML samp tag, HTML var tag, HTML code formatting">
  <meta name="author" content="Web Tutorials">
  <title>HTML Computer Code Elements Tutorial</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <h1>HTML Computer Code Elements</h1>
    <p>Learn how to format and display code in HTML.</p>
  </header>

  <main>
    <section>
      <h2>1 The &lt;code&gt; Tag</h2>
      <p>The <code>&lt;code&gt;</code> tag defines a short snippet of computer code.</p>
      <p>Example:</p>
      <p><code>print("Hello, World!")</code></p>
    </section>

    <section>
      <h2>2 The &lt;kbd&gt; Tag</h2>
      <p>Use the <code>&lt;kbd&gt;</code> tag to show user keyboard input:</p>
      <p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your work.</p>
    </section>

    <section>
      <h2>3 The &lt;samp&gt; Tag</h2>
      <p>The <code>&lt;samp&gt;</code> tag is used to show program output.</p>
      <p>Example output:</p>
      <p><samp>File not found.<br>Press any key to continue...</samp></p>
    </section>

    <section>
      <h2>4 The &lt;var&gt; Tag</h2>
      <p>The <code>&lt;var&gt;</code> tag is used to represent a variable name in programming or mathematical expressions.</p>
      <p>Example: <var>x</var> + <var>y</var> = <var>z</var></p>
    </section>

    <section>
      <h2>5 The &lt;pre&gt; Tag</h2>
      <p>The <code>&lt;pre&gt;</code> tag preserves both spaces and line breaks — perfect for multi-line code blocks.</p>
      <pre>
def greet(name):
    print("Hello, " + name)

greet("Dharmesh")
      </pre>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 WebTutorials. All rights reserved.</p>
  </footer>
</body>
</html>

CSS Styling (Optional for Beautiful Code)

You can make your code examples look professional with a little CSS,

body {
  font-family: Arial, sans-serif;
  background: #f7f9fc;
  margin: 0;
  padding: 0;
}

header {
  background: #333;
  color: white;
  text-align: center;
  padding: 20px 0;
}

main {
  padding: 20px;
  line-height: 1.6;
}

code, kbd, samp, var, pre {
  background: #f4f4f4;
  border-radius: 5px;
  padding: 3px 6px;
  font-family: "Courier New", monospace;
}

pre {
  background: #272822;
  color: #f8f8f2;
  padding: 15px;
  border-radius: 6px;
  overflow-x: auto;
}

kbd {
  background: #ddd;
  border: 1px solid #aaa;
  padding: 2px 5px;
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 #aaa;
}

HTML Responsive Web Design HTML Semantic Elements

Leave a Comment Cancel reply