How to Add Special Characters in HTML with Example

Many times, we want to use special characters on our webpage, like the ampersand symbol. But that time only “&” cannot type, because it is not appropriate in HTML. There are difficult to type the symbols and some special characters, In this post, you will master how to add Special Characters in HTML

That’s why, we use special codes to represent the Special characters. You can use this easily in your HTML code without interfering with the actual HTML code.

Role of special characters in HTML

When you use HTML and type the text that is designed to be viewed, you usually don’t need any special code—you just use your computer keyboard to add the appropriate letters or characters. The problem occurs when you want to type a character into readable text that is used as part of HTML code. These characters include the < and > characters used in the code to begin and end each HTML tag. You can also include characters like © and Ñ in the text that don’t have direct analogs on the keyboard. For characters that don’t have keys on the keyboard, you enter the code.

Special characters are specific parts of HTML code that are designed to represent characters used in HTML code, HTML presents these special characters with numeric or character encoding so that they can be inserted into an HTML document, read by a browser, and displayed properly for your site’s visitors to view.

At the core of the syntax of HTML code are three letters. You should never use it in the readable parts of your webpage without first encoding it for proper display. They are the greater-than, less-than, and ampersand symbols. In other words, you should never use a less than < symbol in your HTML code unless it begins an HTML tag. If you do, the character will confuse the browser, and your pages won’t render as you expect. Three characters you should never add:

  • less-than sign <
  • greater-than sign >
  • ampersand & 

When you type these characters directly into your HTML code — unless you are using them as elements in the code — type in the encoding for them, so they appear correctly in the readable text:

  • less-than sign — <
  • greater-than sign — >
  • ampersand — &

Every special character starts with an ampersand – special characters end with a semicolon. lt creates a less-than sign when appearing in HTML between ampersands and semicolons.

How to add Special Characters in HTML?

When creating a webpage or a website time needs to add special characters, punctuation, and many more. But is difficult for typing and not directly used in this.  Some special characters like ampersands (&), angle brackets (< and >) many more.

A web browser uses the angle bracket symbol for opening as well as closing. If you want to use this symbol in that way, it may cause errors on your webpage. Some examples of symbols you need to use code for it.


  • Ampersand (&)
  • Single quote (‘)
  • Double quote (“)
  • Greater than (>)
  • Less than (<)

Some other symbols like copyright and trademark symbol which is not needed to use the code. But if you want to use it, then sure you use it, but it is very awkward to type. In some cases, the browser does not represent these symbols.


  • Copyright symbol (©)
  • Trademark symbol (™)
  • Registered trademark symbol (®)

What Are Named and Numeric Entities?

You can represent your every symbol using a numeric entity code, and most commonly with a named entity. Some examples:


Named Entity Code

Numeric Entity Code

Symbols view





Less than




Greater than




Double quote




Single quote







Trademark symbol




Registered trademark symbol



To add the symbols you can use either the named or numeric code.  For example, using either “&copy;” or “&#169;” will display the copyright symbol.

Adding Emojis to Your Webpage

you can also be adding emojis to your webpage using the entity code. all emojis have the entity code in HTML. Some examples include:


Numeric Entity Code

Smiling Face (😃)


Laughing Face (😆)


Funny Laughing Face (😂)


Akwered Laugh (😅)


Smiling Face with Halo (😇)


Using Entity Codes How to add Symbols on a Webpage

How to Insert Symbols into a Webpage Using Entity Codes You can insert entity codes in your HTML page content. Viewing your web page in a browser will convert the codes into their corresponding symbol.

  1. In a new HTML file, add the default Boilerplate of the HTML.
<!DOCTYPE html>
    <title> Symbol and Entity Example </title>
    <meta charset="UTF-8">


2. In the body tag, add some HTML code, and also type the symbol name or numeric code of that symbol.

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <h1>HTML Symbols</h1>
  <p>Copyright symbol: &copy;</p>
  <p>Ampersand symbol: &amp;</p>
  <p>Trademark symbol: &trade;</p>
  <p>Smiling Face: &#x1F603;</p>
3. Open your HTML file on the browser to view the symbols that you put in.

How to use Special Characters and Symbols in HTML

Special tip on Special Characters in HTML

Always end your code or character with a semicolon. Some HTML editors allow you to post HTML code without the final semicolon, but your pages will be invalid and many web browsers will not display entities correctly without them.
Always start with an ampersand, Many web editors allow you to “amp;” allow use. But when you display the ampersand alone in XHTML, it produces a validation error.

Test your pages in as many browsers as possible, If a character is important to understanding your document and you can’t test it in the browser/OS combinations your customers use, you should find another way to represent it. However, before you resort to images or anything else, try one of the browser testing tools that can validate your code on multiple browsers.

Now you can know how to display Special Characters in HTML on your website and search for more interesting symbols and special characters in HTML to enhance your Website. While using the symbols you take knowledge of other symbols for use in the Webpage.

If you want to learn the HTML elements in a simple way then you can check the 17 simple HTML tags With examples and the source code that you will be learned in just a few minutes.

Leave a Reply

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

error: Content is protected !!