Simplify your HTML Syntax
This is the first in the series of demos from the “Using HTML5 Today” talk.
One of the great features HTML5 offers is the chance to minimize some of the longer tags in your template, reducing the size of the document and increasing readability and maintainability. Below we cover a few of the easy, cross-browser, backwards-compatible changes.
Why are these changes backwards compatible?
Because we, the authors of the content on the Internet, are pretty bad at writing proper HTML. The browser manufacturers have accommodated our poor syntax browser parsing engines for a long time now. These fixes simply take the best of these and elevate them to the standard.
None of these changes are necessary, but the updated syntax is shorter and cleaner. In the example case these changes drop the length of a short page by about 12%.
Drop the long doctype
The typical XHTML transitional doctype inserted by Visual Studio (or many other IDEs) looks something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The HTML5 spec changes this to
Get rid of the html namespace
The xml namespace for the html tag is not necessary. You can change
to simply read
…or if you would prefer to include the primary language for the document you can add the
Shorten your <meta> tag
You should include the charset with your pages to avoid a UTF-7 encoding XSS attack. Rather than using the older legacy version:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
you can switch to the shorter HTML5-standard version
<meta charset="UTF-8" />
No more ‘type’ attribute for <script> and CSS
The type attribute is now optional for <script> and <link> tags. The HTML5 spec notes that “The default, which is used if the attribute is absent, is
and cut it back to
<script src="/scripts/jquery-1.7.1.min.js" ></script>
In the same fashion a CSS declaration such as this:
<link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
can be shortened to
<link href="/Styles/Site.css" rel="stylesheet" />
For more information, check out the classic Dive Into HTML site or the developer edition of the WHATWG HTML5 spec.