HTML Entities\Special Characters

What are Special Characters?

The characters, other than the alphabets, numbers and common symbols, like © (copy right), ™ (trade mark), € (euro sign), ® (registered), ≥ (greater than), Ω (omega), α (alpha), and β (beta) are known as special characters.

We often need to put some of these special characters in our ordinary documents and especially in mathematics documents.
The bad news here is that you cannot insert these special characters in your document directly like alphabets and numbers. You need to put code to insert these characters in our document. These characters can be very useful for your webpages. If, for example, your website contains mathematical data or you want to show copy right or trademark symbols on your website then you need to learn how to insert these characters. A brief description on this is given below:

Special Characters in HTML

Even in ordinary documents we cannot put special characters directly using keyboard instead we’ve to do something else to enter such special character like to insert a symbol we insert it from the Symbols in MS Word 2010 or in Open Office. Same thing apply here for HTML documents in order to insert special character in your webpages. Unlike word processors you need to provide some special codes to enter these characters. The detailed table is given here below in which a code is given against each symbol.

Symbol	HTML Entity	Name
&	&	Ampersand
¢	¢	Cent
©	©	Copyright
÷	÷	Divide
<	&lt;	Less than
>	&gt;	Greater than
µ	&micro;	Micron
·	&middot	Middle dot
¶	&para;	Pilcrow (paragraph sign)
±	&plusmn;	Plus/Minus
€	&euro;	Euro
£	&pound;	British Pound Sterling
®	&reg;	Registered
§	&sect;	Section
™	&trade;	Trade Mark
¥	&yen;	Japnese Yen

White Spaces in HTML

What are White Spaces?

In a normal document, like a *.doc document (MS word document) or any other, you need to insert some invisible characters like space, tab (a combination of 8 spaces), new line, section break and page break etc to improve readability of the reader and the look of the document. These invisible characters are known as white spaces.

White Spaces in HTML

Like any other document when we create any webpage (HTML document) we need to insert some white spaces to improve the readability of the users and the look of the document as you are observing in this webpage. In advanced word processors you can insert white spaces in your document quite easily but in case of an HTML document, except the single space white space, you can’t include other white spaces directly in your webpage. For example, you can’t include a:

• Newline directly in your webpage by just pressing the Enter Key.
• Tab directly in your webpage by just pressing the tab key.

There are different and special words, provided by the HTML, used to insert such white spaces, which cannot be inserted directly using standard keyboards, in a webpage. Here is some explanation of how to insert different white spaces in a webpage:

Inserting more than one spaces in an HTML Document

A single space can easily be inserted in an HTML document as in any word processor. But, what you’ll do if you want to add more than one single space consecutively in your HTML document as if you’ll insert many spaces in your HTML document, while writing HTML code, only one space will be rendered by the web browser and other spaces will be ignored and not shown. For this purpose you need to do something special and HTML provides us a way to insert many single spaces in your webpage. You need to include &nbps at the point where you want to enter spaces in your webpage.

Exemplary Code:

<b>I've &nbsp &nbsp included &nbsp &nbsp  two &nbsp &nbsp  spaces &nbsp &nbsp  after &nbsp &nbsp each &nbsp &nbsp word! </b> </br<

Example Result:

I've     included     two     spaces     after     each     word!

Insert Tab in an HTML Document

Tabs are used to enter a gap of eight spaces between a word and its explanation. It is useful to align your document text. Unfortunately HTML doesn’t provide us the facility to insert a tab in your webpage. If you want to enter a tab in a webpage you can use &nbsp 8 times.

Exemplary Code:

<b>Name: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp M.Khuram</b></br>
<b>E-Mail: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp m.khuramj@yahoo.com</b> </br>

Example Result:

Name:                 M.Khuram
E-Mail:                 m.khuramj@yahoo.com

But it's better to use tables for such type of alignment of text.

Insert a New Line in an HTML Document

When you are working with text you need to end and start lines and paragraphs. For this purpose we need to enter a new line in a document. HTML provides us a tag to insert a newline in your webpage, you need to include </br>, <br></br> or <br /> tag at the point where you want to include a new line on your webpage.

Exemplary Code:

<b>This is an exemplary sentence and at the end of this sentence we’ll start our new line!</b></br></br>
<b>This is also an exemplary sentence which is written after a <em>line break</em> included in this<em>webpage.</em>

Example Result:

This is an exemplary sentence and at the end of this sentence we’ll start our new line!

This is also an exemplary sentence which is written after a line break included in this webpage.

Structure of a Webpage

No Need to Purchase Any Extra Software to Create a Webpage!

To produce or create anything in this world we first need to understand the thing itself and its structure. Understanding the structure of an object we can not only create it but also improve it. A webpage is a hypertext document and like every other thing a webpage also has a structure and consists of different parts such head and body. Each of these parts of the webpage is explained in the following paragraphs:

Document Type

A webpage can be written in any of the available versions of HTML. That's why, first of all the type (version) of the webpage is checked whenever a webpage is rendered in a web browser. Then the webpage is displayed according to the type of the HTML. To specify the type of the webpage we use the <!DOCTYPE> tag. This is the very first tag in a webpage. It tells a browser what version of HTML should be used to render the webpage. We can use any version of the HTML or XHTML (it depends upon available technology in a particular region). Different versions and there <!DOCTYPE> is given in the following table:

Version	Doctype
HTML 5	<!DOCTYPE html>
HTML 4.01	<!DOCTYPE HTML PUBLIC "-//W3C//DRD HTML 4.01//EN" "http:// www.w3.org/TR/html4/strict/dtd"&gt
XHTML 1.0	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt
XHTML 1.1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Frameset//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt

Page Declaration <html></html>

If you wanna write, sketch or draw something you need to have a page whether it would be a hard page (a page having physical existence like a printed page) or soft page (a page white blank working area shown in word processors as a page). Same thing implements here in web development. You need to declare a (logical) page where you'll display your text and objects on it. To declare a (logical) page we use <html></html> tags. This is the second starting tag of our webpage and ends in the end. All other tags are put in between <html></html> tags. This page can further be divided in different sections and blocks i.e. head and body.

Head <head></head>

Now we have declared a page for displaying our data on a web browser. The next step is to divide this page in different portions to put our data for the user and for the server and Search Engine. All the tags and data (like version of HTML, title of the webpage, language, author etc) in head element is used either by the server, search engine or web browser. Nothing is pur here for user in this element.

Title <title></title>

When we are developing a website, it is possible that the site may consist of tens, hundreds or even thousands of webpages. It is necessary to entitle each and every webpage with a suitable title to distinguish it from the others (This is helpful for the Search Engines. You'll learn about it later in this tutorial). That's why, HTML provides us a tag to entitle a webpage. This title is shown on the title bar (in old web browsers) or on the tab (in advanced web browsers) of the web browser. This tag is put in between the <title></title> tags.

Body <body></body>

After Head the Body is the second portion of our webpage. All the elements mentioned above are very important for the servers, search engines and web browsers but are not displayed in a browser window for the users except the title tag. But data in between <body></body> tags is the actual data which is displayed in browser window for the users (if not hidden deliberately) i.e headings, text, tables, lists, images, etc.

Example of a Webpage:

Follow the following steps to check the example for better understanding.

1. Copy the following code.
2. Open Notepad.
3. Paste the code in Notepad. (Open the Edit menu --> Paste)
4. Save the file with .html extension. (Open File menu --> Save As --> Name the file as "Example.html" including double quotes)
5. Open the file in any web browser and Match the result in the given picture.

Exemplary Code:

<html>
  <head>
     <title> Exemplary Title</title>
  </head>

  <body>
    <b>This is the body of the webpage!</b></br>
    <b>Every thing, in this portion of the webpage, will be displayed in the browsers window</b>
  </body>
</html> 
                

Example Result:

This is the body of the webpage! Every thing, in this portion of the webpage, will be displayed in the browsers window