When building tutorials, documentation, or blog posts about web development, you often need to show actual HTML tags on the page rather than having the browser interpret them. This guide covers every reliable method for displaying HTML markup as visible text.
Why the Browser Hides Your Tags
Browsers parse HTML by design. When they encounter <p>, <a>, or any recognized tag, they render the corresponding element rather than showing the raw characters. To display the tags themselves, you must tell the browser to treat those characters as plain text.
Method 1: HTML Character Entities
The most fundamental approach is replacing special HTML characters with their corresponding character entities. The browser renders the entity as a visible character without interpreting it as markup.
| Character | Entity Name | Entity Number | Description |
|---|---|---|---|
< | < | < | Less-than sign |
> | > | > | Greater-than sign |
& | & | & | Ampersand |
" | " | " | Double quote |
' | ' | ' | Single quote |
Example
To display <a href="https://example.com">Click here</a> as text, write:
<a href="https://example.com">Click here</a>The browser will render the visible text:
<a href="https://example.com">Click here</a>This method works everywhere and is the most universally supported approach.
Method 2: The <code> and <pre> Elements
HTML provides semantic elements specifically for displaying code.
The <code> Element
The <code> element indicates that its content is a fragment of computer code. Browsers typically render it in a monospace font, but it does not prevent HTML parsing on its own. You still need to escape angle brackets inside it:
<code><p>This is a paragraph</p></code>The <pre> Element
The <pre> element preserves whitespace and line breaks exactly as written in the source. Combined with <code>, it is ideal for multi-line code blocks:
<pre><code><div class="container">
<h1>Hello World</h1>
<p>Welcome to my site.</p>
</div></code></pre>This combination preserves indentation and line breaks while signaling to screen readers and search engines that the content is source code.
The <xmp> and <listing> Elements (Deprecated)
Older HTML had <xmp> and <listing> elements that displayed content literally without requiring entity escaping. These are deprecated in HTML5 and should not be used. Stick with <pre><code> and entity encoding.
Method 3: CSS white-space Property
If you are styling a container to display code-like content, the CSS white-space property controls how whitespace is handled:
.code-block {
white-space: pre; /* preserves whitespace and line breaks */
font-family: monospace;
background-color: #f4f4f4;
padding: 1rem;
border-radius: 4px;
overflow-x: auto;
}Common values:
pre— preserves all whitespace; no wrapping.pre-wrap— preserves whitespace but wraps at the container edge.pre-line— collapses spaces but preserves line breaks.
Even with CSS formatting, you still need to escape < and > characters as entities if the content is in an HTML file.
Method 4: JavaScript Escaping
When inserting code samples dynamically with JavaScript, you can escape HTML characters programmatically.
Using String Replacement
function escapeHtml(text) {
return text
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
const sample = '<div class="example">Hello</div>';
document.getElementById('output').innerHTML = escapeHtml(sample);Note that the ampersand replacement must come first to avoid double-escaping.
Using textContent (Preferred)
A simpler and safer approach uses the textContent property, which automatically treats the assigned value as plain text:
const sample = '<div class="example">Hello</div>';
document.getElementById('output').textContent = sample;The browser will display the literal HTML tags without interpreting them. This is the recommended approach for dynamic content because it also prevents cross-site scripting (XSS) vulnerabilities.
Method 5: Using a Syntax Highlighting Library
For production code display, consider a syntax highlighting library that handles escaping automatically and adds color coding:
- Prism.js — lightweight, extensible, and widely used.
- highlight.js — auto-detects languages with minimal configuration.
- Shiki — uses VS Code’s grammar definitions for accurate highlighting.
These libraries expect raw code text (usually inside <pre><code>) and handle the rendering, including proper escaping.
Common Use Cases
Displaying Code in a Blog Post
<pre><code class="language-html"><form action="/submit" method="post">
<input type="text" name="username" />
<button type="submit">Submit</button>
</form></code></pre>Showing an HTML Email Template Preview
When documenting email templates, you may need to show the raw HTML alongside the rendered preview. Place the escaped source in a <pre><code> block next to an <iframe> or rendered section for a side-by-side comparison.
Inline Code References
For referencing a single tag within a paragraph, use inline <code> with entities:
<p>Use the <code><strong></code> element for important text.</p>Quick Reference
| Goal | Technique |
|---|---|
| Static HTML code block | <pre><code> with entities |
| Inline tag reference | <code> with entities |
| Dynamic code insertion | element.textContent = rawCode |
| Formatted with colors | Syntax highlighting library |
| Preserve whitespace in CSS | white-space: pre or pre-wrap |
Summary
Displaying HTML tags as visible text comes down to preventing the browser from interpreting special characters as markup. For static content, use HTML entities (<, >, &) inside <pre><code> blocks. For dynamic JavaScript content, prefer the textContent property for both simplicity and security. For polished code display on a blog or documentation site, pair these techniques with a syntax highlighting library.