Basic HTML Tags

HTML works with what are called tags. These tags tell the browser where to put text and images on the screen as well as define some properties for these elements. Most tags will come in pairs of "opening" and "closing" tags, which surround the elements that are going to be affected by them. These tags pairs will always be in the form:

Opening tags:
	<tag_name>
Closing tags:
	</tag_name>

Head/Body Tags

The <HTML> tag is the first tag that will appear in your code. This in essence tells the browser that an HTML document is coming. At the very end of the document will be its closing tag </HTML>. These pair of tags define what the browser will read and transfer to the screen. Any text outside these tags will be ignored.

The next tag is the <HEAD> tag. As you may have guessed, this tag will enclose all of your header information. There is quite a bit of information which can be defined in the header, but for now we will only discuss one; the <TITLE> tag. The <TITLE> tag puts the title of your web page at the top of your Netscape or Internet Explorer window. The header ends with a </HEAD> tag.
The next tag will be the <BODY> tag. This starts the body of your web page, which will be all the text, links and images that are to be displayed on the screen. At the end of this, you must have a </BODY> tag. Usually, the </BODY> tag will be immediately followed by the </HTML> tag.

Putting these tags together, we can construct a very simple (but functional) web page:

<HTML>
<HEAD>
<TITLE>Nathan's Homepage</TITLE>
</HEAD>

<BODY>
This is the body of my web page.
</BODY>

</HTML>

Which would look like this. Granted, it isn't all that exciting, but all web pages (no matter how complex) work in the same way as this one.

Style Tags

Style tags dictate what text will look like once it is displayed on the screen. Something to keep in mind as you use these tags is that their appearance will not be the same on every system. Fonts and font size can be changed by the user of the browser. The first style tag is , which displays bold text. An alternate for is , which will give the same results.

Example:

"He <B>boldly</B> drew his sword"

"He boldly drew his sword"

Another style tag is the tag, which gives emphasized text. On most systems this will show on the screen as italics. works in exactly the same way as .

Example:

"He <EM>emphatically</EM> drew his sword"

"He emphatically drew his sword"

The final types of style tags are the "heading" tags. These tags display text in six different font sizes, which are usually used to put headings on sections of your text, such as I have used for "Basic HTML Tags" above. They come in the form <Hn>, with n being a number between one and six. One will give you the largest font and six will give you the smallest.

Example:

<H6>Heading Six   </H6>
<H5>Heading Five  </H5>
<H4>Heading Four  </H4>
<H3>Heading Three </H3>
<H2>Heading Two   </H2>
<H1>Heading One   </H1>

Heading Six

Heading Five

Heading Four

Heading Three

Heading Two

Heading One

Special Tags

When browsers look at text in an HTML document, they don't read any line breaks or place any blank lines that you may have put into your document. This is because "white space" is ignored. This is any blank spaces or carriage returns that you might have put into the document. The browser rearranges all your words side by side, and wraps them to the size of the window.

Example:

"To <B>be</B> 
or not to <B>be</B>, <EM>that</EM>  is the 
	question."

"To be or not to be, that is the question."

In order to get around these constrictions, several more tags exist which allow for line breaks and paragraph breaks. The former is the tag, which will end the current line of text and go to the beginning of the next. The latter is the tag, which goes to the next line on the screen and starts a new paragraph. Both of these tags do not require a closing tag.

Example:

"This is a sentence which will be <BR>
split into to lines of text."

"This is a sentence which will be
split into two lines of text."

"This will be a very short paragraph which 
 will be, in turn followed by another.
<P>
This is the second paragraph of this 
exceedingly boring text.  Maybe the next
paragraph will be better than the first."

"This will be a very short paragraph which
will be, in turn followed by another.

This is the second paragraph of this
exceedingly boring text. Maybe the next
paragraph will be better than the first."

The final tag that will be covered in this section is the <HR> tag, which stands for horizontal rule. This tag will put a horizontal bar across your window, which is used to separate different parts of your text, or add emphasis to the next part. This tag also does not require a closing tag.

Example:

Hamlet
<HR>
By Shakespeare

Hamlet

By Shakespeare

Putting it all Together

Now that we have a larger arsenal of tags, it is possible to create a complete web page that is much more interesting than our last one:

<HTML>
<HEAD>
<TITLE>Nathan's Homepage</TITLE>
</HEAD>
<H1>Nathan's Homepage</H1>
<HR>
This is my little <B>spot</B> on the internet<P>
I hope that you like it <EM>immensely</EM>.
</HTML>

This document would look like this.