Verification: 52bc5e43554438b2
HTML & CSS

Special Character and Numeric Character Reference in Html5

Description.

In this article, I will explain how to display special character in HTML5. Special characters used for copyright etc. must be converted into corresponding specific character strings in HTML5 to be displayed. In this article, you will learn

  • What are special characters?
  • Why you shouldn’t write special characters as they are
  • Two ways to make special characters visible in HTML5

I will explain about it. If you want to handle special characters in HTML5.




What are special characters?

First, let’s know what a special character is. Special characters are characters that are not ordinary characters, such as “©” used next to copyright, and are classified as symbols.

Depending on the IME (character input software), such special characters may appear in the conversion candidate field when you enter “copyright” or the like. You may not usually notice it, but heart marks are also treated as special characters.

And these special characters need to be replaced in HTML5 either by character entity reference or numeric character reference method. We will discuss this in more detail after explaining why we need to replace special characters.

Why you shouldn’t write special characters as they are

Such special characters can also be easily entered using the keyboard. However, it is forbidden to write it in HTML5 and display it as it is according to the rules.

This is because if you use it in HTML5 as it is, depending on the environment, the characters will be garbled and you will not be able to see them. Even if you can see it in your environment, it may not necessarily be seen in other environments.

In order to avoid being affected by such an environment as much as possible, special characters can be displayed by replacing them according to the rules. In addition to garbled characters, “<” and “>” are used as part of tags in HTML5.

In this way, it is necessary to replace special characters in order to distinguish between symbols used in HTML5 and symbols used in sentences.



How to display special characters in HTML5

Now, I will explain how to display special characters in HTML5. Special characters must be replaced by either character entity references or numeric character references, as explained earlier. Let’s take a look at each of these replacement methods.

Character entity reference

A character entity reference is

&name of special character;

You can replace special characters in the form

&nbsp;

&copy;

&gt;

&lt;

In the below examples, I am using all of these in practical html5 codes.



Example: how to use no-break space special Character in Html5:

<html>

<head>

<title>Special Character in Html</title>

</head>

<body>

<h2>without no-break space special character:</h2>

<p>in this sentence i don’t use the no break space</p>

<h2>with no-break space special character:</h2>

<p>in this &nbsp; &nbsp; sentence &nbsp; &nbsp;i use the &nbsp; &nbsp;no break space</p>

</body>

</html>

Output:

special character in html5

Example: how to make copyright sign using special Character in Html5:

<html>

<head>

<title>Special Character in Html</title>

</head>

<body>

<h2>&copy;Copyright 2022, All Right Reserved</h2>

</body>

</html>

Output:

special character in html5



Example: how to make greater than sign using special Character in Html5

<html>

<head>

<title>Special Character in Html</title>

</head>

<body>

<h2>Programming Digest &gt;</h2>       

</body>

</html>

Output:

special character in html5

Example: how to make less than sign using special Character in Html5

<html>

<head>

<title>Special Character in Html</title>

</head>

<body>

<h2>Programming Digest &lt;</h2>

</body>

</html>

Output:

special character in html5




Example: how to make a Trademark sign using special character in html5:

<html>

<head>

<title>Special Character in Html</title>

</head>

<body>

<h2>Programming Digest &trade;</h2>            

</body>

</html>

Output:

special character in html5

Example: how to make Degree sign using special character in html5

<html>

<head>

<title>Special Character in Html</title>

</head>

<body>

<h2>40&deg;</h2>

                <h2>90&deg;</h2>

                <h2>40&deg;C</h2>

</body>

</html>

Output:

special character in html5



Example: how to make registered sign using special character in html5

<html>

<head>

<title>Special Character in Html</title>

</head>

<body>

<h2>Programming Digest&reg;</h2>               

</body>

</html>

Output:

special character in html5

Example: how to use multiple special Character in Html5:

<html>

<head>

<title>Special Character in Html</title>

</head>

<body>

<h2>&lt;&nbsp;&copy;Copyright 2022, All Right Reserved by Programming Digest&nbsp;&gt;</h2>

</body>

</html>

Output:

special character in html5



Numeric character reference

Numeric character references are,

&#number;

You can replace special characters in the form there is no particular difference from character entity references, but numeric character references have more symbols defined than character entity references.

Use descriptive character entity references where they can be used, and numeric character references where they are not. See the below examples.

&#160;

&#169;

&#62;

&#60;

Example: how to use no-break space numeric Character reference in Html5:

<html>

<head>

<title>Numeric character reference in Html</title>

</head>

<body>

<h2>without no-break space Numeric character:</h2>

                <p>in this sentence i don’t use the no break space</p>

                <h2>with no-break space Numeric character:</h2>

                <p>in this &#160; &#160; sentence &#160;&#160;&#160;i use the &#160;no break space</p>

</body>

</html>

Output:

special character in html5



Example: how to make copyright sign using numeric Character reference in Html5:

<html>

<head>

<title>Numeric Character reference in Html</title>

</head>

<body>

<h2>&#169;Copyright 2022, All Right Reserved</h2>

</body>

</html>

Output:

special character in html5

You can see that the code here replaces numeric character references with special characters. These are listed in the special characters reference as well as the character entity references.

Summary

In this article, I have explained how to display special characters in HTML5. Did you know what kind of characters are special characters?

There are two types of representation of special characters: character entity references and numeric character references. Either can be displayed, but let’s choose while considering the visibility of the code.

If you find this article useful then please make sure you check out more articles in the Manu. Also if you have any questions regarding this article, then please do share your thoughts in the comment section. I will love to answer.

Related Articles

Leave a Reply

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

Back to top button