HTML Special Characters

By Tony 2023.5.3 • Last updated 2024.1.27

Let's say you're starting a code tutorial website like this one, and you want to write this line of code within your page: <h1>Hello World!</h1> but whatever you try, you just can't type < > symbols normally. Does that mean you can't do that in HTML? This is what HTML special characters is about. Here is an example:

<h2>Symbols Entities</h2>
<ul>
ww<li>Less than: &lt;</li>
ww<li>Greater than: &gt;</li>
ww<li>Numbered entity: &#89;</li>
ww<li>Named entity: &target;</li>
ww<li>Double quote: &#34;</li>
ww<li>Single quote: &#39;</li>
ww<li>Semicolon : &#59;</li>
ww<li>Copyright : &copy;</li>
ww<li>A random symbol : &#3348;</li>
ww<li>The first numbered entity: &#33;</li>
ww<li>The last: &#55203;</li>
</ul>

HTML special characters are typed using "entities" – codes that start with an ampersand (&) and end with a semicolon (;). Numbered entities use a symbol list with over 50,000 symbols. Put a hashtag (#) and the symbol's number code after the ampersand (&) when using numbered entities.

&#999; is ϧ

HTML5 also has named entities using letters after & instead of a hashtag and a number that represent letters, punctuation, math, and currency symbols. However, named entities are more limited than numbered entities.

&excl; is !

Here's the output of the example above:

Symbols Entities

We type special characters in HTML by using codes called numbered intities and named entities. Numbered entities follow the format
&#number-that-represents-the-symbol; and named entities follow the format &letters-that-represent-the-symbol;. HTML special characters are very useful, so remember the important symbols' codes!

Symbol Numbered entities Named entities
&#160; &nbsp;
< &#60; &lt;
> &#62; &gt;
& &#38; &amp;
# &#35; &num;
" &#34; &quot;
' &#39; &apos;
¢ &#162; &cent;
© &#169; &copy;

Note: the symbol will vary depends on the font style.