Blogs

A Minimal HTML Document (HTML5 Edition)

Kevin Yank
Share

Back in 2008, I posted a detailed breakdown of the set of tags you should include at the bare minimum in every HTML document. As you can see, there was a lot to take in at the time:

These days, the needs of accessibility, search engine optimization, document consistency for JavaScript manipulation, and support for international characters all combine to require more of our HTML. The minimal HTML document has gotten a lot bigger.

Since then, the HTML5 working group has put a lot of thought into slimming down that minimal set of tags. It turns out all major browsers agree on several shortcuts that can cut down on the code, and the HTML5 specification now allows for these shortcuts to be used in valid code.

Because all browsers (even old ones like IE6) fully support the shortcuts that are being standardized in HTML5, we can use them today; this is despite most new features of HTML5 remaining off-limits until the browsers catch up.

With those shortcuts in play, here’s the very minimum that an HTML document should now contain, assuming it has CSS and JavaScript linked to it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

Read on below for a full description of each line of this minimal document.

The Breakdown

Every HTML document should start with a <!DOCTYPE> declaration that tells the browser what version of HTML the document is written in. The <!DOCTYPE> required by HTML5 documents is much shorter than those that came before:

<!DOCTYPE html>

Like all these shortcuts, this code has been specifically designed to “fool” current browsers (that are yet to support HTML5) into treating the document as a full-blooded HTML4 document. Browser versions as far back as Internet Explorer 6 will render the page with their most standards-compliant rendering mode.

Next, we mark the start of the document with the opening <html> tag. This tag should should specify the primary language for the document’s content, with the lang attribute:

<html lang="en">

Next comes the <head> tag, which starts the document header:

  <head>

The first bit in the header should be a <meta> tag that specifies the character encoding of the page. Usually, the character encoding is declared by the web server that sends the page to the browser, but many servers are not configured to send this information. Specifying it here ensures the document is displayed correctly even when it’s loaded directly from disk, without consulting a server.

Once again, HTML5 significantly shortens this tag compared to its HTML4 equivalent, but, as before, this shortcut takes advantage of the existing error-handling behavior of all current browsers, so is safe to use today:

    <meta charset="utf-8">

With the encoding established, we can safely write the first piece of actual content in the page—the page title:

    <title>title</title>

If you want to link a CSS file to the page to control its appearance (which you usually will), a <link> tag at this point will do the trick:

    <link rel="stylesheet" href="style.css">

The type="text/css" attribute that was required in HTML4 is now optional in HTML5, and all current browsers know what to do if you leave the attribute out.

If you want to link a JavaScript script to the page, and the script is designed to be invoked from the header, insert a <script> tag at this point. Unlike the <link> tag, the <script> must be paired with a full </script> closing tag:

    <script src="script.js"></script>

The type="text/javascript" attribute, once again, is now optional in HTML5, and all current browsers behave correctly when you leave it out.

That just about does it. You can end the header, then start the body of the page with a <body> tag. The content of the page is up to you, but since we’re talking about a minimal document, there need not be any body content at all:

  </head>
  <body>
    <!-- page content -->
  </body>
</html>

How’s that look to you? Any surprises?

If you’re like me, some of the shortcuts presented here make you feel a little uneasy at first blush. Is it really safe to use an HTML5 <!DOCTYPE> declaration when current browsers are yet to support most of HTML5?

Strange as it may seem to adopt code from an as-yet-unsupported specification, HTML5 was designed to be adopted in exactly this way. Shortcuts like those presented above are not features of a new standard, but a more efficient use of the HTML parsing features that have already been built into browsers for years.

Now that the W3C HTML Validator supports HTML5, it will validate documents that contain these shortcuts; there really is no reason to do it the long way anymore.

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

Comments on this article are closed. Have a question about HTML5? Why not ask it on our forums?