HTML Entities

HTML entities are special character references used to display characters that either have a reserved meaning in HTML or are difficult to type directly from the keyboard. They look small, but they solve an important problem in web pages: how do you show characters such as <, >, and & as normal text without confusing the browser?

When the browser reads an HTML document, it treats angle brackets as the beginning and end of tags. It also treats an ampersand as the start of a character reference. Because of this, writing certain characters directly can change how the document is parsed. HTML entities give you a safe way to say, “show this character to the user, do not treat it as markup.”

In this article, we will understand what HTML entities are, why they are needed, how named and numeric entities work, where beginners commonly make mistakes, and how to use entities cleanly in real HTML documents.

What are HTML Entities?

HTML entities are text-based codes that represent characters in an HTML document. A browser converts the entity into the actual character when the page is rendered. For example, < becomes the less-than sign, © becomes the copyright symbol, and   becomes a non-breaking space.

The important point is that an entity is written in the source code, but the final character is displayed in the browser. This lets you control how characters appear without accidentally creating invalid or confusing markup.

Use an HTML entity when the character has special meaning in HTML, when the character is hard to type, or when you need a very specific spacing or symbol behavior.

Why HTML Entities are Needed

The most common reason to use entities is to display reserved characters. In HTML, the less-than sign starts a tag, the greater-than sign ends a tag, and the ampersand starts an entity. If you want these characters to appear as text, you should usually write their entity form.

Entities are also useful for special symbols. You can write symbols such as copyright, registered trademark, degree, currency signs, arrows, and mathematical symbols using entity references. Modern HTML supports Unicode, so many of these characters can also be typed directly, but entities are still common because they are explicit and portable in source code.

• They help display reserved HTML characters safely.
• They allow special symbols to be written clearly in source code.
• They can represent characters that are not easy to type from a keyboard.
• They prevent accidental parsing problems in examples and documentation.
• They can preserve specific spacing behavior when used carefully.

HTML Entity Syntax

An HTML entity usually starts with an ampersand and ends with a semicolon. There are three common forms: named entities, decimal numeric references, and hexadecimal numeric references. Named entities are easier to remember, while numeric references are useful when there is no short named entity.

&name;
&#number;
&#xhexNumber;

For example, < is a named entity, < is a decimal numeric reference, and < is a hexadecimal numeric reference. All three can represent the same less-than character.

Common HTML Entities

You do not need to memorize every entity in HTML. In real work, a small group of entities appears again and again. These are the ones you should understand first because they are used in text content, code examples, legal notices, documentation, and UI labels.

Reserved Characters in HTML

Reserved characters are characters that the HTML parser may treat as part of the markup language itself. The less-than sign is the most important one because it can start a tag. If you write <p> as raw text in a document, the browser may treat it as an actual paragraph tag instead of showing it to the reader.

<p>Use &lt;h1&gt; for the main heading of a page.</p>
<p>5 &lt; 10 and 10 &gt; 5.</p>
<p>Tom &amp; Jerry is written with an ampersand.</p>

In the first line, the user sees the text <h1>, not a real heading element. In the second line, the comparison signs are displayed as mathematical symbols. In the third line, the ampersand is written as & because a raw ampersand can be interpreted as the start of another entity.

Ampersand and Double Encoding

The ampersand deserves special attention because every entity begins with it. To display an ampersand itself, write &. To display the text < literally, you must encode the ampersand part first. This is a common point of confusion for beginners writing tutorials or documentation.

<p>This shows a less-than sign: &lt;</p>
<p>This shows the text &amp;lt; literally.</p>

The first paragraph displays the actual less-than character. The second paragraph displays the entity text itself. This is called escaping the escape sequence. It matters when you are teaching HTML, writing code examples, or showing users what they need to type.

Non-breaking Space in HTML

  creates a non-breaking space. It looks like a normal space, but the browser will not break the line at that point. This is useful when two pieces of text should stay together, such as a number and unit, a short name, or a compact label.

<p>Temperature: 25&nbsp;C</p>
<p>Version&nbsp;2.0 is available now.</p>

Do not use many   entities to create layout spacing. That is not what they are for. Use CSS margins, padding, grid, or flexbox for layout. Use   only when the space itself has meaning and should not collapse or break.

Named Entities vs Numeric Entities

Named entities are readable because they describe the character. For example, © is easier to understand than ©. Numeric entities are based on Unicode code points. They are useful for characters that do not have a short named entity or when you are working from a character code.

In normal HTML writing, prefer named entities for very common reserved characters because they are clear. For less common symbols, numeric references are acceptable. The browser can understand both, as long as the reference is valid and written correctly.

Using Entities in Attributes

Entities can also be used inside HTML attributes. This is most common when an attribute value contains quotes, ampersands, or text that could confuse the parser. In many cases, choosing single quotes around an attribute can avoid escaping double quotes, but writing entities is safer when the value itself may contain both types of quotes.

<a href="/search?q=html&amp;level=beginner">Search HTML lessons</a>
<img src="logo.png" alt="NerdsDoStuff &amp; embedded tutorials">

The first example uses & inside the URL because query parameters use ampersands. The second example uses it in image alternative text. This keeps the source valid and prevents ambiguity.

Best Practices for HTML Entities

• Always encode < when you want to show it as text.
• Encode & when writing it as a normal character in HTML source.
• Use   only when a line break would be wrong.
• Do not overuse entities for normal Unicode text if direct characters are clearer and your document uses UTF-8.
• When writing HTML tutorials, encode example tags so the browser displays them instead of executing them.
• Keep entity spelling exact. Named entities are case-sensitive in practice and should be written consistently.

A clean HTML document uses entities where they protect meaning or parsing, not everywhere. If your file is saved as UTF-8, you can write most normal language characters directly. Entities are mainly for reserved characters, special symbols, and intentional spacing behavior.

Common Mistakes with HTML Entities

One common mistake is forgetting the semicolon. Some browsers may still recover from a missing semicolon in limited cases, but you should always write it. Another mistake is double encoding, where a developer accidentally writes < when they only wanted <. Double encoding causes the entity text to appear instead of the intended symbol.

Another mistake is using entities as a design tool. For example, adding ten   entries to move text sideways is bad HTML practice. It makes the page harder to maintain and less responsive. CSS should control layout. HTML should describe content.

FAQs

What is an HTML entity? 3

An HTML entity is a character reference that starts with & and usually ends with ;. The browser converts it into the actual character when rendering the page.

Why do we use < in HTML? 3

We use < to display the less-than sign as text. If a raw less-than sign appears before text that looks like a tag, the browser may treat it as markup.

What is the difference between & and  ? 3

& displays an ampersand character.   displays a non-breaking space that prevents a line break at that position.

Should I use entities for every special character? 3

No. If your page uses UTF-8, many symbols and language characters can be written directly. Use entities when they avoid parsing problems, improve source clarity, or create intentional non-breaking spacing.

Can HTML entities be used inside attributes? 3

Yes. Entities can be used inside attributes, especially for ampersands, quotes, and text that must remain valid inside an attribute value.