HTML Computer Code Elements
In HTML, computer code elements are special tags used to display programming code, keyboard input, sample output, and other technical text in a way that makes it easier to read and understand. These elements are mainly used in technical documentation, tutorials, and educational websites.The computer code elements are listed as follows:
- <code> – For Inline Code
- <pre> – For Preformatted Text or Code
- <kbd> – For Keyboard Input
- <samp> – For Sample Output
- <var> – For Variables
<code> – For Inline Code
- The code tag is used to display inline snippets of code within a paragraph.
- It is usually displayed in a monospaced font (like Courier).
- Best for showing short pieces of code or variables.
<!DOCTYPE html>
<html>
<body>
<h1>Using the <code> Tag</code></h1>
<p><strong>Python Example:</strong></p>
<p>
You can print text in Python using
<code>print("Hello, World!")</code>
</p>
<p><strong>JavaScript Example:</strong></p>
<p>
To show an alert, write
<code>alert("Welcome to my page!");</code>
</p>
<p><strong>HTML Example:</strong></p>
<p>
Create a heading with
<code><h1>My Heading</h1></code>
</p>
</body>
</html>
<pre> – For Preformatted Text or Code
- The
<pre>tag is used to display preformatted text, meaning it preserves spaces, tabs, and line breaks exactly as written in the code. - Often used with code for blocks of code.
<!DOCTYPE html>
<html>
<body>
<h2>Example of <pre> Tag</h2>
<pre>
Line 1: Hello, World!
Line 2: This text
keeps spaces
and line breaks.
</pre>
</body>
</html>
<kbd> – For Keyboard Input
- The
<kbd>tag is used to represent keyboard keys or input typed by the user. - It shows that the user needs to press a key or combination.
<!DOCTYPE html>
<html>
<body>
<h2>Example of <kbd> Tag</h2>
<p>
To copy text, press <kbd>Ctrl</kbd> +
<kbd>C</kbd>.
</p>
<p>
To paste text, press <kbd>Ctrl</kbd> +
<kbd>V</kbd>.
</p>
</body>
</html>
<samp> – For Sample Output
- The
<samp>tag is used to display sample output from a computer program. - It helps differentiate program output text from regular content.
<!DOCTYPE html>
<html>
<body>
<h2>Example of <samp> Tag</h2>
<p>
Output: <samp>Hello, World!</samp>
</p>
</body>
</html>
<var> – For Variables
- The
<var>tag represents a variable name in a mathematical expression or programming context. - Usually displayed in italic by default.
<!DOCTYPE html>
<html>
<body>
<h2>Example of <var> Tag</h2>
<p>
The area of a circle is <var>A</var> = π
<var>r</var><sup>2</sup>
</p>
</body>
</html>