HTML Tutorial: HTML Computercode
Learn how to display computer code in HTML using <code> and <pre> tags with colorful examples and results
To display programming code in HTML, use <code> for inline code and <pre> for preformatted blocks. This preserves formatting and makes code readable.
1️⃣ Inline Code with <code>
INPUT:
To print in Python, use <code>print('Hello World')</code> inside your text.
OUTPUT:
To print in Python, use
print('Hello World')inside your text.
✔️ <code> highlights inline code ✔️ Use for small code snippets in paragraphs
2️⃣ Preformatted Code with <pre>
INPUT:
<pre style="background:#1e1e1e; color:#e6e6e6; padding:12px; border-radius:10px;">
print("Hello World")
for i in range(3):
print(i)
</pre>
OUTPUT:
print("Hello World")
for i in range(3):
print(i)
✔️ <pre> preserves spaces and line breaks ✔️ Great for multi-line code blocks
3️⃣ Syntax Highlighting Example
INPUT:
<pre style="background:#1e1e1e; color:#e6e6e6; padding:12px; border-radius:10px;">
def greet(name):
print(f"Hello {name}")
greet("Alice")
</pre>
OUTPUT:
def greet(name): print(f"Hello {name}") greet("Alice")Output in Python console: Hello Alice
✔️ Color coding improves readability ✔️ Use different colors for keywords, functions, strings
4️⃣ Best Practices for Code Display
- Use <code> for inline code and <pre> for blocks
- Preserve indentation for readability
- Use syntax coloring for clarity
- Keep code examples short and focused
- Test code snippets to ensure they run correctly
🚀 What’s Next?
👉 HTML Semantics
Next lesson will cover:
- Semantic HTML tags for better structure and SEO
- Difference between semantic and non-semantic elements
- Using section, article, aside, nav, header, footer
Using <code> and <pre> tags in HTML helps display computer code clearly, maintaining formatting and readability for tutorials or documentation.