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.
Why bother?
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
<!DOCTYPE html>
Get rid of the html namespace
The xml namespace for the html tag is not necessary. You can change
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml")>
to simply read
<html>
…or if you would prefer to include the primary language for the document you can add the lang attribute:
<html lang=”en”>
Shorten your 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
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 ‘text/javascript’” The same document notes that the type attribute is “purely advisory” for the link element.
So you can take your typical JavaScript tag
<script src="/scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
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 site or the developer edition of the WHATWG HTML5 spec.
Other links:
http://dev.w3.org/html5/spec/Overview.html#a-quick-introduction-to-html
http://dev.w3.org/html5/spec/Overview.html#the-doctype