Study Guide: Web Design - What is an HMTL Tag?

<<Previous

Next>>

An HTML tag is a command or instruction in an HTML file (web page). A tag is located inside pointy brackets: < >. This is how the web browser interpreting the page knows the difference between text to be displayed and text that instructs how to display the text. There are many different tags that do many things in a web page. If you look at the source of a web page you may find many tags that you do not understand yet. However, with just a few tags, you can create a basic web page.

Here is an example of a tag. The <title> tag enables you to give a title to your page. This title typically displays itself not on the page, but on the top title bar of the browser window. Also, if someone bookmarks your page, it is the title that is the name of the bookmark.

As a web browser interprets a page, it reads the <title> tag and knows that the next text it encounters is the title of the page. The browser must also know when it is has completed reading the title. That is what the </title> tag is for. When the web browser reads </title>, it then knows that it is finished reading the title and it moves on to the next item.

Most HTML tags have an associated </tag> to indicate the end of the particular instruction. There are a few exceptions to this, and we will address some later in this tutorial. Now let's learn about a few more basic tags. Then we'll create a web page with just four tags.

The <HTML> tag is used to tell the browser "the text in this file is HTML code and should be interpreted as such." The first tag in your web page should be <HTML> and the last tag should be </HTML>.

The <HEAD> tag tells the browser "here are some things to know about my page", and the </HEAD> marks the end of the header information. There are only a few things that belong in the header of your page, and none of the page's text should be inside the header. The title is one thing that belongs in the header.

The <BODY> tag tells the browser "here is the body of my page". And </BODY> indicates the end of the body of your page. All of the content of your web page should be contained between these two tags.

Here is an example of a simple web page using only these four tags:

<HTML>

<HEAD>

<TITLE> My first web page. </TITLE>

</HEAD>

<BODY>

Welcome to my first web page. Right now, it only has 4 tags in it.

</BODY>

</HTML>

The format of the HTML code has no relation to what gets displayed on the screen. If your HTML code looked like this:

<HTML><HEAD><TITLE> My first web page. </TITLE></HEAD><BODY>

Welcome to my first web page. Right now, it only has 4 tags in it. </BODY></HTML>

it would display the same way in a browser window. But you wouldn't be able to read it very well as you edited the HTML code. It is important to keep your HTML code readable. It is also very important to be able to match up the begin tags with their end tags. For example, you should avoid creating code like this:

<HTML>

<HEAD>

<TITLE> My first web page.

</HEAD>

</TITLE>

<BODY>

Welcome to my first web page. Right now, it only has 4 tags in it.

</BODY>

</HTML>

The <TITLE> tag is located in between the header tags, but the </TITLE> tag is located outside the header tags. It should also be inside the header tags. Tags can be nested inside each other, but if a begin tag is located inside other tags, it's corresponding end tag must also be located inside the tags. For example, both the <BODY> and </BODY> tags are inside the html tags.

Exercise: Write your first web page.

First, you'll need to be able to create a text file. Use a text editor to do this.

Place an <HTML> tag at the top of your file, and an </HTML> tag at the bottom.

Inside the <HTML> and </HTML> tags, add the <HEAD> and </HEAD> tags, then the <BODY> and </BODY> tags.

Put the <TITLE> and </TITLE> tags between the <HEAD> and </HEAD> tags.

Make up a title for your page and type it in between the <TITLE> and </TITLE> tags.

Type some body text for your page between the <BODY> and </BODY> tags.

Save your file (on your computer where you can find it again).

Now, let's look at what you've done. View the file with a web browser. Launch Netscape, go to the file menu, Open page, and choose the file you just created and saved. (There are other ways to do this that are dependent upon your software and platform.)

This is your first web page! Celebrate with your friends.

How does your page look? Can you see the title of your page on the top bar of the browser window? Can you see the body text of your page in the window? It is just simple text at the moment. Now we'll make your page fancier.