Special Characters in HTML

Special Characters in HTML is the section 15 of Beginner’s Guide to HTML.

If you want to place < or > characters on your HTML page how would you do that? Go on, try to simply type it there. Seems not like an easy task, isn’t it? If you can remember < and > characters are used to define tags in the HTML. So you wouldn’t be able to type it there because browser will try to process it like a start of an element and will get confused and mess everything up. So reserved characters in HTML must be replaced with something called character entities.

Entities

Entity syntax is like follows. It can be presented in two ways. Either by a name or a number.

&entity_name;OR&#entity_number;

We suggest you to use the name because it is easier to remember. But the thing is numbers are supported by almost all browsers. Keep in mind that entity names are case sensitive. Following are the most commonly used entities.

< less than <
> greater than &gt;
& ampersand &amp;
© copyright &copy;

Following code snippet tells you how to use them in name syntax. Number syntax follows the same way.

[code language=”html”]

Copyright &amp;amp;copy; Let’s Design &amp;amp;amp; Develop

5 &amp;amp;gt; 2

[/code]
Copyright © Let’s Design & Develop5 > 2

Non breaking space

When you try to type more than one space, browser will not display all of them. It will only show a one space. Trick is to use the non breaking space entity. It is widely used entity in creating web pages to enter additional spaces. The syntax is &nbsp;

Diacritical Marks

Diacritical Mark is a glyph added to a letter. Some diacritical marks, like grave (  ̀  ) and acute (  ́  ) are called accents. Diacritical marks can appear both above and below a letter, inside a letter, and between two letters. Diacritical marks can be used in combination with alphanumeric characters, to produce a character that is not present in the character set (encoding) used in the page. The thing is, to represent these marks, you have to use the number.

Following are few diacritical marks.

 Õ               ã               ê              

Symbol Entities

HTML symbols are like mathematical operators, arrows, technical symbols and shapes, are not presented on a normal keyboard. Following are few examples of each.

Mathematical Symbols

&forall; FOR ALL
&sum; N-ARY SUMMATION
&prod; N-ARY PRODUCT

Greek Letters

Δ &Delta; GREEK CAPITAL LETTER DELTA
Γ &Gamma; GREEK CAPITAL LETTER GAMMA

Common Symbols

&larr; LEFTWARDS ARROW
&clubs; BLACK CLUB SUIT
&trade; TRADEMARK
&euro; EURO SIGN

Other important topic we cover in this section is Character Set.

Character Set

To display an HTML page correctly, a web browser must know what character set to use. So what does it mean by character set? We also called it as the charset or character encoding.

ASCII was the first character encoding standard. It defines 127 different alphanumeric characters that could be used on the internet. ASCII supported numbers (0-9), English letters (A-Z), and some special characters like ! $ + – ( ) @ < > .

ANSI (Windows-1252) was the default character set for Windows (up to Windows 95). It supported 256 different codes.

ISO-8859-1, an extension to ASCII, was the default character set for HTML 4. It also supported 256 different codes.

Because ANSI and ISO was too limited, the default character encoding was changed to Unicode (UTF-8) in HTML5. Unicode covers almost all the characters and symbols in the world.

To display an HTML page correctly, a web browser must know the character set used in the page.

This is specified in the tag. Can you remember it. We talked about it in a previous section HTML Head.

[code language=”html”]


[/code]

Let’s go deep in each encoding standards.

ASCII

ASCII uses the values from 0 to 31 (and 127) for control characters.
ASCII uses the values from 32 to 126 for letters, digits, and symbols.
ASCII does not use the values from 128 to 255.

ANSI

ANSI is identical to ASCII for the values from 0 to 127.
ANSI has a proprietary set of characters for the values from 128 to 159.
ANSI is identical to UTF-8 for the values from 160 to 255.

ISO-8859-1

8859-1 is identical to ASCII for the values from 0 to 127.
8859-1 does not use the values from 128 to 159.
8859-1 is identical to UTF-8 for the values from 160 to 255.

UTF-8

UTF-8 is identical to ASCII for the values from 0 to 127.
UTF-8 does not use the values from 128 to 159.
UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to 255.
UTF-8 continues from the value 256 with more than 10.000 different characters.

 


So in this section we learned that we cannot type every character just with pressing the keyboard in HTML. We need to use entities. Also we covered several character sets used in several HTML versions. In the next section we are going to learn about URLs.

WHAT’S NEXT?

Let’s findout more about URLs in HTML.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

12 Comments

Leave a Reply
  1. I used to be recommended this blog through my cousin. I am no longer certain whether this post is written by
    means of him as no one else recognise such particular approximately my trouble.
    You’re incredible! Thank you!

  2. If some one wants to be updated with hottest technologies then he must be pay a quick visit this web site and be up to date everyday.

  3. We absolutely love your blog and find the majority of your post’s
    to be just what I’m looking for. Would you offer guest writers to write content for you?
    I wouldn’t mind publishing a post or elaborating on some of the subjects you write related to
    here. Again, awesome site!

  4. whoah this weblog is fantastic i love reading your posts.

    Stay up the great work! You know, a lot of people are hunting around for
    this info, you can help them greatly.

  5. I like the helpful info you provide in your articles.
    I will bookmark your weblog and check again here regularly.
    I’m quite sure I’ll learn a lot of new stuff right here!
    Best of luck for the next!

  6. Very great post. I just stumbled upon your blog and wished
    to mention that I have truly loved surfing around your blog posts.

    In any case I will be subscribing to your rss feed and I’m hoping you write
    once more soon!

  7. Hi! I could have sworn I’ve visited this blog before but after
    going through a few of the articles I realized it’s new to me.
    Regardless, I’m definitely delighted I stumbled upon it and I’ll be
    book-marking it and checking back regularly!

Comment Below