The World’s Best HTML Template

Post from April 29, 2008 (↻ July 16, 2017), filed under Web Development.

This and many other posts are also available as a pretty, well-behaved e-book: On Web Development.

…to start with is this, until the rise of HTML 5:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="1">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>2</title>
  <link rel="stylesheet" href="3">
  <p>4

This holds true as long as you want your pages to be distributable offline as well, which has been the only reason to include the html start tag, its lang attribute, and a meta element with encoding information.

The template is available for download; above, n designates parts to be modified, though these are complemented by some documentation I had to append due to my blog software’s code reformatting rules. Many things have been implied, but don’t hesitate to call me out on them.

Regarding this post’s title: I’ve never been shy, and almost everything I do can be related to the way I learn.

Update (May 4, 2008)

Since there seems to be some confusion about this post and why this template is supposed to be the “best,” here’s the short explanation: For a general template to be “best,” it should work in as many scenarios as possible without requiring modifications, its code should be elegant (and valid) and be maintainable.

Even when people don’t worry about specific problems with Conditional Comments, reset style sheets, or heavyweight frameworks, it’s the simple approaches that help quality. In general, most templates and frameworks are too much, inducing maintainability and performance problems. The template above that is so disappointing for some avoids that—and that’s why it’s so minimal.

Update (May 26, 2008)

Now there’s also a similarly valid HTML 5 version of the template. When you’re sure that it’s only used online and your server is configured properly, omit both html start tag and encoding definition as well.

About the Author

Jens Oliver Meiert, photo of July 27, 2015.

Jens Oliver Meiert is an author, developer (O’Reilly, W3C, ex-Google), and philosopher. He experiments with art and adventure. Here on meiert.com he shares and generalizes and exaggerates some of his thoughts and experiences.

There’s more Jens in the archives and at Goodreads. If you have any questions or concerns (or recommendations) about what he writes, leave a comment or a message.

Comments (Closed)

On April 29, 2008, 23:45 CEST, Sminky said:

What would be different in HTML5? And why is that any better than XHTML? This template is looking clean I must admit.
On April 30, 2008, 16:34 CEST, bill weaver said:

Hi, Jens.

I think you need to close your elements. For example:
<link … />
<meta … />

And though you have it fixed in the download, your snippit in this article needs head and body tags.
On April 30, 2008, 17:14 CEST, Jens Oliver Meiert said:

Sminky, the first difference in HTML 5 will be the document type (case-insensitive <!DOCTYPE html>; it is better than XHTML because almost nobody uses XHTML (not with text/html), it saves code (thus time), can be more efficient, &c.

Bill, it is HTML, so these elements don’t need to be closed. Apart from the “annotations” the code above is not any different than the template, which is valid, of course.
On May 1, 2008, 13:12 CEST, Dennison Uy - Graphic Designer said:

Jens, I agree with Bill, you should at least close your tags and include the HEAD and BODY tags. As it is this is very far from being the World’s Best HTML Template
On May 1, 2008, 22:08 CEST, jesper said:

Beautiful. This IS the best template because it is what you need. Just basic minimal structure, with a 100% guarantee that it is needed. Unlike the rest of all those templates that clutter your site with crao nobody ever needs.

It is however, probably too much to understand for developers just discovering all hyped XHTML 😊
On May 4, 2008, 11:05 CEST, David said:

For framework lovers it’s crap, for anyone else it’s good - if they can’t easily create it themselves. Good point however.
On June 4, 2008, 18:59 CEST, Richard Morton - Accessible Web Design said:

But would it be accessible? It certainly passes guidelines from the point of view of code validation and using CSS for layout, but it would probably fail the checkpoint about structuring content with headings (I say probably only because it could be argued that say a one paragraph website may not need a heading at all).
On June 5, 2008, 10:38 CEST, Jens Oliver Meiert said:

Richard, well, don’t focus too much on the exemplary p element. It is just a placeholder for whatever the document in question consists of, and it should use a decent structure, of course.
On July 26, 2008, 14:48 CEST, Bryan said:

I am looking for the “Worlds Best HTML Template” to download but cannot find it.
Can you please tell me how I can find the link to download? I am assuming that it resembles the page I am reading as I REALLY LOVE this pages layout.
Does it have a backend manager for the comments? Can I use Captcha on it?
Pleas elet me know I just have to have it!
Thank you and kind regards,
Bryan
On August 21, 2008, 13:27 CEST, Drenthe said:

I think this won’t be xhtml valid…
On December 8, 2008, 23:45 CET, miryam said:

thanks for the template, about the language codes, if our site is done in english and lets say spanish, the code can have both languages?
On December 9, 2008, 13:19 CET, Stu said:

Hello, I have a question about the doctype.

Its seems to be kind of incomplete, even if I know it validates. I wonder why it does that without the url at the end. On w3.org i only find “complete” doctypes.

Some people say modern browsers would render a document in quirks-mode if the url is missing but Firefox 3.0.4 claims in his infowindow for your template: “standartconforming-mode”.

Thanks if you could explain it to me.

I am absolute fascinated by the behavior of building a complete DOM out of an “incomplete” html-source. I like its cleverness. I would love to use a shorter doctype, because I hate that thing at all. The HTML5 one looks much more elegant.

Have a look at the most popular posts, possibly including:

Looking for a way to comment? Comments have been disabled, unfortunately.