Steve Albers

  Home  |   Contact  |   Syndication    |   Login
  19 Posts | 0 Stories | 12 Comments | 0 Trackbacks

News

Twitter












Tag Cloud


Archives

Post Categories

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">

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 <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 ‘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 Dive Into HTML 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

http://dev.w3.org/html5/spec/Overview.html#attr-link-type

http://dev.w3.org/html5/spec/Overview.html#the-head-element

posted on Tuesday, March 13, 2012 9:14 PM

Feedback

# Dive into HTML5 is a book too 3/13/2012 9:31 PM Ras Fred
If you prefer perusing books, you can buy the book version of Dive Into HTML5, called "HTML5: Up and Running" from www.oreilly.com or Amazon.

Post A Comment
Title:
Name:
Email:
Comment:
Verification: