A Minimal HTML Document (HTML5 Edition) — SitePoint (original) (raw)

The HTML5 working group has introduced several shortcuts to slim down the minimal set of tags required in every HTML document. These shortcuts are supported by all major browsers, including older ones like IE6.
A minimal HTML5 document should include a declaration, an opening tag specifying the primary language, a tag starting the document header, a tag specifying character encoding, a tag for the page title, and

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 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 tag. This tag should should specify the primary language for the document’s content, with the lang attribute:

<html lang="en">

Next comes the tag, which starts the document header:

  <head>

The first bit in the header should be a 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 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