HTML Basics: Formatting

About HTML tags and the basic page format.


Now we are going to start talking about HTML tags. A 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 always 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!

Not all tags will require a closing tag.  An example would be the image tag, which will place an image on the page.  It looks like this:  <IMG SRC=”myimage.gif”>  .  I will explain all the extra stuff later,  this is just an example of a tag that requires no closing tag to follow it.  Other examples would be a line break: <BR> ,  a horizontal line: <HR> , and a paragraph: <P> .

Also, you do not need to capitalize the tags. <P> is the same as <p>. You can also 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:

<U>
Underline Me!
</U>

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.)


<HTML>

<HEAD>
<TITLE>I Love HTML</TITLE>
</HEAD>

<BODY>
Everything displayed on your page will be in here.
</BODY>

</HTML>


Okay, to make sense of this, go through and find the pairs of opening and closing tags.  The first one we see is <HTML>.  This signals the beginning of an HTML file.  The closing tag , </HTML>,  is at the very end of the document.  As you might have guessed, it signals the end of the HTML document.  Everything (tags, text, images) should be between these two tags, as they are the beginning and end of your page.

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, 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.  The browser  would display this:


Everything displayed on your page will be in here.

>> NEXT: HTML Basics – Headings and Paragraphs