About This Tutorial

Today, using clean, semantic markup with CSS is utterly uncontroversial. And yet many of the popular tutorials on the web have never really caught up. The result is that if you start learning HTML from scratch today, you’ll probably go through the same learning process as someone who started in the mid-1990s:

1. Learn old-school HTML 3.2-style markup.

2. Learn about CSS.

3. Unlearn about half of your previous markup knowledge.

4. Learn how to do things the “right” way.

The original “HTML 4.01 Tutorial” was my attempt to cover HTML in an integrated, modern way, incorporating CSS from the start. Even though the tutorial was unfinished for years, it still drew visitors searching for help with font styles, alignment, padding, and more.

Finally, I couldn’t take it anymore.

“Gentlemen, we can rebuild it… we have the technology. We have the capability to make the world’s first modern HTML tutorial. The Pocket HTML Tutorial will be that tutorial. Better than it was before. Better… stronger… faster…”

Yes, the time has come to dust off the old tutorial and set it on the path to modernity. Here are some of the improvements:

• Completeness. Yes, this version is actually finished, imagine that! Actually, “finished” is maybe too strong a word, but at least it doesn’t sort of trail off awkwardly like the old one did.

• Less cruft. The previous version of the tutorial wasted a lot of verbiage on older browsers such as the infamous Netscape Navigator 4. Now that the lowest-common denominator is Internet Explorer 6, I’ve been able to clean that up.

• More right stuff, less wrong stuff. Like many of today’s popular HTML guides, the old tutorial labored under an unfortunate confusion over the difference between a “tag” and an “element”. How embarrassing. This and other cringe-inducing errors are now fixed.

• Relaxed license. The tutorial is available under the Creative Commons Attribution 3.0 Unported license. You are free to redistribute or create derivative works from this book, even for commercial purposes, as long as you attribute me properly. The previous version of the tutorial was also under a Creative Commons license, but a much stricter version.

Okay, that’s all well and good. But what does this tutorial not cover?

• Javascript. Javascript is much more popular these days than it was back in 2002, but client-side scripting is well beyond the scope of this tutorial.

• Server-side programming. Languages such as PHP, Perl, and Java are also out of scope. This is too bad, because it’s kind of hard to teach forms without them — you can design a form using HTML, but it doesn’t really do anything.

• Advanced CSS Positioning. CSS Positioning is large and complicated enough to deserve a book all its own. This tutorial probably should cover some positioning concepts, but it’s such a thorny topic that for now, I’d rather point you to others.

With one or two notable exceptions, there is a sizable gap between the popular tutorials and modern resources like the CSS Zen Garden, glish.com, and YUI Grids. That’s just crazy. This tutorial attempts to bridge that gap. I hope you find it useful.

Copyright and Usage

This work is licensed under a Creative Commons License: Attribution 3.0 Unported.

You are free:

• to Share — to copy, distribute, and transmit the work

• to Remix — to adapt the work

Under the following conditions:

• Attribution. You must attribute the work in the manner specified by the author or licensor. For attribution purposes, the URL to be associated with the work is http://www.goer.org/HTML, and the Title and Author of this work are as follows: “The Pocket HTML Tutorial” Copyright 2024 by Evan Goer.

For any reuse or distribution, you must make clear to others the license terms of this work. Any of these conditions can be waived if you get permission from the copyright holder.

Your fair use and other rights are in no way affected by the above.

This is a human-readable summary of the Legal Code (the full license).