The VERY Basic HTML Document – The Structure
February 23, 2011
It’s not quite like writing a novel – web pages are more than just words; they require a structure. And this structure requires that we first declare the doctype. This doctype lets the browser know how to read what comes next. There are a variety of different doctypes and exploring them is a chapter (or maybe two or more) all on itself – this one is about the basic HTML structure, and we’ll use HTML 4.01 Strict. It’s not the latest, the latest is HTML 5, but HTML 5 is not yet widely supported; so for now, we’ll stick with what works everywhere.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
With that out of the way, we can tackle the actual HTML part. It looks like this:
<html> |
Well, what did you expect?
This is a good place to throw in that almost every HTML tag opens and MUST also be closed. It’s good practice to write the opening and closing tags at the same time, and fill in after – maybe it seems odd, but it’ll save you a few headaches down the line. As a matter of fact, many editors create the opening and closing tag at the same time and even put your cursor politely smack in between, so you can start entering your content.
Note that I said ‘almost every HTML tag’. There are a few exceptions, here are some commonly used basics:
<br> - This creates a line break <hr> - This creates a 'header row' - it's just a line ... <img> - The image tag - that's what we need to insert pictures <meta> - That's a tag that belongs into the head section, which we'll get to later |
There are more, but those are the most commonly used ones. And our earlier doctype tag does NOT need to be closed, either.
So now, we have this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> </html> |
The ‘/’ in the second html tag indicates that it’s the closing tag. Inside this outer container of our page, we need two subsections: the head (section) and the body. And now it looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> </head> <body> <body> </html> |
And when we load this up to a server, and look at it with our favorite browser, we see ABSOLUTELY NOTHING. This is not an error, we have not added anything to be seen yet – so far, we have only created the very basic structure of an HTML page.
(P.S. – if you right-click the ‘ABSOLUTELY NOTHING’ page, in most browsers you’ll see a box of options, and one of them will likely be “View Source” – click that, and you’ll see the page’s code.)
