Introduction to HTML and HTML Tags

Welcome to the part 5th of our tutorial where we introduce you to HTML.

1 - Finding a host	2 - Programs	3 - Designing page layout
4 - Designing part 2	5 - Intro to HTML	6 - Intro to HTML Part 2
7 - Creating the page

First let's look at the way HTML works, to create a HTML document (webpage) you use HTML tags.

HTML tags start with the < symbol and end with the > symbol.

For example, the tag to create a title for your page (what appears at the top of the browser window) is written as <TITLE>, most tags require a second tag to stop the effect, these tags are started with </ and end with >.

The tag to denote the end of the page title is </TITLE>, it is important to remember this as you might get strange results if you forget the end tag. So to put this in an example the full procedure to create a page title is:

<TITLE>your title goes here</TITLE>

As you can see the object, in this case the page title, goes in between the tags.

For a full list of Tags see our HTML Tags Guide.

Now, for any page you create it needs certain tags included BEFORE you create the page content. These tags are given below along with an explanation:

<HTML> - </HTML> = This denotes that the document is a HTML document and not for instance a text document. All of your HTML tags will go in between these tags, or to put it another way, the <HTML> tag goes at the start of the page (the first tag) and the </HTML> tag goes at the end of the page (the last tag).

<HEAD> - </HEAD> = This denotes the heading of the page. This is the next tag to place on your page after the <HTML> tag, inside the <HEAD> and </HEAD> tags is the place to put your <TITLE> tag and any other special tags such as <META> tags (explained later). The most important thing for now is to place your <TITLE> tag inside.

<BODY> - </BODY> = This is where you put your page content. The <BODY> tag goes after the </HEAD> tag, and the </BODY> tag normally goes just before the </HTML> tag.

To explain it better we will use an example, the following is the standard structure for a HTML document (webpage):

<HTML>

<HEAD>
<TITLE>your title goes here</TITLE>
</HEAD>

<BODY>
this is where the rest of the tags, text, images etc will go that make up your page
</BODY>

</HTML>

Now you can see the tags in action and hopefully get a clearer picture of what we have explained. All HTML documents have this basic layout, so be sure to make a note of the layout or click here for a printable version that you can keep by you when you design your pages, although you will soon get used to the structure.

Now we should look at some other HTML tags that we are going to use in our example. If you want a full list of tags then look at our HTML Tags section. The tags we are going to use are text formatting tags.

<CENTER> - </CENTER> = This tag centres on the page anything imbedded in the tags, for instance text or an image.

<BR> = This tag creates a new line, it does not require a closing tag.

<P> - </P> = This tag denotes a new paragraph, the closing tag is not essential but it is good practice to use it as you may get unexpected results.

Next we will have a look at how we use these tags within our page.

Click here to continue the tutorial.