HTML Character Entities

In HTML, certain characters (such as <, >, &) are used as part of the tag syntax. If you want to display these characters themselves on the page, you need to use character entities — also called escape characters.

Why Entities Are Needed

When the browser encounters <, it interprets it as the start of a tag. To display it as a "less than" sign on the page, you must write <. Similarly, the & symbol itself needs escaping because it is the prefix for entity references.

Reference Table

Char Code Description Char Code Description Char Code Description
  &nbsp; Non-breaking space < &lt; Less than > &gt; Greater than
& &amp; Ampersand " &quot; Double quote ' &apos; Single quote
© &copy; Copyright ® &reg; Registered trademark &trade; Trademark
¥ &yen; Yen/Yuan &euro; Euro £ &pound; Pound
× &times; Multiplication ÷ &divide; Division ± &plusmn; Plus-minus
&le; Less than or equal &ge; Greater than or equal &ne; Not equal
&asymp; Approximately &infin; Infinity &sum; Summation
ƒ &fnof; Function ¹ &sup1; Superscript 1 ² &sup2; Superscript 2 (squared)
³ &sup3; Superscript 3 (cubed) ½ &frac12; One half ¼ &frac14; One quarter
&larr; Left arrow &rarr; Right arrow &uarr; Up arrow
&darr; Down arrow &hellip; Ellipsis &mdash; Em dash
· &middot; Middle dot &ensp; En space &emsp; Em space

Example

HTML
<p>In HTML, use &lt; for less than, and &gt; for greater than.</p>
<p>&amp; is the "and" symbol itself.</p>
<p>Result: use < for less than, > for greater than. & is the "and" symbol itself.</p>
▶ Try it Yourself

Common Entity Reference Table

Here are the most commonly used character entities in HTML — worth memorizing:

Example

HTML
<!-- Common HTML Entities -->
<p>Non-breaking space: &nbsp;</p>
<p>Less than: &lt;</p>
<p>Greater than: &gt;</p>
<p>Ampersand: &amp;</p>
<p>Double quotation mark: &quot;</p>
<p>Single quotation mark: &apos;</p>
<p>Copyright symbol: &copy;</p>
<p>Registered trademark: &reg;</p>
<p>Trademark symbol: &trade;</p>
<p>Euro symbol: &euro;</p>
<p>Yuan/Yen symbol: &yen;</p>
<p>Pound symbol: &pound;</p>
▶ Try it Yourself
💡 Tip: In most code editors, you don't need to manually type entities. For example, in VS Code, typing & will auto-suggest choices. But in raw HTML code, always remember to use entities for angle brackets.

⚠️ Common Mistake: Beginners often forget that & itself needs escaping. If you want to display the text &copy; (rather than the copyright symbol), you cannot write &copy; directly, because the browser will render it as the © symbol. The correct way is &amp;copy;, which tells the browser to escape &amp; as the & symbol.

Numeric References and Named Entities

Entity symbols come in two forms: named entities (e.g., ©) and numeric references (e.g., ©). Numeric references can use decimal or hexadecimal (with an x prefix):

Example

HTML
<p>Named entity: &copy; 2026 Web-Tutorial</p>
<p>Decimal reference: &#169; 2026 Web-Tutorial</p>
<p>Hexadecimal reference: &#x00A9; 2026 Web-Tutorial</p>
<p>All three produce the exact same result: they all display the © symbol.</p>
▶ Try it Yourself

Special Whitespace Characters

HTML collapses multiple consecutive spaces into a single space by default. If you need to preserve specific spacing, use these approaches:

Example

HTML
<p>Normal: Multiple   spaces   are collapsed.</p>
<p>Entity spaces: Multiple&nbsp;&nbsp;&nbsp;spaces&nbsp;&nbsp;are preserved.</p>
<p>Note: &nbsp; is also used to prevent line-break hyphenation, e.g., "100&nbsp;km/h" won't break across lines.</p>
▶ Try it Yourself

Usage Scenarios Summary

📌 Complete Entity Reference: The full list of all HTML Character Entities can be found in the HTML specification. A few dozen commonly used ones cover 99% of scenarios.

❓ FAQ

Q Why do < and > need to be escaped?
A Because < and > are syntax characters for HTML tags. If you write <div> directly, the browser thinks it's a tag, not text to display. Using &lt; (less than) and &gt; (greater than) tells the browser you want to display the actual angle brackets. Common scenarios: displaying code, math formulas, technical documentation.
Q What's the difference between &nbsp; and a regular space?
A Regular spaces in HTML get "collapsed" — multiple consecutive spaces display as just one. This is by design so source code indentation doesn't affect display. &nbsp; (non-breaking space) has two functions: 1) It doesn't collapse — multiple &nbsp; show as multiple spaces; 2) It prevents line breaks at that point. Common uses: between numbers and units (like 100&nbsp;px), between names (like John&nbsp;Doe).
Q Do entity symbols have compatibility issues?
A Common entities (like &lt;, &gt;, &amp;, &nbsp;, &copy;) work in all browsers with no issues. However, some obscure entities (like emoji, special math symbols) may display as squares in older browsers. Recommendations: 1) Use common entities freely; 2) Test special symbols before going live; 3) Use CSS or images as alternatives for incompatible symbols.
Q When should I use numeric codes vs named entities?
A Named entities (like &lt;) are more readable and memorable — use them first. Numeric codes (like &#60; or &#x3C;) cover a wider range, including characters without named entities. Rule of thumb: use named entities when available (like &copy;); use numeric codes when there's no named version (like &#8364; for the Euro symbol €). Numeric codes come in decimal (&#number;) and hexadecimal (&#xnumber;).

📖 Summary

📝 Exercises

  1. Code Display: Create a paragraph that displays the text "Please use <h1> through <h6> to define headings" on the page, where <h1> through <h6> should appear in blue code-style formatting.
  2. Copyright Notice: Write a copyright notice at the bottom of the page using © for the copyright symbol and   to maintain proper spacing.
  3. Entity Combo: Write a line of text using entities that includes a less-than sign, greater-than sign, ampersand, and quotation marks all at once.
100%

🙏 帮我们做得更好

我们是刚上线的编程教程站,几个人的小团队,精力有限。页面虽经检查,难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了,麻烦告诉我们,我们会在收到反馈后第一时间进行修复,再次感谢您的光临 🙏