How to handle special characters in HTML?

When you paste the URL of a news site or the URL of an online shopping product on an SNS, etc., it may contain symbols such as “%20” that were not in the original URL.
This is called “URL encoding”, and character strings that cannot be used in URLs (double-byte characters, double-byte symbols, etc.) are converted by character code.

Characters that may have an adverse effect when trying to be displayed on HTML are called “special characters”.
In order to handle special characters in HTML, tricks such as conversion are required.
This article describes how to handle special characters.

What are special characters in HTML?

As introduced at the beginning, special characters in HTML are characters that adversely affect the syntax of HTML .
In particular

・”<” and “>” included in HTML tags ・Single
-byte spaces that are ignored in HTML code
・Symbols, marks, pictograms

becomes.

Using special characters as is

If you write special characters as they are in HTML, they may not work as HTML syntax.
For example, let’s say you want to display a string like this:

If you write it like this, it will not be displayed correctly.

This is due to the browser’s ability to detect missing closing HTML tags.
In other words, the previous code would be interpreted by the browser as:

Originally, it would be a convenient function to display even if there is a mistake in the HTML description, but if you want to display the tag intentionally, you should not describe it normally.

How to display special characters as letters

HTML has an “escape string” as a way to display special characters as characters .
As in the previous example, if you want to display tags, write as follows.

<div> &lt;p&gt;はparagraphを意味します。</div>

Now you can see the tags.

In this way, HTML has escaped (converted) character codes corresponding to special characters.

Correspondence table of special characters and character codes

Here are some examples of characters and codes that can be used as special characters.

Escaping HTML tags

Code used to create website

We will introduce codes for special characters that are frequently used when introducing products on websites.

era names and words

Special characters such as era names and units defined by the character code Shift-JIS are also defined as codes, so you can express them by using them.
However, please note that these symbols may not be displayed correctly in overseas browsers.

display characters	code	explanation
㍾		Meiji
meter		Taisho era
meter		Showa
㍻		Heisei
㋿		Reiwa (Note that it is not displayed in old browsers)
㌰		Pico
㌨		Nano
㍃		micro
㍉		mm
kg		kilo
㍋		mega
㌐		Giga

Character code for macOS

The macOS keyboard uses a different keyboard icon than Windows and Linux.
If you want to create a procedure for macOS, use the following character codes.

display characters	code	explanation
⌃		control
⇧		shift
⇪		caps lock
⌘		commands
⌥		options
⌦		delete (right)
⌫		delete (left)
⏎		return

Emoji

Emojis that can be used on SNS can also be displayed as codes.
There are many types of emoticons, so please check the following sites.
You can use it by copying the code in the “HTML Entity” column.

summary

Introduced how to handle special characters in HTML.

You don’t have to memorize the character code, but if you need to display characters that cause problems if you use them as they are, it’s a good idea to be able to search for the corresponding character code.