HTML 101: Back to Basics - Yes, yes, but what is HTML made of?
I mentioned that HTML is an application of SGML. This means that every HTML document is also an SGML document. The first thing an SGML document must have is a Document Type Declaration. This means exactly what it sounds like: a Document Type Declaration declares the document to be of a specific type. In our case this type is HTML. I won't go into much depth on Document Type Declarations right now. For the moment, you should use the following declaration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
Do not let the angle brackets confuse you. The above is not an element. If you look carefully, you'll notice that the content of the above construct starts with an exclamation mark; this indicates that this is SGML code. And after looking at it a bit you might be glad you don't have to learn SGML. So just take me on my word for this once, and put this at the top of your document. In a future tutorial, we'll explain what this Document Type Declaration means and show that it's really quite simple.
Now that we have specified that this is an HTML document, we can
start adding elements. The first element will always be the
HTML element. All HTML documents have an
element, which contains all the other elements. Let's put in the
start-tag and end-tag for this element and we'll worry about its
contents later. Here's what we've got so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML> </HTML>
Every HTML document is split into a head and a
body, which are marked by similarily named elements,
BODY. Every HTML document must have
one of each, inside the
HTML element. In fact, these two
are the only things you can have inside the
So let's put these in as well and see where we are:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>
Notice that I've used a slight indent for the
BODY element tags. This has no special meaning and is only
there to make the HTML more legible. You might have noticed that
white-space (that is, spaces, tabs and linefeeds) is collapsed
in HTML. This means you can add as much of it as you want to, in order
to make your HTML easier to read, without any change in the meaning of
The difference between the head and body of a document is that the head contains mostly information about the document, while the body contains the document itself. Before we go on to the body, we'll deal with the one element every document head must contain: a title.
The title of your document is very important. It distinguishes your document and makes it unique, as well as describing it to the reader. In this case, the title "Acme Computer Corp." is unsuitable, because it doesn't describe our document. A more descriptive title would be "About Acme Computer Corp.", but since this is the world of marketing and we can't afford to be bland, we'll give it a title of "Acme Computer Corp.: Who We Are".
TITLE element is a very simple element. It cannot
contain anything but text and that text is the title of the document. So
let's insert our title into our document, which is almost complete:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE>Acme Computer Corp.: Who We Are</TITLE> </HEAD> <BODY> </BODY> </HTML>
We're almost finished! All that remains is to add our document body.