HTML Computer Code Elements – Learn Code Tags in HTML

HTML provides several elements specifically designed to display computer code, making it easy to present code snippets, commands, or programming instructions in a web page. These elements help in formatting and distinguishing code from the rest of the content.

Common HTML Code Elements

<code>: Used to define a fragment of computer code.

Example:

<p>To print "Hello World" in Python, use the following code:</p>
<code>print("Hello World")</code>

<pre>: Preserves the formatting of text, including spaces and line breaks, making it ideal for displaying code blocks.
Example:
```
<pre>
def hello_world():
 print("Hello World")
</pre>
```
<kbd>: Represents user input, usually from a keyboard, but can also represent other input devices.
Example:
```
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.
```
<samp>: Represents sample output from a computer program.
Example:
```
Sample output:
<samp>Hello World</samp>
```
<var>: Represents a variable in a mathematical expression or a programming context.
Example:
```
In the equation <code>E = mc2</code>, <var>E</var> stands for energy.
```

Combining Code Elements

You can combine these elements to create well-structured code presentations.

Example

<pre>
<code>
def greet(name):
    print(f"Hello, {name}")
</code>
</pre>

Styling Code Elements

CSS can be used to style these elements to make them more visually appealing and readable.

Example CSS

<style>
  code {
    font-family: Consolas, Monaco, 'Courier New', Courier, monospace;
    background-color: #f4f4f4;
    padding: 2px 4px;
    border-radius: 4px;
  }
  pre {
    background-color: #f4f4f4;
    padding: 10px;
    border: 1px solid #ccc;
    overflow-x: auto;
  }
</style>

Example: Full HTML Document

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Computer Code Elements</title>
  <style>
    code {
      font-family: Consolas, Monaco, 'Courier New', Courier, monospace;
      background-color: #f4f4f4;
      padding: 2px 4px;
      border-radius: 4px;
    }
    pre {
      background-color: #f4f4f4;
      padding: 10px;
      border: 1px solid #ccc;
      overflow-x: auto;
    }
  </style>
</head>
<body>
  <h1>HTML Computer Code Elements</h1>
  <p>Example of a simple Python function:</p>
  <pre><code>def greet(name):
    print(f"Hello, {name}")
  </code></pre>
  <p>To save the file, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
  <p>The output might look like:</p>
  <samp>Hello, Alice</samp>
</body>
</html>

Try It Now

Conclusion

HTML provides several specialized elements for displaying computer code and related content, making it easy to present code in a clear and structured manner. Using these elements correctly can enhance the readability and usability of technical content on your website.