HTML
What is HTML
HTML stands for Hypertext Markup Language. It was originally created to instruct browsers what was a title, what was a heading, what was a paragraph, what was a link, etc. It is the language which gives an HTML document it's structure.
The Tags You Need
Tags are what enclose an element to describe it's function in the document or to identify resources or properties of the document.
Every tag has a purpose. A paragraph tag starts out with a <p> in code and ends with </p>. The first <p> is an opening tag. The </p> is a closing tag. Everything in between those two tags is considered a paragraph. There are many tags available to you as you create web pages. The tags are what HTML is all about. Think of them as packaging material that you use to package everything up for presentation in a browser.
These are the tags you need to use at the bare minimum. The tags are listed in the correct order.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Here is an example of a web page using these tags with two more "common" tags since I wanted to put in some displayable text as well.
<html>
<head>
<title>A small web page</title>
</head>
<body>
<h1>Here it is.</h1>
<p>A small page with a title, a heading, and one paragraph.</p>
</body>
</html>
There it is, a very small, but complete, web page. Try it out. In IE, click View and the Source.
Proper Coding
If you are going to start a tag, you need to close it. For instance, if you are declaring a paragraph with <p>, then at the end of the paragraph, you need to put a closing tag which is just like the opening tag with a forward slash in front of the tag name(</p>).
There are some tags you cannot close. Here they are in alphabetical order. I have highlighted the most commonly used ones:
<area>
<base>
<basefont>
<br>
<col>
<frame>
<hr>
<img>
<input>
<isindex>
<keygen>
<link>
<meta>
<param>
<spacer>
<wbr>
All other HTML tags should be closed. A lot of them are optional but they should be closed anyway. It's good practice and easier on your memory.
Most Common Tags
Other than the tags above in the "tags you need" section, here is a pretty good list of most of the tags you will use with a description of what to use it for. Please note that I have omitted the < and > from the tag names.
title
This is for the title of the web page. Whatever text you put in this tag displays on the title of the browser and also shows up on the back-button back-list. This is also what text shows up on bookmarks. It belongs within the head tag.
meta
This tag is used for various meta information. It belongs within the head tag.
link
This tag is used to link documents into your page such as style sheets that contain presentation information. It belongs within the head tag.
style
This tag is used for document level style attributes. It belongs within the head tag, but can be put in the body tag and still work. That doesn't mean it's right, it just will still work correctly.
script
This tag is for including external scripts in your document. It can be put inside and tag.
h1, h2, h3, h4, h5, h6
You will use these for headings. These belong within the body tag.
p
This tag is for paragraphs. It belongs in the body.
ul, ol
This tag is for lists. ul is an unordered list and ol is for an ordered list. An unordered list is displayed with a symbol, where an ordered list is displayed with sequential numbers. It belongs in the body tag.
li
This tag denotes each list item in an ordered or unordered list. It belongs in the ul or ol tag.
a
This tag is for denoting a hyperlink. It belongs within the body tag and is generally found wrapping around an image or within a text descriptive tag like a p, h1, or li.
img
This tag denotes an image and is quite useless without a src property. eg. <img src="images/foo.gif">. It belongs within the body tag.
br
This tag is like a line break in a text editor like Word. It forces the text following it to be rendered on the next line. It belongs within the body tag.
Here is an example of a page using all of the above tags.
<html>
<head>
<title>Title of my page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylesheets/exampleStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="javascripts/common.js"></script>
<style type="text/css">
body{margin:0px;padding:10px;font-family:Arial,Helvetica,sans-serif;}
</style>
</head>
<body>
<h1>Here is the first heading on this page</h1>
<p>I am following that with a paragraph that includes some other elements such as a <a href="#">link to nowhere</a>. I am also including an image here, but I want to stick it between a couple lines, so I use a line break tag.<br>
<img src="http://www.daves-web-help.com/images/fun.gif"><br>
I put another break tag after the image to finish this paragraph after the image.</p>
<p>I want to make a list of items:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<p>I'm done with the list and done with this page.</p>
</body>
</html>
Feel free to copy and paste this code into a text editor and use a .htm extension when saving it. Then open it up with a browser and see for yourself how it works.
I have omitted the table tags from this section because I wrote a separate page on making tables with all the correct syntax. For a complete list of all the tags available, check out the additional resources below.
Nesting Tags
You cannot build a web page without nesting tags. To start off with, every tag is nested inside the opening and closing <html> tags. There is one rule that you will want to keep in mind though when you are building a web page:
Close most recently opened tags first if they are closeable .
Here is an example of NOT OK:
<p><a href="#">a link</p></a>
The proper way to write this example is:
<p><a href="#">a link</a></p>
The first example is never OK. The second example shows the most recently opened tag(<a>) being closed(</a>) first. You could open another tag within the <a> tag, but that tag would get closed then before closing the <a> tag.
Attributes of Tags
Most tags can contain attributes. The attributes in a tag have to be named correctly, followed by an equals sign(=). Then you assign values to those attributes by placing a value after the equals sign surrounded by quotes. Here is an example of a tag with an attribute of src and a value of javascripts/foo.js assigned to src.
<script type="text/javascript" src="javascripts/foo.js"></script>
For assigning multiple attributes to a single tag, simply separate them with a space like I have done in the above example. If listing more than one attribute, you do not need to put them in any specific order. The correct place for attributes is between the < and > and after the tag name.
For a complete list of attributes of specific tags, see the additional references below. Click the link that says HTML 4.0 Elements and click on a tag you are trying to find an attribute for. After you click on an element(tag) name, you will be taken to a page with a description of the tag and a list of attributes you can use and the values that go in them.
Tags I Never Want to See Again
<font>
Wrong! Never use it. It is a waste of time, energy, and bandwidth. If you want to style your document, use CSS, you'll thank me later.
<blink>
Do I even need to explain this one? Blinking text? What kind of sadistic person came up with this? It's like those shaking ad banners, purely obnoxious.
<marquee>
It's almost as annoying as <blink>.