HTML from Scratch: HTML Special Characters. Lesson #4 Overcod.net

HTML from Scratch: HTML Special Characters. Lesson #4

Hi, friends!
Today, I’ll talk about special characters in HTML — an essential part of any web document. You’ll learn:

why they are needed,
how to use them properly,
and, of course, find a handy table of special characters at the end of the article.

Ready? Let’s begin!

Special characters are unique symbols that either don’t exist on the keyboard or are misinterpreted by browsers when used directly. For example:

How to write the © symbol? Simply typing it in the code won’t work.
How to add multiple spaces in a row? HTML will ignore them, leaving only one space.
How to display HTML tags as text? If you just use < and >, the browser will treat them as commands, not text.

This is where special characters come to the rescue. Let’s look at some examples.

If you try to add the following code:

<html>  
  <head>  
    <title>Example</title>  
  </head>  
  <body>  
  </body>  
</html>

the browser will treat it as part of the page, not plain text. To fix this, replace < and > with < and >. Here’s how it will look:

&lt;html&gt;  
  &lt;head&gt;  
    &lt;title&gt;Example&lt;/title&gt;  
  &lt;/head&gt;  
  &lt;body&gt;  
  &lt;/body&gt;  
&lt;/html&gt;

Result:
<html>
<head>
<title>Example</title>
</head>
<body>
</body>
</html>

Convenient, isn’t it?

Regular spaces in HTML can be tricky. If you want multiple spaces, use  . For example:

word1&nbsp;&nbsp;&nbsp;word2

Result:

word1 word2

All rights reserved &copy; 2024.

Character	Code	Description	Example
&	&	Ampersand	&
<	<	Less than	<
>	>	Greater than	>
“	"	Double quotation marks	“
‘	'	Apostrophe	‘
©	©	Copyright sign	©
®	®	Registered trademark	®
™	™	Trademark	™
€	€	Euro	€
£	£	Pound	£
¥	¥	Yen	¥
°	°	Degree	°
±	±	Plus-minus	±
×	×	Multiplication	×
÷	÷	Division	÷
—	—	Em dash	—
–	–	En dash	–
		Non-breaking space	(no visual output)