HTML — HTML Entities & Character Encoding | Tutorials

HTML Entities & Character Encoding

HTML pages frequently contain characters that have a special meaning in HTML or characters that are not convenient to type directly. HTML entities provide a way to represent such characters safely.

Character encoding, on the other hand, determines how characters are represented as data so that browsers can correctly interpret and display text.

Core Idea:

Entities represent particular characters in HTML, while character encoding defines how characters are represented and interpreted as data.

1. What Are HTML Entities?

An HTML entity is a special notation used to represent a character in HTML.

Entities are especially useful when a character would otherwise be interpreted as HTML markup.

Example

The less-than symbol < has a special meaning in HTML because it begins an HTML tag.

To display it as text, we can use:

&lt;

The browser displays:

<

2. Structure of an HTML Entity

A named HTML entity generally begins with & and ends with ;.

&entity-name;

For example:

&copy;

displays:

©

3. Common HTML Entities

Character	Entity	Meaning / Use
<	`<`	Less-than sign
>	`>`	Greater-than sign
&	`&`	Ampersand
"	`"`	Double quotation mark
'	`'`	Apostrophe / single quotation mark
©	`©`	Copyright symbol
®	`®`	Registered trademark symbol
™	`™`	Trademark symbol
€	`€`	Euro symbol
£	`£`	Pound symbol
¥	`¥`	Yen symbol
₹	`₹`	Indian Rupee symbol
°	`°`	Degree symbol
×	`×`	Multiplication sign
÷	`÷`	Division sign
→	`→`	Right arrow
←	`←`	Left arrow
♥	`&hearts;`	Heart symbol

4. Reserved Characters in HTML

Some characters are reserved because HTML uses them as part of its syntax.

Less-Than Sign

<p>
    5 &lt; 10
</p>

Browser output:

5 < 10

Greater-Than Sign

<p>
    10 &gt; 5
</p>

Browser output:

10 > 5

Ampersand

<p>
    HTML &amp; CSS
</p>

Browser output:

HTML & CSS

5. Why Entities Are Important

Consider the following text:

<p>5 < 10</p>

Although this may appear understandable to a human, the less-than character can be interpreted as the beginning of markup.

A safer representation is:

<p>5 &lt; 10</p>

The browser displays the intended text:

5 < 10

6. Named Character References

HTML supports many named character references.

&copy;
&reg;
&euro;
&trade;
&nbsp;

Named references are generally easier for humans to read than numeric character references.

7. Numeric Character References

Characters can also be represented using their numeric Unicode code points.

There are two common forms:

Decimal numeric reference
Hexadecimal numeric reference

Decimal Example

&#169;

Displays:

©

Hexadecimal Example

&#x00A9;

Displays:

©

8. Decimal vs Hexadecimal References

Type	Example	Result
Named	`©`	©
Decimal	`©`	©
Hexadecimal	`©`	©

9. Non-Breaking Space

The   entity represents a non-breaking space.

<p>
    HTML&nbsp;Tutorial
</p>

Unlike an ordinary space, a non-breaking space prevents the browser from breaking the line at that position.

Best Practice:

Do not use large numbers of   entities to create page layout or spacing. Use CSS for presentation and layout.

10. Practical Copyright Example

<footer>

    <p>
        Copyright &copy; 2026 CodeStep Academy.
        All rights reserved.
    </p>

</footer>

Browser output:

11. What Is Character Encoding?

Character encoding is a system used to represent characters as digital data.

Computers work with bytes, while humans work with characters such as letters, numbers, punctuation marks and symbols. Character encoding provides the mapping between these characters and their encoded representation.

Simple Understanding:

Character encoding tells the browser how the bytes representing a document should be interpreted as text.

12. ASCII

ASCII stands for American Standard Code for Information Interchange.

ASCII was designed to represent a limited set of characters, including English letters, digits and common punctuation.

ASCII is not sufficient for representing the enormous range of characters used by languages around the world.

13. Unicode

Unicode is a universal character representation system designed to support characters from languages and writing systems around the world.

Unicode includes characters such as:

English: A, B, C
Greek: α, β, γ
Hindi: नमस्ते
Japanese: こんにちは
Arabic: مرحبا
Chinese: 你好
Symbols: ©, €, ₹, →
Emoji: ?

14. UTF-8

UTF-8 is a Unicode encoding widely used on the web.

It can represent characters from a very large range of writing systems while maintaining compatibility with ASCII for basic English characters.

Web Development Standard:

UTF-8 is the recommended character encoding for modern HTML documents.

15. Declaring UTF-8 in HTML

HTML documents should declare their character encoding using the meta charset element.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Character Encoding</title>

</head>

<body>

    <p>Hello World</p>

</body>

</html>

The declaration:

<meta charset="UTF-8">

tells the browser that the document is encoded using UTF-8.

16. Why Should You Use UTF-8?

Supports multilingual content.
Supports a large range of Unicode characters.
Works naturally with modern web content.
Supports symbols and emoji.
Maintains compatibility with ASCII for basic characters.

Example

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Multilingual Page</title>

</head>

<body>

    <p>Hello</p>

    <p>नमस्ते</p>

    <p>Bonjour</p>

    <p>こんにちは</p>

    <p>你好</p>

</body>

</html>

17. lang Attribute and Character Encoding

The lang attribute identifies the language of the document or a particular section of content.

<html lang="en">

This is different from character encoding.

Feature	Purpose
charset	Specifies the character encoding.
lang	Identifies the language of the content.

18. UTF-8 vs HTML Entities

UTF-8 and HTML entities solve different problems.

Concept	Purpose
UTF-8	Defines how characters are encoded as data.
HTML Entity	Provides HTML notation for a particular character.

For example, a UTF-8 HTML document can contain the character © directly:

<p>© 2026 Example</p>

Or it can use the named entity:

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

Both can produce the same visible character.

19. Useful Symbols for Web Pages

Symbol	Entity	Common Use
©	`©`	Copyright
®	`®`	Registered trademark
™	`™`	Trademark
€	`€`	Currency
£	`£`	Currency
¥	`¥`	Currency
₹	`₹`	Currency
°	`°`	Temperature / angle
±	`±`	Mathematics
≠	`≠`	Mathematics
≤	`≤`	Mathematics
≥	`≥`	Mathematics

20. Mathematical Content

Entities can make mathematical expressions easier to represent in HTML.

<p>
    Temperature: 25&deg;C
</p>

<p>
    5 &times; 4 = 20
</p>

<p>
    10 &divide; 2 = 5
</p>

<p>
    x &ge; 10
</p>

Browser output:

Temperature: 25°C

5 × 4 = 20

10 ÷ 2 = 5

x ≥ 10

21. Creating a Multilingual HTML Page

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Languages of the World</title>

</head>

<body>

    <h1>Languages</h1>

    <p>English: Hello</p>

    <p lang="hi">Hindi: नमस्ते</p>

    <p lang="fr">French: Bonjour</p>

    <p lang="ja">Japanese: こんにちは</p>

    <p lang="zh">Chinese: 你好</p>

</body>

</html>

Notice that UTF-8 handles the character encoding, while the lang attributes identify the languages.

22. Common Character Encoding Problems

Incorrect encoding can cause characters to appear as meaningless symbols or corrupted text.

For example, content intended to display:

₹ € © नमस्ते

may appear incorrectly if the document is interpreted using an incompatible encoding.

Prevention:

Use UTF-8 consistently and declare it correctly in the HTML document.

23. HTML Encoding Is More Than the meta Element

The <meta charset="UTF-8"> declaration is important, but character encoding can also be influenced by HTTP response headers and server configuration.

In production environments, the server should serve the document using the intended encoding consistently.

Content-Type: text/html; charset=UTF-8

Professional Tip:

When debugging character corruption in a production website, check both the HTML charset declaration and the HTTP response headers.

24. Entities and Security

Developers must distinguish between displaying text and inserting HTML markup.

For example, if a user enters:

<script>alert("Hello")</script>

that text should not automatically become executable HTML.

Security Principle:

Never trust user-generated content. Proper output encoding and context-aware sanitization are essential when displaying untrusted data.

25. HTML Escaping

HTML entities are commonly used when characters need to be escaped so that they are interpreted as text rather than markup.

Example

<p>
    Use &lt;h1&gt; for a heading.
</p>

Browser output:

Use <h1> for a heading.

This is especially useful when teaching HTML or displaying source code examples on a webpage.

26. Displaying HTML Code as Text

If you want users to see HTML markup rather than have the browser interpret it, reserved characters must be represented appropriately.

<p>Hello World</p>

In the HTML source, the angle brackets inside the <code> or <pre> content need to be represented so that they appear as text.

Important for Documentation Websites:

CodeStep Academy-style tutorials frequently need to display HTML source code. Correct escaping is essential so that the example is displayed instead of executed.

27. Best Practices

Use UTF-8 for modern HTML documents.
Declare the character encoding early in the document.
Use entities when characters have special meaning in HTML.
Use CSS rather than   for layout.
Use meaningful language declarations with the lang attribute.
Keep server-side encoding consistent with the HTML document.
Escape untrusted content according to the output context.
Use Unicode directly when appropriate and readable.
Use named entities when they improve readability.

28. Interview Questions

1. What is an HTML entity?

View Answer

An HTML entity, more precisely a character reference, is a notation used in HTML to represent a character, particularly when that character has special meaning in HTML.

2. Why is < used instead of < in HTML text?

View Answer

The less-than sign has special meaning in HTML. < represents it as text rather than allowing it to be interpreted as the beginning of markup.

3. What is UTF-8?

View Answer

UTF-8 is a Unicode encoding capable of representing characters from a wide range of languages and symbol sets. It is the standard encoding commonly used for modern web documents.

4. What is the purpose of <meta charset="UTF-8">?

View Answer

It declares the character encoding of the HTML document so that the browser can correctly interpret its text.

5. What is Unicode?

View Answer

Unicode is a universal character set designed to represent characters from many languages, scripts and symbol systems.

6. What is the difference between UTF-8 and Unicode?

View Answer

Unicode defines the characters and their code points, while UTF-8 is an encoding used to represent those Unicode characters as bytes.

View Answer

Both represent the copyright character. The first uses a named character reference, while the second uses a decimal numeric character reference.

8. Why should   not be used for page layout?

View Answer

HTML entities represent content characters, whereas layout and spacing are presentation concerns that should normally be handled with CSS.

29. Exam Questions

Q1. Write the HTML entity for the less-than symbol.

Answer

&lt;

Q2. Write the HTML entity for the copyright symbol.

Answer

&copy;

Q3. Write the HTML statement used to declare UTF-8.

Answer

<meta charset="UTF-8">

Q4. Differentiate between Unicode and UTF-8.

Answer

Unicode defines a universal character set and code points, while UTF-8 is an encoding scheme used to represent Unicode characters as bytes.

Q5. Write HTML code to display "5 < 10".

Answer

<p>5 &lt; 10</p>

Q6. What is the purpose of the   entity?

Answer

It represents a non-breaking space, preventing a line break at that position.

Q7. Which encoding is recommended for modern HTML documents?

Answer

UTF-8.

Answer

&#169;

A hexadecimal form is:

&#xA9;

30. Practical Challenge

Create a webpage titled "Unicode & HTML Entities" containing:

A UTF-8 character encoding declaration.
Examples of mathematical symbols.
Currency symbols from at least four countries or regions.
Copyright and trademark symbols.
Examples of Unicode text in multiple languages.
Examples showing reserved HTML characters.
A section displaying HTML code as text.

Advanced Challenge

Create a multilingual page containing English, Hindi, French, Japanese and Arabic text. Use UTF-8 and appropriate lang attributes for the different language sections.

Concept	Remember
HTML Entity	Notation used to represent a character in HTML.
<	Displays <.
>	Displays >.
&	Displays &.
©	Displays ©.
	Non-breaking space.
Unicode	Universal character set supporting many scripts.
UTF-8	Widely used Unicode encoding for the web.
charset	Declares the document's character encoding.
lang	Identifies the language of content.
Named Reference	Example: `©`.
Decimal Reference	Example: `©`.
Hexadecimal Reference	Example: `©`.

32. Character Encoding Checklist

Use UTF-8.
Declare it using <meta charset="UTF-8">.
Understand the difference between Unicode and UTF-8.
Escape HTML-reserved characters when they are intended to appear as text.
Understand named and numeric character references.
Use   for its semantic non-breaking-space purpose, not for page layout.
Use lang to identify languages.
Keep server and document encoding consistent.
Escape untrusted content appropriately.
Test multilingual and special-character content before publishing.

HTML Entities & Character Encoding

HTML Entities & Character Encoding

1. What Are HTML Entities?

Example

2. Structure of an HTML Entity

3. Common HTML Entities

4. Reserved Characters in HTML

Less-Than Sign

Greater-Than Sign

Ampersand

5. Why Entities Are Important

6. Named Character References

7. Numeric Character References

Decimal Example

Hexadecimal Example

8. Decimal vs Hexadecimal References

9. Non-Breaking Space

10. Practical Copyright Example

11. What Is Character Encoding?

12. ASCII

13. Unicode

14. UTF-8

15. Declaring UTF-8 in HTML

16. Why Should You Use UTF-8?

Example

17. lang Attribute and Character Encoding

18. UTF-8 vs HTML Entities

19. Useful Symbols for Web Pages

20. Mathematical Content

21. Creating a Multilingual HTML Page

22. Common Character Encoding Problems

23. HTML Encoding Is More Than the meta Element

24. Entities and Security

25. HTML Escaping

Example

26. Displaying HTML Code as Text

27. Best Practices

28. Interview Questions

29. Exam Questions

30. Practical Challenge

Advanced Challenge

31. Quick Revision

32. Character Encoding Checklist