The Worldās Best HTML Template
Published on April 29, 2008 (ā» February 5, 2024), filed under Web Development (RSSĀ feed).
This and many other posts are also available as a pretty, well-behaved ebook: On Web Development.
This post is partially outdated.
ā¦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 applies 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. (Online, you can specify this information on the server side.)
The template is available for download; above, n designates placeholders and parts to be modified, though these are complemented by documentation I needed to add because of my blog softwareās code formatting rules. Many things are implied, but donāt hesitate to call them out.
Regarding this postās title: Iāve never been shy, and this represents how I learn.
Update (May 4, 2008)
Since there seems to be some confusion about this post and why this template is supposed to be ā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, and its code should be minimal, valid, and maintainable. This template works everywhere.
Even when you donāt worry about problems with Conditional Comments, reset style sheets, or frameworks, itās the simple approaches that lead to quality. In general, most templates and frameworks are too much, bringing their own maintainability and performance problems. The template above that is so disappointing for some avoids thatāit can only do so because itās minimal.
Update (May 26, 2008)
Now thereās also a similarly valid HTML 5 version of the template [gist]. When only used online on a properly configured server, omit both the html
start tag and the encoding definition as well.
About Me
Iām Jens, and Iām an engineering lead and author. Iāve worked as a technical lead for companies like Google, Iām close to W3C and WHATWG, and I write and review books for OāReilly and Frontend Dogma. I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views andĀ experiences.
If you have a question or suggestion about what I write, please leave a comment (where applicable) 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ās better than XHTML because almost nobody uses XHTML (not when delivered astext/html
); it saves code (and therefore time); it can be more efficient.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 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 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 on the exemplary
p
element. Itās a placeholder for whatever the document in question consists of, and the document should of course use an appropriate structure. -
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.
Read More
Maybe of interest to you,Ā too:
- Next: Website Optimization Measures, Part IV
- Previous: Why āResetā Style Sheets Are Bad
- More under Web Development, or fromĀ 2008
- Most popular posts
Looking for a way to comment? Comments have been disabled,Ā unfortunately.
Get a good look at web development? Try WebGlossary.infoāand The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, andĀ Leanpub.