HTML Entity for Vertical Bar (|)
What You'll Learn
How to display the Vertical Bar symbol (|) in HTML using various entity methods. Also known as the pipe symbol, this character is U+007C (VERTICAL LINE) in the Basic Latin block—essential for code examples, logic expressions, separators, and technical documentation.
Render it with |, |, the named entity |, or CSS escape \7C. In UTF-8 you can also type | directly in source files.
⚡ Quick Reference — Vertical Bar Entity
U+007CBasic Latin (ASCII)
|Hexadecimal reference
|Decimal reference
|Most readable option
Name Value
──────────── ──────────
Unicode U+007C
Hex code |
HTML code |
Named entity |
CSS code \7C
Also called Pipe symbol, vertical line
Block Basic Latin (U+0000–U+007F)Complete HTML Example
A simple example showing the Vertical Bar (|) using hexadecimal code, decimal HTML code, named entity, and a CSS content escape:
<!DOCTYPE html>
<html>
<head>
<style>
#point:after{
content: "\7C";
}
</style>
</head>
<body>
<p>Symbol (hex): |</p>
<p>Symbol (decimal): |</p>
<p>Symbol (named): |</p>
<p id="point">Symbol (CSS): </p>
</body>
</html>🌐 Browser Support
The Vertical Bar (|) is universally supported in all modern browsers:
👀 Live Preview
See the Vertical Bar rendered live in different contexts:
🧠 How It Works
Hexadecimal Code
| uses the Unicode hexadecimal value 7C to display the Vertical Bar. The x prefix indicates hexadecimal format.
Decimal HTML Code
| uses the decimal Unicode value 124 to display the same character. One of the most commonly used methods.
CSS Entity
\7C is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.
Named Entity
| is the semantic named entity — the easiest to read in source HTML for the pipe / vertical bar character.
Same visual result
All four methods produce the glyph: |. Unicode U+007C sits in Basic Latin (ASCII). Do not confuse with broken bar U+00A6 (¦, ¦).
Use Cases
The Vertical Bar (|) is commonly used in:
Programming tutorials, API docs, and technical articles showing pipe syntax.
Boolean OR notation, truth tables, and mathematical logic content.
Navigation breadcrumbs, menu dividers, and inline content separators.
Unix/Linux shell pipelines and system administration guides (e.g. cmd1 | cmd2).
Regex patterns where | denotes alternation between sub-patterns.
Documentation referencing the pipe character in prose or formatted examples.
Filters, tags, and interface copy using the vertical bar as a visual divider.
💡 Best Practices
Do
- Use
|for readable source markup - Wrap code snippets in
<code>or<pre>elements - Pick one style (hex / decimal / named) per project
- Add spacing around | when used as a UI separator
- Distinguish | from broken bar ¦ (
¦)
Don’t
- Confuse | (U+007C) with ¦ broken bar (
¦) - Mix entity styles randomly in one file
- Use CSS escape
\7Cinside HTML markup - Use HTML entities inside JS strings (use
\u007Cor'|') - Overuse | as a separator without adequate spacing
Key Takeaways
Three HTML references all render |
| | |For CSS stylesheets, use the escape in the content property
\7CUnicode U+007C — VERTICAL LINE (pipe symbol)
Prefer | for readability in HTML source
Previous: Versicle (℣) Next: Vertical Ellipsis
❓ Frequently Asked Questions
| (hex), | (decimal), | (named), or \7C in CSS content. All produce |. In UTF-8 you can also type | directly.U+007C (VERTICAL LINE). Basic Latin block. Hex 7C, decimal 124. Also called the pipe symbol in programming contexts.|, |, or |) go directly in markup. The CSS escape \7C is used in stylesheets, typically in the content property of ::before or ::after. Same visual result, different layers of the stack.| is the named HTML entity for | (U+007C). | and | are equivalent in modern browsers.Explore More HTML Entities!
Discover 1500+ HTML character references — punctuation, symbols, math operators, and more.
About the author
8 people found this page helpful