Our first tutorial aims to teach you plain HTML, from scratch. It would be nice if you forgot everything you knew about HTML and take a fresh look at things for this tutorial.

I'm going to assume that the reader of this tutorial knows nothing about creating Web pages, but has a basic familiarity with browsing the Web. After all, if you couldn't browse the Web, you probably wouldn't be reading this! If you have some passing familiarity with creating Web pages, you can quickly go through this tutorial and make sure you're familiar with everything here, though as we've mentioned before, even experienced Web developers might be surprised by learning something new here, and we're going to use these concepts a lot in future tutorials.

So what is this HTML?

In order to be able to write good HTML, you must first understand exactly what HTML is. The most obvious place to look for this information is in its name: HTML stands for HyperText Markup Language. If this doesn't make much sense to you, don't worry, because that's what I'm here to explain. Let's take those initials apart one by one, starting from the right:

HTML is a language, but not the kind you tell your kids to watch. It's a computer language, and as such it has some specific rules that must be followed. In other words, it has a defined syntax, a strict way in which it must be written, and, when the time comes, read. But we'll get to that later.

Now HTML is also a markup language. What this means is that it takes a document and marks specific parts of it, giving them special meaning. Why does it do this? Well, let me give you an example. Take the following piece of text:

Acme Computer Corp.

Acme Computer Corporation is a technology-based company that seeks to offer its customers the latest in technological innovation. Our products are created using the latest breakthroughs in computers and are designed by a team of top-notch experts.

We are based in Acmetown, USA, and have offices in most major cities around the world. Our goal is to have a global approach to the future of computing. Have a look at our product catalog for some examples of our innovative approach.

What you, as a human, see in the above text is a heading ("Acme Computer Corp.") and two paragraphs of text. However, if a computer were to see the above text, all it would see is a bunch of characters, perhaps arranged in a certain way. We have an active interest in letting the computer know that the above is a heading and two paragraphs. I'm sure you can guess some of the reasons. In a larger document, we'd like to be able to have the computer produce an outline of the document containing only the headings; or we might want to display the headings in a different style. However, the computer can't do any of these things unless it can see each part of the document for what it is. Thus, we introduce markup to show the computer what is what.

HTML is also a hypertext markup language. Hypertext is text, in any format, with an added feature: parts of the text is linked to other parts of the text, making it easy to jump from one part of the text to another. For instance, in the Acme example above, the phrase "Have a look at our product catalog" hints that such a catalog exists, but the reader doesn't know where to find it. With hypertext, you can link this phrase with the catalog itself, giving the reader an easy way to get to it if he's interested.

But hypertext links aren't just shortcuts. Just like markup, they mean something. HTML is all about document semantics. A document by itself may be informative, but to be truly useful, you must have a way to get to its meaning. Once you have a way of encoding the document's semantics, you can manipulate it in many interesting ways (don't get any ideas... this isn't that kind of Web site!). By defining the links from a document to a table of contents that lists it, to the next or previous documents if it is part of a series, to a glossary or copyright notice, we give the document itself more meaning, and hence, more value. The primary purpose of any document is to convey information, and by specifying the semantics of a document we supply even more information, which can only be a good thing. That is, if it's done right.

More About HTML
 HTML Author
 Elements of HTML
 Paragraphs and Headings
 What is HTML Made Of