In HTML, there are reserved characters, such as <
(less than) and >
(greater than), which are used to define tags like <p>
. However, if you use these reserved characters within the content, browsers may misinterpret them as part of the tags.
HTML Entities were introduced to avoid this. Reserved characters should be replaced with their corresponding entities. For example:
<
(less than) = <
>
(greater than) = >
Syntax:
&entity_name; or & #entity_number;
Note: Entity names are case-sensitive.
Commonly Used HTML Entities
Some commonly used symbols with their Entity name and Entity numbers are listed below:
Symbols | Description | Entity name | Entity Number |
---|
| non-breaking space | |   |
< | less than | < | < |
® | registered trademark | ® | ® |
© | copyright | © | © |
€ | euro | € | € |
¥ | yen | ¥ | ¥ |
£ | pound | £ | £ |
¢ | cent | ¢ | ¢ |
“ | double quotation mark | " | " |
& | ampersand | & | & |
> | greater than | > | > |
∂ | PARTIAL DIFFERENTIAL | ∂ | ∂ |
∃ | THERE EXISTS | ∃ | ∃ |
∅ | EMPTY SETS | ∅ | ∅ |
∇ | NABLA | ∇ | ∇ |
∈ | ELEMENT OF | ∈ | ∈ |
∉ | NOT AN ELEMENT OF | ∉ | ∉ |
+ | PLUS SIGN | + | + |
∏ | N-ARY PRODUCT | ∏ | ∏ |
∑ | N-ARY SUMMATION | ∑ | ∑ |
Α | Alpha | Α | Α |
Β | Beta | Β | Β |
Γ | Gamma | Γ | Γ |
Δ | delta | Δ | Δ |
Ε | Epsilon | Ε | Ε |
Ζ | Zeta | Ζ | Ζ |
♥ | BLACK HEART SUIT = valentine | ♥ | ♥ |
♣ | BLACK CLUB SUIT = shamrock | ♣ | ♣ |
♠ | BLACK SPADE SUIT | ♠ | ♠ |
↓ | DOWNWARDS ARROW | ↓ | ↓ |
→ | RIGHTWARDS ARROW | → | → |
↑ | UPWARDS ARROW | ↑ | ↑ |
← | LEFTWARDS ARROW | ← | ← |
™ | TRADEMARK | ™ | ™ |
♦ | BLACK DIAMOND SUIT | ♦ | ♦ |
° | degree | ° | ° |
∞ | infinity | ∞ | ∞ |
‰ | per-mille | ‰ | ‰ |
⋅ | dot operator | ⋅ | ⋅ |
± | plus-minus | ± | ± |
† | hermitian | ⊹ | ⊹ |
– | minus sign | − | − |
¬ | – | ¬ | ¬ |
% | percent sign | &percent; | % |
f | Function | ƒ | ƒ |
∥ | parallel | ∥ | ∥ |
Examples of HTML Entities
Example: In this example we displays various currency symbols using entity representations:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Currency Symbols</title>
</head>
<body>
<h2>Currency Symbols Using HTML Entities</h2>
<ul>
<li>Dollar: $</li>
<li>Euro: €</li>
<li>Pound: £</li>
<li>Yen: ¥</li>
<li>Rupee: ₹</li>
<li>Won: ₩</li>
<li>Franco: ₣</li>
<li>Bitcoin: ₿</li>
</ul>
</body>
</html>
Reserved Characters
These characters are either reserved for HTML or those which are not present in the basic keyboard & can’t use them directly. Some of the reserved characters representations are given below:
Reserved Character | Entity Name |
---|
& | & |
< | < |
> | > |
“ | " |
Other Characters
Some characters that aren’t available directly on our keyboard, therefore such an entity can be used to represent it by using their entity number. These keywords are directly not available to type, we need to specify their entity number. Here #x before the numbers represents the hexadecimal representation.
Character | Entities |
---|
≥
| ≥
|
©
| ©
|
€
| €
|
∃
| ∃
|
Example: Illustration of the use of special characters that are directly not available to type from the keyboard.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Entities</title>
</head>
<body>
<p>Showing euro €</p>
<p>Showing cent ¢</p>
<p>Showing Copyright ©</p>
<p>Showing BLACK DIAMOND SUIT ♦</p>
<p>Showing TRADEMARK ™</p>
</body>
</html>
Non-breaking Space
It is used to provide space that will not break into a new line. This HTML entity is represented by that will separate the 2 words & will stick together without breaking it into a new line. We can also use the non-breaking space for preventing the browsers from truncating spaces in HTML pages. The non-breaking hyphen (‑) is used to define a hyphen character (‑) that does not break into a new line.
Example
If we use to write 10 spaces in our text, then the browser will remove 9 of them. In order to add real spaces in our text, we can use the character entity.
Combining Diacritical Marks
A diacritical mark is a symbol added to a letter. Marks like the grave accent ( ̀) and acute accent ( ́) are examples of diacritical marks. They can be placed above, below, or inside a letter, or even between two letters. These marks are combined with letters to create new characters not found in the basic character set. Here are some common diacritical marks.
Here are some examples:
Mark | Character | Construct (HTML Code) | Final Result |
---|
̀ | a | à | à |
́ | a | á | á |
̂ | a | â | â |
̃ | a | ã | ã |
̀ | O | Ò | Ò |
́ | O | Ó | Ó |
̂ | O | Ô | Ô |
̃ | O | Õ | Õ |
Best Practices for Using HTML Entities
- Use Named Entities When Possible: Named entities (
<
instead of <
) are easier to remember and make your code more readable. - Verify Entity Codes: Always check your entity codes to ensure they display correctly across all browsers and platforms.
- Use Entities for Readability and Compliance: Besides reserved characters, use entities to improve the readability of your code and to comply with HTML standards, especially when dealing with characters that may not be directly supported by your page’s charset.
Supported Browsers
HTML Entities – FAQs
What are HTML entities?
HTML entities are special codes used to display characters that are reserved in HTML or not easily typable, such as <, >, &, and others.
Why use HTML entities?
HTML entities ensure special characters are correctly rendered in HTML documents, avoiding conflicts with HTML syntax and ensuring consistent display across browsers.
How do you display an ampersand (&) in HTML?
Use & to display an ampersand, as & is reserved for starting entities.
How do you display less-than (<) and greater-than (>) signs?
Use < for less-than and > for greater-than to avoid conflicts with HTML tags.
What is a named HTML entity?
Named HTML entities are predefined names for characters, like © for the copyright symbol or € for the euro sign.
What are numeric HTML entities?
Numeric HTML entities use Unicode code points to represent characters. For example, © for the copyright symbol or € for the euro sign.
Similar Reads
HTML Tutorial
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript
10 min read
HTML Introduction
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. HTML is a markup language, not a programming language, meaning it annotates text to define how it is structured and displayed by web browsers.It forms the building blocks of all we
5 min read
HTML Editors
An HTML Editor is a software application designed to help users create and modify HTML code. It often includes features like syntax highlighting, tag completion, and error detection, which facilitate the coding process. There are two main types of HTML editors: Text-Based Editors - Allow direct codi
5 min read
HTML Basics
HTML (HyperText Markup Language) is the standard markup language for creating and structuring web pages. It defines the structure of a webpage using elements and tags.HTML is responsible for displaying text, images, and other content.It serves as the foundation for building websites and web applicat
6 min read
HTML Comments
HTML comments are used to add notes or explanations in the HTML code that are not displayed by the browser. They are useful for documenting the code, making it easier to understand and maintain.To add a comment, use the syntax <!-- your comment here -->. [GFGTABS] HTML <!-- This is a commen
4 min read
HTML Elements
An HTML Element consists of a start tag, content, and an end tag, which together define the element's structure and functionality. Elements are the basic building blocks of a webpage and can represent different types of content, such as text, links, images, or headings. For example, the <p> el
5 min read
HTML Attributes
HTML Attributes are special words used within the opening tag of an HTML element. They provide additional information about HTML elements. HTML attributes are used to configure and adjust the element's behavior, appearance, or functionality in a variety of ways. Each attribute has a name and a value
9 min read
HTML Headings
HTML headings are used to define the titles and subtitles of sections on a webpage. They help organize the content and create a structure that is easy to navigate. Proper use of headings enhances readability by organizing content into clear sections.Search engines utilize headings to understand page
4 min read
HTML Paragraphs
A paragraph in HTML is simply a block of text enclosed within the <p> tag. The <p> tag helps divide content into manageable, readable sections. Itâs the go-to element for wrapping text in a web page that is meant to be displayed as a distinct paragraph. Syntax: <p> Content</p
5 min read
HTML Text Formatting
HTML text formatting refers to the use of specific HTML tags to modify the appearance and structure of text on a webpage. It allows you to style text in different ways, such as making it bold, italic, underlined, highlighted, or struck-through. Table of Content Categories of HTML Text FormattingLogi
4 min read