HTML Entities – Character Entities and Diacritical Marks

An HTML entity is a string that is used to display reserved and invisible characters, which would otherwise be treated as HTML code. HTML entities begin with an ampersand(&) and end with a semicolon(;). They are written as-

&entityName; or &#entityNumber;

HTML reserves some characters, and it is possible that the browser may misinterpret them as mark-up elements. There are also some characters that are not present on a standard keyboard but are desired on a web-page. For such situations, HTML entities prove to be highly beneficial. It is easier to remember an entity name than type from a standard keyboard.

For example, The less than sign,<, is written as &lt or &#60.

HTML Entities

Keeping you updated with latest technology trends, Join DataFlair on Telegram

When to use HTML Entities?

  • When the editor does not support unicode, HTML entities are useful.
  • We can use the HTML entities for displaying characters such as ‘<’ or ‘>’ which may otherwise be interpreted as code while displaying.
  • For displaying specific characters such as ‘<’ or ‘>’, we use HTML entities. These characters may otherwise be interpreted as code while displaying on the browser.

Let us suppose we want to write and display <p id= “character”> on our webpage. We can write the characters ‘<’ and ‘>’ using the entity name or the numerical character reference.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Entities</title>
   </head>
   <body>
      &lt;p id = &quot;character&quot;&gt;
   </body>
</html>

Output-

basic html entities

HTML Non-Breaking Space

We can use the &nbsp entity name to represent non-breaking space in HTML. This is useful when breaking text into new lines is not desirable and text-display should be compact. This also prevents the browser from truncating spaces.

The browser truncates 9 out of 10 spaces that have been given by the developer. In such a case, &nbsp comes handy.

<!DOCTYPE html>
<html>
<head>
  <title>non-breaking space</title>
</head>
<body>
10&nbspPM<br>
10&nbspkm/hr
</body>
</html>

Output-

html non breaking space

HTML Reserved Characters

Character Entity Description
& &amp; This marks the start of an entity or character reference.
&lt; The beginning of tag
&gt; The ending of a tag
&quot; This marks the end of an attribute value.

HTML Character Entities

Result Description Entity Name Entity Number
non-breaking space &nbsp;  
less than &lt; <
greater than &gt; >
& ampersand &amp; &
double quotation mark &quot;
single quotation mark (apostrophe) &apos;
¢ cent &cent; ¢
£ pound &pound; £
¥ yen &yen; ¥
euro &euro;
© copyright &copy; ©
® registered trademark &reg; ®

Note- Please note that entity names are case-sensitive.

HTML Diacritical Marks

Diacritical marks are typical symbols that lay stress on the pronunciation of a particular word. Grave( ̀) and acute( ́) are the commonly used diacritical marks. We can use diacritical marks with alphanumeric characters to produce new characters unavailable in the character set.

Some examples-

Mark Character Code Result
̀ a
́ a
̂ a
̃ a
̀ O
́ O
̂ O
̃ O

Note- It is a good practice to use entity numbers than names as some browsers may not support the names.

Summary

HTML consists of some reserved characters that have a unique meaning when used in HTML. In this article, we’ve discussed some of these reserved characters such as &amp, &lt, &gt, &apos, &quot. These HTML entities could be an entity name or an entity number. We’ve also tabulated some of the commonly used entities in HTML.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.