the IT Hustle
도구실전 매뉴얼소개
FundamentalsAI 활용2026-04-17•9 min 읽기

HTML Entities: The Complete Reference Guide

작성: Salty Deprecated Software Engineer

✨ AI 보조 콘텐츠

이 글은 AI 지원을 받아 작성되었으며, 정확성과 품질을 위해 팀이 검토했습니다. 모든 기술 정보와 예시는 검증되었습니다.

If you've ever seen & in a webpage's source code and wondered what it means, you've encountered an HTML entity. HTML entities are special codes that represent characters which would otherwise be interpreted as HTML markup— or characters that don't exist on a standard keyboard.

This guide covers what they are, why they exist, the most common ones you'll use, and how to handle them in modern frameworks like React.

Why HTML Entities Exist

HTML uses certain characters as part of its syntax. The angle brackets < and > define tags. The ampersand & starts entity references. Quotes delimit attribute values.

So what happens when you want to display these characters in your content? If you write <div> in your HTML, the browser thinks you're opening a div tag. To show the literal text on the page, you need entities.

To display this:

<div class="example">

You write this in HTML:

&lt;div class=&quot;example&quot;&gt;

The 5 Essential HTML Entities

These are the entities you'll use 90% of the time. Memorize them:

CharacterEntity NameEntity NumberDescription
&&amp;&#38;Ampersand
<&lt;&#60;Less than
>&gt;&#62;Greater than
"&quot;&#34;Double quote
'&apos;&#39;Single quote / apostrophe

Common Special Characters

Beyond the essential five, here are the entities you'll reach for most often:

CharacterEntityDescription
 &nbsp;Non-breaking space
©&copy;Copyright
®&reg;Registered trademark
™&trade;Trademark
—&mdash;Em dash
–&ndash;En dash
•&bull;Bullet point
…&hellip;Horizontal ellipsis
¢ £ € ¥&cent; &pound; &euro; &yen;Currency symbols

Math & Technical Symbols

CharacterEntityDescription
×&times;Multiplication sign
÷&divide;Division sign
≠&ne;Not equal
≤ ≥&le; &ge;Less/greater than or equal
∞&infin;Infinity
← → ↑ ↓&larr; &rarr; &uarr; &darr;Arrows

Numeric Character References

Every character in Unicode can be represented as a numeric entity using its code point:

Decimal format:

&#169; → © (copyright)

&#8364; → € (euro sign)

Hexadecimal format:

&#x00A9; → © (copyright)

&#x20AC; → € (euro sign)

Pro tip

In 2026, most browsers handle UTF-8 natively. You can often type special characters directly in your HTML source instead of using entities — as long as your file is saved as UTF-8. Entities are still required for &, <, >, and " in HTML context.

HTML Entities in React / JSX

React/JSX handles entities a bit differently than plain HTML. Here's what works and what doesn't:

// Named entities work in JSX text content:

<p>Copyright &copy; 2026</p>

// Unicode escape sequences in JS expressions:

<p>{"©"} 2026</p>

// Use &apos; for apostrophes in JSX:

<p>It&apos;s working</p>

Key rule for React developers

In JSX text content (between tags), named HTML entities like &copy; work fine. Inside JavaScript expressions (curly braces), use Unicode escape sequences (\u00A9) or the actual character instead.

Security: Why Entities Matter for XSS Prevention

HTML entities aren't just about displaying special characters — they're a critical part of preventing Cross-Site Scripting (XSS) attacks. If user input is rendered as HTML without escaping, an attacker could inject malicious scripts.

Modern frameworks like React automatically escape JSX expressions, but if you render raw HTML strings, you must encode entities manually. Our HTML Entity Encoder makes it easy to encode and decode strings safely.

Quick Encoding/Decoding

Need to quickly encode or decode HTML entities? Here are your options:

JavaScript (encode):

const encoded = text

.replace(/&/g, "&amp;")

.replace(/</g, "&lt;")

.replace(/>/g, "&gt;")

.replace(/"/g, "&quot;")

.replace(/'/g, "&#39;");

Or skip the code and use our free HTML Entity Encoder/Decoder — paste your text, get the encoded output instantly.

Want to learn more web fundamentals? Read CSS Tricks AI Generates But Can't Explain, try our HTML Entity Encoder, or browse all our free developer tools.

IT
Salty Deprecated Software Engineer

The IT Hustle의 편집용 필명으로 씁니다 — 노트북 수리 기사, 시스템 관리자, 스토리지 엔지니어, 소프트웨어 엔지니어로 일한 25년 이상의 경력을 이제 AI 에이전트 운영에 쏟고 있습니다. 모든 글은 게시 전에 사람이 검토합니다. 자세한 내용은 편집 원칙을 참고하세요.

도구 보기전체 아티클소개

새 소식 받기

새로운 도구, 블로그 포스트, 업데이트 소식을 가장 먼저 받아보세요. 스팸 없음.

나만의 반환각 프롬프트 생성하기

AI 프롬프트 엔진은 독자적인 기술로 내장 검증 및 모순 테스트가 포함된 프롬프트를 생성합니다.

무료 3회 생성 체험 →

회사

  • 소개
  • 실전 매뉴얼
  • AI 용어집
  • 필자 소개
  • 문의

제품

  • 도구
  • AI 가격 동향
  • 에이전트 옵스
  • 코드
  • 디자인
  • 시스템 관리
  • 생산성
  • 마케팅
  • 비즈니스

법적 고지

  • 개인정보 처리방침
  • 이용약관
  • 면책 조항
  • 편집 원칙
  • 정정 안내

© 2026 Salty Rantz LLC. 모든 권리 보유.

기술 변혁 속에서 일하는 사람들을 위해 만들었습니다.