BASIC HTML TAGS NOTE: For additional references, check out my HTML References page, which has several sites with COMPLETE HTML listings, and of course my main Internet page, which has a variety of web related resources at the bottom.

The overall basic tags for all web pages (except for a frameset) include...
<DOCTYPE...>
<html>
<head>
<title>This is for customers to bookmark</title>
</head>
<body>

The actual web page that your customers view go between the opening and closing body tags.

</body>
</html>

Many tags have what are known as "attributes", you can think of them as options. Options HAVE to be inside an actual tag, they can NOT be on their own. Much as you can't get a "pin stripe" option for the paint job on your car, if you don't HAVE a car. ;)

Realize, that with the advent of Cascading Style Sheets, many of these "Attributes" have been "deprecated", or are planned to be obsolete as soon as all browsers properly support CSS. My guess is we have until about 2004, so don't sweat it.

Additionally, with newer languages evolving, such as XML, you need to be a bit pickier in how you use HTML. You should get into the habit of typing all HTML tags lowercase (ie html NOT HTML) and all tags need some form of "closing", be it the </p> for a paragraph, or just putting a space and then a / at the end of a tag that has no closing tag, such as <br />
All in all, good habits to promote.

A basic listing of tags and their options:

<head></head>
The head tag does not have any options, but many things can go inside the head, the most important being the title, and also things like meta tags, base tags, scripts, links to style sheets, etc.
<title></title>
This is one of the more important things to do right on a web page. The title's main purpose is to create the listing in your customers bookmarks. Remember, no tags go in the title. And no options either.
<body></body>
The body tag has MANY options, a few include:

bgcolor=" " (Preferably use a color number like #aacc33)
background=" " (Background image, give it the file name of your image)
text=" " (text color)
link=" " (unvisited link color)
vlink=" " (visited link color)
alink=" " (active link color)

To do this with inline styles, it would be:
style="background-color: #FF00FF;background-image:url(image.gif);color: #textcolor"

Logical and Physical styles

Physical styles give you an idea of what the enclosed text will physically look like, such as:

<b></b>(BOLD)
<i></i>(Italic)
<u></u>(Underline)
<sub></sub>(sub_script)
<sup></sup>(super^script)
<strike></strike>(~~Strikethrough~~)

Logical Styles, however, explain more what the text IS, than what it looks like. In fact, what these look like can vary wildly (and widely) amongst browsers.

<em></em>(emphasis)
<cite></cite>(Citation)
<address></address>(

Address

)
<code></code>(Computer Code)

Paragraphs, and other "spacing" tags

<p></p>(Paragraph)
This tag is used to surround a paragraph, and closing tags MUST be used. The paragraph is similar to a <br/>, but it puts a blank line after the newline, and groups a bunch of text into a block. (Handy for style sheets.
Options:

align=" " left, right, center

Tags that don't surround text, do not have a closing tag. HOWEVER, you should put a space and then a / at the end of the tag for getting used to things like XML.

<br />(Break)
Breaks the line at the point of the tag, and puts the text on the next line. (The paragraph tag puts a blank line).
Options:

clear=" " where left, right or all are valid values. all is the most useful.

<hr />(Horizontal Rule, or line)
Options:

size=" ": Where you give a number in pixels, say 5 (pixels thick)
width=" ": Number of pixels, or a percentage of screen (ie 50%)
noshade: No value, makes it solid blackish/grey instead of a groove

NOTE: Now, you would use style="color: #rgb;background-color: #rgb; width: values; height: values" inside the <hr > tag.

<pre></pre>(Pre formatted text)
Ever wish you could keep the spacing the exact way you type it in notepad or pico? Well, don't abuse it, but you can use the pre tag for that. Some tags will work inside pre, as it mainly keeps the spacing of your words.

Comments

Comments are little notes you give to yourself, that can only be seen when you view the source code. They help you keep track of complicated web pages with big tables, or frames.


Header Tags

Header tags (not to be confused with the head tag, are often used for the working title, or seperators for groups of text.

<h1>This is Header Size 1</h1>

<h2>This is Header Size 2</h2>

<h3>This is Header Size 3</h3>

<h4>This is Header Size 4</h4>

<h5>This is Header Size 5</h5>

<h6>This is Header Size 6</h6>

Options:

align=" " left, right, center

Lists

Unordered Lists
These are simple bulleted lists. You can put a list within a list, but be careful to line up all appropriate list itmes.
<ul>
<li>Your first List Item</li>
<li>The Next List Item (etc.)</li>
</ul>

Ordered Lists
Ordered lists are excellent for outlines, and are nearly identical to unordered lists, except that the opening ol tag <ol> takes some handy options.
<ol>
<li>Your first List Item</li>
<li>The Next List Item (etc.)</li>
</ol>
Options:

type= " ": The default is 1 you can also use I,i,A,a (upper and lower case letters or roman numerals)
start=" ": where you give it any number to start on other than 1 (so if you want to start on E instead of A, use start="5"

Definition Lists
These are a bit odd, in that they do not use <li> at all. They can also be used to fake a "bulleted or unordered list" by using a series of <dt> tags followed by an image tag and then your text, totally skipping the <dd> tags.

<dl> The opening tag for a definition list.
<dt></dt> Definition term, left aligned.
<dd></dd> Definition definition, this is indented below the definition term.
<dt></dt>
<dd></dd>
</dl> Closing tag for definition list.

Font Tag

This tag itself is totally deprecated in style sheets, but is still popular in use.
<font>Font</font>
Options:

color=" ": Where you can set the text color, the hexidecimal color numbers are the safest to use (#000000 is black, #FF0000 red)
size=" ": Size is odd, you can use a number 1-10 (10 being the biggest) or you can do +2 or -3 (2 sizes bigger than previous text etc)
face=" ": For example, arial,helvetica,courier. Realize this is an dangerous option as the person VIEWING the page must have this font installed.

Note: For modern use, you don't use the font tag at all. Instead, in <p>,<h1> and similar tags, you set the font styles for text inside.

text-align: center, right, left
color: #rgb color values
font-weight: 100-900, bold, bolder etc
font-family: fontnames (also the default 4)
font-size: values
text-indent: 5%
text-decoration: underline, overline, line-throug
font-style: italic,oblique

Image Tag

<img src=" " />
This tag has no closing tag, and any image name (.gif .jpg or .png are allowed types of images) can be put into the src=" " option. There are many other options. Options:

align=" ": Takes left, right or center though center rarely works
width=" ": in pixels (150) or percent (50%)
height=" ": in pixels or percent, do not use with width unless you KNOW the actual height and width, in which case it speeds loading
alt=" ": Where you put the description of the image into the quotes required now for many reasons.
border=" ": Mainly used when you put an image into a link, setting border="0" gets rid of the blue/purple outline of the clickable image.
USEMAP="#mapname": For client side image maps. mapname equals the name you set in the <Map name="mapname"> tag.
ISMAP: No value here, just the old keyword for server side image maps, is a cheap way to get the coordinates for a map by putting the image into a link and then using this word.
hspace=" ": Give a number. Sets the width of the space on the top and bottom of an image in pixels.
vspace=" ": Also a number. Number of pixels of space to the right and left of an image.

Center Tag

<center>Center</center>
This tag is totally deprecated. In fact, if align = "center" worked properly in other tags, such as <img src=" "> it would have never been made, but sometimes, it seems like the only way to center some things.

Special Chars

There is a whole list of these in just about ANY HTML book. They are chars that do not come off a normal keyboard, or that can not print as they have special meaning in an html page.
Examples
< gives you: <
> gives you: >
© gives you: ©
  gives you: (which is an invisible space, can be used for creating tabs etc. But don't overuse it. Makes a html page very hard to edit if you do.
® gives you: ®
& gives you: &
 gives you: ™

Anchors (hyperlinks)

Hyperlinks, more commmonly called links, were originally called anchors, which is why the tag is <a> and not <link>, which is used for something totally different. To truly understand links, you should also under URLS thoroughly.

Relative Links (for your own pages)
When linking to pages that are on your own site, ALWAYS use relative links, it makes your life easier if you have to move your pages or your domain name ever changes. Believe me, this is from personal experience. Additionally, you have to type a lot less.

<a href="ferret.html">Ferret Link</a>
This would link to a page in the same directory as the one the link is on, called "ferret.html". (Remember, keep file names simple, and spaces in file names are evil ;).
<a href="internet/url.html">URL Help</a>
This links to the page url.html which is in a subdirectory (folder) called internet
<a href="../linuxsa/">Linux Sysadmin</a>
This links to a directory, linuxsa that is up one level (directory/folder) and then down into linuxsa. As no file name was given, the server will look for the default file name, which on most servers is index.html
<a href="ferret.avi">Big Video File(3000k)</a>
This links to an avi file (audio visual interleave) which is an older style MS Windows video format. You don't have to just link to web pages, you can link to ANY kind of file that is on the web server.

Named Anchor Links (or how to jump to a specific spot on a page)
Now, for a bizarre reason, MS calls these "Bookmarks" in their Front Page Software. BZZZZ. Wrong, thank you for playing. They are NOT bookmarks. You can call them a lot of things, but not that. What they do is allow you to set an anchor point within a page.
First, the anchor or point you want to jump to:
<a name="nameofanchor"></a>
(Note, names should have no spaces and can be case sensitive. Also, nothing has to go between the opening and closing tags here, unlike a normal anchor)
Second, linking to the anchor:
<a href="filename.html#nameofanchor">Text here</a>
(Note: you can leave out the "filename.html" part if you are jumping within the very same page. I also hope that you realize you should substitute the REAL filename for filename.html and the REAL anchorname for nameofanchor. ;)

Absolute Links
When linking to other sites or services OTHER than web servers, you have to use absolute links, or the full URL. The most common mistake is to leave out the protocol, such as http://
Examples:
<a href="http://www.felitaur.com/internet.html">Text Here</a> Link to WWW page
<a href="ftp://ftp3.netscape.com/">Text Here</a> Link to FTP site
<a href="mailto:phil@felitaur.com">Text Here</a> Email Link

Making an image a link
This is quite easy, instead of putting text between the opening and closing tags, put an image tag.
<a href="ferrets.html"><img src="ferret.jpg" border="0"></a>
The border = "0" part gets rid of the blue/purple border around the image.
If you wish to use what is known as a THUMBNAIL (a small image that links to a BIGGER image) you need two copies, a small and large version. (I name my thumbnails with a _th at the end, so I know they are the small version)
Example:
<a href="choker.jpg"><img src="choker_th.jpg" border="0"></a>