Demystifying HTML

HTML is about document structure! It consists not of boxes and lines and shapes, not about formatting or design. It is about document headers, bodies, paragraphs, lists, and tables.

The simplest HTML document looks like this:

This document contains absolutely nothing. It has an HTML section that begins with the opening <html> tag and ends with the closing </html> tag. If you displayed it in a browser, the browser would probably show you absolutely nothing. Let's do something interesting to it.

Now we've added a body to the HTML document. The body of the document begins with the opening <body> tag and ends with the closing </body> tag. I'm sure you're starting to get the idea here.

<html>
<body>
This is a paragraph in the body of an HTML document!
</body>
</html>

So, a couple new things here. Notice:

There's real text in here. You can expect this text ("This is a paragraph in the body of an HTML document!") to show up in the browser.
The tag to indicate HTML is <html>. The tag to indicate the document body is <body>. But the tag to indicate a paragraph is , not <paragraph>. If you don't use , it won't work. Sorry for the inconsistency. I didn't design the language. In its defense, you will probably make a lot of paragraphs, and you will be glad to be typing and instead of much longer tags.
Things have indentation. I think this makes it easier to read, but it's optional.

A side note: any sequence of tabs, spaces, line-breaks, or anything else considered "white space" is supposed to be condensed into a single space in the browser. So This paragraph is spaced out. won't look like you might think it would. This is handy because you can format your code any way you want without worrying about the end document. Besides, such things are like formatting, not content or document structure.

Making More Interesting Documents

So you've already seen that HTML is amazingly simple. At this point, you could already just about write a term paper in HTML -- all you really need are text with paragraph breaks. But when the Web was invented as a way for scientists to share research papers with each other, there was a lot of excitement about being able to link documents, show helpful graphics, and display tabular information. How do you do that? With the <a>, <img>, and <table> tags.

<html>
<body>
Here is a link to <a href="http://www.google.com/">my favorite search engine</a>.
And here is a fun picture!
<img src="http://i56.tinypic.com/2hn57y0.jpg" alt="skydiving" />
</body>
</html>

A couple things to note:

The linking tag is <a>. This is for historic reasons that are totally irrelevant at this point. href means "hyper-reference", which is an old buzzword from the beginning of the Web. Do not use the <link> tag, which means something completely different.
The <img> tag is about images, not text, so there's no text to put the tag around. So instead of having a closing tag, we just end the image by putting a slash in the opening tag: <img ... />
The alt attribute of the <img> tag is required. You can't skip it. This is for reasons of accessibility to blind people -- a screen reader cannot describe an image, but it can read a description that the author has written. If you see a web page somewhere that skips the alt attribute in the <img> tag, the author is doing it wrong.