HTML Entity for Precedes (≺)

Beginner
⏱️ 5 min read
📚 Updated: Jun 2026
🎯 1 Code Example
Unicode U+227A
HTML Entity for precedes symbol tutorial illustration

What You'll Learn

How to display the precedes symbol (≺) in HTML using various entity methods. The precedes operator denotes a strict order relation—read as “precedes” or “comes before” in mathematics, set theory, and logic.

This character is part of the Mathematical Operators Unicode block and can be rendered with a hexadecimal reference, a decimal reference, the named entity &pr;, or a CSS escape in the content property. Do not confuse ≺ with U+227B (≻, succeeds) or < (less-than).

⚡ Quick Reference — Precedes Entity

Unicode U+227A

Mathematical Operators block

Hex Code &#x227A;

Hexadecimal reference

HTML Code &#8826;

Decimal reference

Named Entity &pr;

Most readable option

Reference Table
Name           Value
────────────   ──────────
Unicode        U+227A
Hex code       &#x227A;
HTML code      &#8826;
Named entity   &pr;
CSS code       \227A
Meaning        Precedes (strict order relation)
Related        U+227B = Succeeds (≻)
               U+227E = Precedes or equal (≾)
               U+003C = Less-than (<)
Block          Mathematical Operators (U+2200–U+22FF)
1

Complete HTML Example

A simple example showing ≺ using hexadecimal code, decimal HTML code, the named entity, and a CSS content escape:

html
<!DOCTYPE html>
<html>
<head>
 <style>
  #point::after{
   content: "\227A";
  }
 </style>
</head>
<body>
<p>Precedes (hex): a &#x227A; b</p>
<p>Precedes (decimal): a &#8826; b</p>
<p>Precedes (named): a &pr; b</p>
<p>Precedes (CSS): a <span id="point"></span> b</p>
</body>
</html>
Try it Yourself

🌐 Browser Support

The precedes entity is universally supported in all modern browsers:

Chrome 1+
Firefox 1+
Safari 1+
Edge 12+
Opera 4+
Android 4.4+
iOS Safari 1+

👀 Live Preview

See the precedes symbol rendered live in different contexts:

Inline relation a ≺ b means a strictly precedes b
Large glyph ≺
In a formula x ≺ y ≺ z
Not the same as Succeeds ≻  |  Less-than <  |  Subset ⊂
Entity refs &#x227A; &#8826; &pr; \227A

🧠 How It Works

1

Hexadecimal Code

&#x227A; uses the Unicode hexadecimal value 227A to display the precedes symbol. The x prefix indicates hexadecimal format.

HTML markup
2

Decimal HTML Code

&#8826; uses the decimal Unicode value 8826 to display the same character. This is one of the most commonly used methods.

HTML markup
3

CSS Entity

\227A is used in CSS stylesheets, particularly in the content property of pseudo-elements like ::before and ::after.

CSS stylesheet
4

Named Entity

&pr; is the semantic named entity — the easiest to read in source HTML for the precedes relation.

HTML markup
=

Same visual result

All four methods produce the precedes glyph: ≺. Unicode U+227A sits in the Mathematical Operators block (U+2200–U+22FF).

✅

Use Cases

The precedes symbol (≺) commonly appears in the following scenarios:

📐 Order Theory

Partial orders, chains, and strict precedence relations in math texts.

📄 Academic Papers

Research articles, theses, and lecture notes on relations and lattices.

🧮 Formal Logic

Logic and proof documentation requiring precise operator symbols.

💻 Math Documentation

Online references, wikis, and educational content on order relations.

📋 Unicode References

Character tables and Mathematical Operators guides.

📝 Technical Articles

Blog posts and tutorials explaining precedence and ordering notation.

♿ Accessibility

Pair ≺ with plain-language “precedes” on first use in educational content.

💡 Best Practices

Do

  • Use &pr; for readable order-relation markup
  • Distinguish ≺ (precedes) from ≻ (succeeds) and < (less-than)
  • Pick one style (hex / decimal / named) per project
  • Use MathML or LaTeX for complex multi-line formulas when appropriate
  • Test the glyph across browsers and math-friendly fonts

Don’t

  • Substitute < for ≺ when the mathematical precedes operator is intended
  • Confuse ≺ with subset ⊂ unless your notation explicitly equates them
  • Use CSS escape \227A inside HTML text nodes
  • Use HTML entities in JS (use \u227A instead)
  • Mix entity styles randomly in one file

Key Takeaways

1

Three HTML references all render ≺

&#x227A; &#8826; &pr;
2

For CSS stylesheets, use the escape in the content property

\227A
3

Unicode U+227A belongs to the Mathematical Operators block (U+2200–U+22FF)

4

Prefer &pr; for readability—the standard named entity for precedes

5

Previous: Pound Sign (£)   Next: Precedes But Not Equivalent To (⋨)

❓ Frequently Asked Questions

Use &#x227A; (hex), &#8826; (decimal), &pr; (named), or \227A in CSS content. All produce ≺.
U+227A (hex 227A, decimal 8826). It denotes the strict precedes relation in the Mathematical Operators block.
In mathematical notation, order relations, set theory, lattice theory, logic expressions, academic papers, and any content requiring the strict precedes operator.
HTML entities (&#8826; or &pr;) go directly in markup. The CSS escape \227A is used in stylesheets, typically in the content property of ::before or ::after. Same visual result, different layers of the stack.
Yes. &pr;, &#8826;, and &#x227A; are equivalent in modern browsers and all render ≺.

Explore More HTML Entities!

Discover 1500+ HTML character references — currency symbols, arrows, math operators, emojis, and more.

All HTML Entities →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Pound Sign (£) Precedes But Not Equivalent To (⋨)