- Web Development Tutorials

HTML: Basic Format

About HTML tags and the basic page format
Now we are able to start learning about HTML tags. An HTML tag will always begin with a "less than" sign, like this: <. The tags will end with a "greater than" sign, like this: >. An example would be the tag used to underline text, <u>. You would place this before the text you want to underline. This is called an opening tag, which begins the operation you wish to perform. In order to end the underlining, you must use a closing tag. A closing tag will be the same as the opening tag, but will have a forward slash before the command, like this: </u>. So, if you would like to underline the phrase "HTML Rules!", you would write the following in your text editor:

<u>HTML Rules!</u>

The result of this would be:

HTML Rules!

In the past, not all tags would require a closing tag. An example would be the image tag, which places an image on the page. It looks like this:

<img src="myimage.gif">

Other examples would be a line break: <br> and the horizontal rule: <hr>. These are called empty tags, which do not have a closing tag. With the new coding standards in place, these need to be closed. Since they do not have closing tags, they are closed with a forward slash in the opening tag, like this:

<img src="myimage.gif" />
<br />
<hr />

Also, in the past you could capitalize the tags. <P> was the same as <p>. With the new standards, all HTML tags are supposed to be in lowercase, so this is what we will use in the examples here.

You can use as much space between things as you like. So:

<u>   Underline Me!    </u>

Is the same as:

<u>Underline Me!</u>

Is the same as:

Underline Me!

A basic HTML file will have the format below. Read through and see if you can guess what the different tags will do: (Don't worry, I'll explain them at the end of the example.)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<title>I Love HTML</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Everything displayed on your page will be in here.


Okay, to make sense of this, we'll go through the tags. The first one we see declares the doctype (for more on this, see the explanation at W3Schools). This document uses XHTML Transitional. The next tag we see is the opening <html> tag (which is the last tag to be closed at the end of the document).

The next tag we see is the <head> tag. This opens a section in which you can title your page, use keywords, and add other descriptive information to the page. The section ends with the </HEAD> tag. At this time, the only part of the HEAD section we will deal with is the title (meta tags are explained in the meta tag tutorial), which brings us to the next tag.

The <title> tag allows you to create a title for your page. The title is only used for bookmarks, search engines, and as the name of the browser window. It will not show up on your Web page unless you type it in the body section (explained below). To end your title, use the </title> tag. For instance, in the example, the title is "I Love HTML" (That's not true all the time, though).

The <body> tag opens the section that will be displayed in the Web browser. This is where most of our work will be done. To end the body section, use </body>. The above example makes a rather boring Web page (even worse than the one in the previous tutorial). The browser would display this:

Everything displayed on your page will be in here.

Yuck. All we have is a line of text aligned to the left of the screen. Well, let's go to the next tutorial and see if we can add a little life to our page of text. Let's go to Text Tags.

Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy