The World’s Best HTML Template

Jens Meiert, April 29, 2008 / May 26, 2008.

This entry is filed under Web Development.

… to start with is still this, until the rise of HTML 5, that is, and as long as you want your pages to be distributable offline as well (which has been the only reason to include both the html start tag together with the lang attribute and the encoding information):

<!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" type="text/css" href="@3">
  <p>@4

The template is available for download; above, @n designates parts to be modified, of course, though these are complemented by some bonus documentation I needed to append due to my blog software’s code reformatting rules (this time, I couldn’t fix them that easily). Many things have been implied, but don’t hesitate to call on me.

Concerning the title: I’ve never been really shy, and almost everything I do can be considered part of my learning methodology anyways.

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 probably work in as many scenarios as possible without requiring modifications, its code should be elegant (and valid, which the above code clearly is) and help maintainability.

Even when some people don’t worry about specific problems with Conditional Comments, reset style sheets, or heavyweight frameworks it may be the simple approaches that do help quality. In general, most templates and frameworks are just too much, inducing maintainability and performance problems. The template above that is so disappointing for one or the other avoids that – and thus it’s slim. How come.

Update (May 26, 2008)

Now there is even a (also valid) HTML 5 version available. When you’re sure that it’s only used online and your server configured properly, omit both html start tag and encoding definition as well to save yet additional bits.

Enjoy the most popular posts, probably including:

Comments

On April 29, 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, 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, 17:14 CEST, Jens Meiert said:

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

Bill, it is HTML, so these elements don’t need to be closed. And apart from the “annotations” the code above is not any different than the template, which is valid, of course.
On May 1, 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, 13:56 CEST, Jens Meiert said:

Er … and still it is valid HTML. Neither pseudo- nor real XHTML. And you might want to check the HTML DTD as well when you’re unsure what elements to close or to omit.
On May 1, 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, 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, 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, 10:38 CEST, Jens Meiert said:

Jesper, David, thanks.

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.

Jens Meiert