Open In App

HTML Entities

Last Updated : 02 Dec, 2024
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Share
Report
News Follow

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) = &lt;
  • > (greater than) = &gt;

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&nbsp;&#160;
<less than&lt;&#60;
®registered trademark&reg;&#174;
©copyright&copy;&#169;
euro&euro;&#8364;
¥yen&yen;&#165;
£pound&pound;&#163;
¢cent&cent;&#162;
double quotation mark&quot;&#34;
&ampersand&amp;&#38;
>greater than&gt;&#62;
PARTIAL DIFFERENTIAL&part;&#8706;
THERE EXISTS&exist;&#8707;
EMPTY SETS&empty;&#8709;
NABLA&nabla;&#8711;
ELEMENT OF&isin;&#8712;
NOT AN ELEMENT OF&notin;&#8713;
+PLUS SIGN&plus;&#43;
N-ARY PRODUCT&prod;&#8719;
N-ARY SUMMATION&sum;&#8721;
ΑAlpha&Alpha;&#913;
ΒBeta&Beta;&#914;
ΓGamma&Gamma;&#915;
Δdelta&Delta;&#916;
ΕEpsilon&Epsilon;&#917;
ΖZeta&Zeta;&#918;
BLACK HEART SUIT = valentine&hearts;&#9829;
BLACK CLUB SUIT = shamrock&clubs;&#9827;
BLACK SPADE SUIT&spades;&#9824;
DOWNWARDS ARROW&darr;&#8595;
RIGHTWARDS ARROW&rarr;&#8594;
UPWARDS ARROW&uarr;&#8593;
LEFTWARDS ARROW&larr;&#8592;
TRADEMARK&trade;&#8482;
BLACK DIAMOND SUIT&#9830;
°degree&deg;&#176;
infinity&infin;&#8734;
per-mille&permil;&#137;
dot operator&sdot;&#8901;
±plus-minus&plusmn;&#177;
hermitian&hercon;&#8889;
minus sign&minus;&#8722;
¬&not;&#172;
%percent sign&percent;&#37;
fFunction&fnof;&#402;
parallel&parallel;&#8741;

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: &#36;</li>
        <li>Euro: &#8364;</li>
        <li>Pound: &#163;</li>
        <li>Yen: &#165;</li>
        <li>Rupee: &#8377;</li>
        <li>Won: &#8361;</li>
        <li>Franco: &#8355;</li>
        <li>Bitcoin: &#8383;</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

&&amp;
<&lt;
>&gt;
&quot;

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

&GreaterEqual;

©

&copy; 

&euro;  

&exist;

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 &euro;</p>
    <p>Showing cent &cent;</p>
    <p>Showing Copyright &copy;</p>
    <p>Showing BLACK DIAMOND SUIT &diams;</p>
    <p>Showing TRADEMARK &trade;</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 &nbsp; 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

  • 12:00 PM
  • 256 km/h

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:

MarkCharacterConstruct (HTML Code)Final Result
̀aa&#768;à
́aa&#769;á
̂aa&#770;â
̃aa&#771;ã
̀OO&#768;Ò
́OO&#769;Ó
̂OO&#770;Ô
̃OO&#771;Õ

Best Practices for Using HTML Entities

  • Use Named Entities When Possible: Named entities (&lt; instead of &#60;) 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 &amp; to display an ampersand, as & is reserved for starting entities.

How do you display less-than (<) and greater-than (>) signs?

Use &lt; for less-than and &gt; for greater-than to avoid conflicts with HTML tags.

What is a named HTML entity?

Named HTML entities are predefined names for characters, like &copy; for the copyright symbol or &euro; for the euro sign.

What are numeric HTML entities?

Numeric HTML entities use Unicode code points to represent characters. For example, &#169; for the copyright symbol or &#x20AC; for the euro sign.



Next Article

Similar Reads

three90RightbarBannerImg
  翻译: