Home 〉 HTML Tutorials 〉 HTML Computer Code Elements - Learn HTML Code Tags with Syntax and Examples
HTML Computer Code Elements - Learn HTML Code Tags with Syntax and Examples !
HTML Computer Code Elements - Learn HTML Code Tags with Syntax and Examples !
Want to display code or output in your web content the right way?
This complete guide to HTML Computer Code Elements covers '<code>', '<kbd>', '<samp>', '<pre>', and '<var>' with syntax, usage, styling, and examples. We've also highlighted their element types, how they differ, and when to use each. This blog post on HTML Computer Code Elements is as follows.
Introduction
When writing tutorials, software documentation, or code snippets, HTML offers a set of Computer Code Elements that help semantically define parts of the content as code. These tags not only improve readability but also boost SEO by providing structured meaning to search engines and assistive technologies.
Let's explore each HTML computer code tag with its syntax, examples, and styling to help you build professional and accessible web pages.
HTML Computer Code Elements Overview
HTML provides several elements specifically for displaying code:
| Element | Description |
|---|---|
| '<code>' | Defines a fragment of computer code |
| '<kbd>' | Represents user keyboard input |
| '<samp>' | Represents output from a computer program |
| '<pre>' | Displays preformatted text |
| '<var>' | Represents a variable in programming or math expressions |
1. '<code>' Element
Syntax:
Syntax ✍
<code>your_code_here</code>
- This element defines a piece of computer code.
- Type: Inline-level element
Example:
Code : 1 📝 
<!DOCTYPE html>
<html>
<body>
<p>Use the <code>print()</code> function to display output in Python.</p>
</body>
</html>
output 📌
Use the print() function to display output in Python.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
The text 'print()' is wrapped in '<code>' to show it is part of programming code.
CSS Styling:
Code : 2 📝
<!DOCTYPE html>
<html>
<body>
<code style="font-size: 14px; color: #d6336c; background-color: #f8f9fa; padding: 2px 5px; border-radius: 4px;">print()</code>
</body>
</html>
output 📌
print()
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
2. '<kbd>' Element
Syntax:
Code : 3 📝
<!DOCTYPE html>
<html>
<body>
<kbd>keyboard_input</kbd>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- Represents user input via the keyboard.
- Type: Inline-level element
Example:
Code : 4 📝
<!DOCTYPE html>
<html>
<body>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
</body>
</html>
output 📌
Press Ctrl + C to copy.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
It semantically shows that the user should press keyboard keys.
CSS Styling:
Code : 5 📝
<!DOCTYPE html>
<html>
<body>
<kbd style="font-size: 14px; background-color: #e2e3e5; padding: 2px 5px; border-radius: 4px;">Ctrl</kbd>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
3. '<samp>' Element
Syntax:
Code : 6 📝
<!DOCTYPE html>
<html>
<body>
<samp>program_output</samp>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- Used to define sample output from a program.
- Type: Inline-level element
Example:
Code : 7 📝
<!DOCTYPE html>
<html>
<body>
<p>The result is: <samp>404 Not Found</samp></p>
</body>
</html>
output 📌
The result is: 404 Not Found
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
It shows what kind of output a user would see from a system.
CSS Styling:
Code : 8 📝
<!DOCTYPE html>
<html>
<body>
<samp style="font-size: 14px; color: #1c7ed6; background-color: #f1f3f5; padding: 2px 5px; border-radius: 4px;">404 Not Found</samp>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
4. '<pre>' Element
Syntax:
Code : 9 📝
<!DOCTYPE html>
<html>
<body>
<pre>preformatted text</pre>
</body>
</html>
output 📌
preformatted text
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
- Displays text as it is, preserving spaces and line breaks.
- Type: Block-level element
Example:
Code : 10 📝
<!DOCTYPE html>
<html>
<body>
<pre>
for i in range(5):
print(i)
</pre> </body>
</html>
output 📌
for i in range(5):
print(i)
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Code appears exactly as written, including indentations and new lines.
CSS Styling:
Code : 11 📝
<!DOCTYPE html>
<html>
<body>
<pre style="font-size: 14px; background-color: #f8f9fa; padding: 10px; border: 1px solid #dee2e6; border-radius: 6px;">...</pre>
</body>
</html>
output 📌
...
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
5. '<var>' Element
Syntax:
Syntax ✍
<var>variable_name</var>
- Represents a variable in programming or mathematical expression.
- Type: Inline-level element
Example:
Code : 12 📝
<!DOCTYPE html>
<html>
<body>
<p>To calculate the area, use <var>r</var> as the radius.</p>
</body>
</html>
output 📌
To calculate the area, use r as the radius.
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Here, 'r' is shown as a variable using the '<var>' tag.
CSS Styling:
Code : 13 📝
<!DOCTYPE html>
<html>
<body>
<var style="font-size: 14px; color: #0b7285;">r</var>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Conclusion
HTML Computer Code Elements are essential for presenting code, user input, outputs, and variables in a semantic and structured way. Using these tags properly improves code readability, user experience, and search engine optimization. They're also great for documentation and tutorial websites.
Suggested Topics:
- HTML Paragraph Tag Tutorial with Examples | HTML '<p>' Tag Explained
- CSS Border Property Explained with Easy Examples for Beginners
- CSS Border-Radius Property Explained with Examples for Beginners
- CSS color Property Tutorial with Examples - Learn Text Color in CSS
- CSS Font Properties Tutorial with Examples | font-family, font-size, font-style
- CSS Padding Explained with Examples | CSS Box Model Guide
Related Topics:
- HTML Block, Inline, and Empty Elements Explained with Examples
- HTML Text Formatting Tags Explained with Examples - Complete Guide
Frequently Asked Questions (FAQs)
What is the use of the '<code>' tag in HTML?
It is used to display code snippets or programming language content in a semantic way.
Can we style HTML code elements?
Yes, inline and internal CSS can be applied to enhance the appearance.
What's the difference between '<code>' and '<pre>'?
'<code>' is for small inline snippets, while '<pre>' is for preformatted multiline content.
Is '<kbd>' only for keyboard keys?
Yes, '<kbd>' is specifically used to show keyboard input.