Understanding HTML Tags and How They Work

You may be asking yourself why you need to know this if you are going to use a WYSIWYG html editor? Well...two reasons...
  1. Some editors are better than others and you might want to make some changes to the HTML that you cannot do from the WYSIWYG editor. It will help to know WHERE you are editing it and what part of your page you will affect by doing so.
  2. You remember METATAGS? they often need to be entered 'by hand' - and it helps to know where and how to put them in.
    TIP: Look at someone else's webpage source (click view/source at the top of your browser window). Pay special attention to the top (Head section) of the page. How did they enter their metatags...? Is there some special technique there that you might find useful for your own page?

REMEMBER that MOST HTML tags MUST have an 'opening' AND a 'closing' tag.
Opening tags are enclosed in 'greater than/less than symbols' - like this: <tag>
Closing tags are enclosed with an added forward slash - like this: </tag>
Whatever is 'between' these two tags, is either printed in the document window or is 'read' as part of the embedded or 'meta content' of the html document.

HERE ARE THE MOST COMMON HTML TAGS
YOU WILL BE WORKING WITH:

<HTML> This 'opens' an HTML document = it tells the browser what kind of document (HTML) is going to be displayed.

<HEAD> This comes next after < HTML> and contains the <TITLE></TITLE>, and the 'metatags' of the document. This includes a Description, and Keywords that help the search engines to find the document on the www. Metatags are ONE EXCEPTION to the 'close' tag rule; they do not require a closing tag, only an opening tag. Metatags contain the information WITHIN the Opening tag, and are closed by using the 'less than' symbol. (See Fig.1, below).

</HEAD> Closes the Head section of the document.

<BODY> This tag will contain the basic attributes of the page, what its background color or image is, what colors the text, links, active links and visited links will be. (It sometimes also contains 'special' instructions to your browser, for instance if certain images need to be loaded 'first' to run an element of the page.)

Sometimes a 'default' FONT is set for the entire document immediately after the end of the 'open' body tag, and looks like this:

<FONT FACE="Arial, Helvetica, sans serif" SIZE="2">
But remember!!! If you use this tag, you must remember to CLOSE it in the SAME POSITION at the bottom of the page...It comes AFTER the OPEN Body, so the CLOSE font tag must come immediately BEFORE the CLOSE body tag at the bottom of the document.
Like this:
</FONT>
</BODY>

Everything that is between the opening <body> tag and the closing </body> tag is what you will see in the html document when you open it in your browser.

After the 'close body' tag, then we have the 'close html' tag </html>...which ends the html document.

NOTE: It doesn't matter at all whether you use all caps or all lower case, except in how 'pretty' your code is...most web designers will pick one or the other for uniformity's sake.

Here is a simple set of HTML tags, which (with very little variation)
you will find in EVERY html document:

Fig. 1

Other than the basic concepts described above, one thing to pay special attention to is the placement of any 'quotation marks' within the tags. An OPEN body tag may contain 'attributes' that are described between the "<" and ">".
These attributes will be laid out like this: ATTRIBUTE = "VALUE"
(Example: bgcolor = "#000000" )

You may also see an attribute expressed WITHOUT quotation marks around the 'value' half of the equation like this: ATTRIBUTE = VALUE
(Example: bgcolor = #000000)

In most cases, it can be expressed EITHER WAY, but Internet Explorer is much more 'forgiving' of this kind of sloppiness than Netscape. To be on the SAFE side, do one or the other CONSISTENTLY. Never have some values within a tag enclosed by quotation marks, and other values NOT enclosed. This is asking for error messages from your browser.

Previous      Next