HTML5 markup or: How I Learned to Stop Worrying and Love the Browser

HTML5 markup is more streamlined than HTML 4 and, for some, will be a welcome relief from the rigors of XHTML. HTML5 embraces the forgiving nature of browsers, which wasn’t necessarily the case with XHTML, the previous incarnation of HTML. If browsers were asked to use the “application/xhtml+xml” MIME type (which wasn’t often), users would get a fatal page error if you forgot a single quotation mark for an attribute value.

Like most people who moved to XHTML, in practice I never had to achieve coding perfection because browsers continued to use the more forgiving “text/html” MIME type. If an error or two slipped past, the browser thought it was HTML and ignored it.

Well-formed and readable code continues to be important, but web developers are human and make mistakes. By some estimates, more than 99% of web pages have at least one error, and browsers know how to handle most of them gracefully. Why not accept the browsers’ flexibility in the new markup language?

For example, in an XHTML or HTML 4 page you have something like the following elements at the top of the document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

In HTML5 you can abandon the pretense that the document is XHTML and use the following bare-bones doctype information to tell the browser to render the page in standards mode:

<!doctype html>
<html>

Next, the character encoding element in a typical XHTML or HTML 4 page looks like this:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Since all modern browsers assume the content type of a web page is text/html unless instructed otherwise, in HTML5 you can toss the http-equiv and content attributes:

<meta charset="utf-8" >

Next, the stylesheet element in an XHTML or HTML 4 page looks like this:

<link href="../css/mystyles.css" rel="stylesheet" type="text/css" />

Since all browsers assume the content type of linked stylesheets is css, in HTML5 you can get rid of the type attribute:

<link href="../css/mystyles.css" rel="stylesheet">

Finally, a Javascript link element in an XHTML or HTML 4 page looks like this:

<script src="../js/myscripts.js" type="text/javascript"></script>

Again, since all browsers assume the content type of linked scripts is Javascript, in HTML5 you can drop the type attribute:

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

You’re left with the following streamlined HTML5 markup that any modern browser can interpret:

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8" >
<link href="../css/mystyles.css" rel="stylesheet" >
<script src="../js/myscripts.js" ></script>
...

To find out more about the principles that guided the development of this style of markup, see the HTML5 compatibility design principles on the W3C site.

For an entertaining look back at the history of XHTML and HTML5, see “How did we get here?” in Dive into HTML5 by Mark Pilgrim.