Common HTML Tags and Special Characters

Fundamentally, the study of HTML is in the major part a study of tags (and thier attributes). The four basic tags that we saw on the Structure and Basic Tags page are used solely to create an HTML document. In this and subsequent pages, we will see the tags that are used to modifify and insert document elements. First we will begin with a few ubiquituous tags that will also help us understand more concepts.

Tag	Description
<pre>...</pre>	Encloses preformatted text. That is, the text inside this tag will be displayed just as it appears in the source code, but in a monospaced font. Text within this tag will only be wrapped at the linebreaks in the source, and spaces will not be collapsed.
<br /> or <br>	Produces a line break. (i.e., whatever follows is written on a new line). This is an empty tag since it does not have a content.
<p>...</p>	Forms a paragraph. note
<div>...</div>	Defines a rectangular block of space which can contain other elements.
<span>...</span>	Container of text or other elements.
<hr /> or <hr>	Draws a horizontal line. This is an empty tag.
<!--...-->	Encloses comments. Any content enclosed by this tag is not displayed by the browser. Comments are accessible only if a reader views the source file. more explanation

Now, equipped with these additional tags, we can display our example document just the way we would like it to appear. We shall use two methods to do this. The first and the simplest way is to place the entire text inside a <pre> tag. To do this, place <pre> just after <body>, and place </pre> just before </body>. Try it and see the effect.

The second method is to use line breaks and paragraphs as shown below:

  <html>
  <head>
  <title>My First Web Page</title>
  </head>
  <body>
  <br />
  Welcome To My First HTML Document.<br/>
  <br/>
  Up to now I have learned, among other things,<br/>
    1. what tags are,<br/>
    2. that an HTML document is made up of tags and their contents,<br/>
    3. the structure of an HTML document consists of the HEAD and the BODY parts.
		
  <p>Everything seems to be very clear. I am even writing my first document.</p>

  <p>
  Oh Ya, now looks more like it except the indentations before the numbers. 
  I havee ven added a horizontal line at the end. But, Why aren't the spaces 
  before the numbers not showing? I hope I will get the answers soon.
  </p>
  <hr />
  </body>
  </html>

Copy and save this example as ex02.htm to see the effects of the <p> and <br/> tags we used. Or, you may click here; you may also look at the source code of the page.

When you view it in the browser, you will notice that it is close enough but not exactly the way we want it to be. First, the spaces before the numbers 1, 2, 3 are missing (see Special Characters below). Second, the last paragraph may be written in one or more lines depending how you have resized your browser. This later one is perfectly alright since the width of a paragraph depends on the width of the window. In fact, you shouldn't try to use line breaks inside a paragraph since you don't know the width of the window the reader of your document is using. Note also that the <br/> tag just continues to the next line while <p> leaves blank lines above and below the paragraph.

TOP

Special HTML Characters

At least two prominent questions arise at this point:

1. If the browser ignores spaces, how do we insert a series of spaces?
2. Since the browser translates the greater than (>) and less than (<) symbols as tag delimiters, how do we display these symbols if we want to write some mathematical expression such as x > y? Or, how did we even write those symbols on this and all other pages?

The answer to these questions lies in what is called HTML special characters.

Special characters are single words that start with with an ampersand (&) and end with a semicolon. In between come certain names or hexadecimal numbers designated to identify that special character. For example, the special character used to insert a space is   (non-breaking space) or  . The table on the right lists some of the most frequently used special characters.

So, now you can go back to your example ex02.htm and place two or three spaces before the numbers 1, 2, and 3 to give it the desired appearance.

Most frequently used special chacters

Symbol	Special character
Symbol	by name	By number
space
<	<	<
>	>	>
&	&	&
©	©	©
™	™	®
®	®
¿	¿	¿

We saw a few common tags in this section, and obviously we will see more of them in the proceding sections. But, before going any further, we will stick to these common tags and reveal additional characteristics of tags that are used to modify a document element. For instance, how do we make a paragraph centered or right-justified in the page? How do we make a red or thick or short horizontal line? These modifications can be done with what are called tag attributes - the subject of the next section.

TOP