Working with HTML5 pages in WebMatrix and the Razor Syntax

项目
08/06/2010

Most web developers know that HTML5 is available and is already supported (though not completely supported in all its features) in the leading browsers. See a summary of new tags and features in HTML5. Internet Explorer 8, Firefox 3.6+, and the latest versions of Safari and Chrome all have strong support for HTML5. Upcoming releases, including IE9, will improve the level of support. For this reason, in Microsoft’s recent beta release of the WebMatrix development platform, the templates for creating a new HTML page or a new ASP.NET page that uses the Razor syntax (pages with a .cshtml or .vbhtml file extension), all use the new HTML5 doctype.

Often when I develop web pages, I don’t think much about the doctype that is used; I want to get onto the “good stuff” and start writing code. However, using the new HTML5 doctype and understanding it is worthwhile for the following reasons:

HTML5 offers some significant new tags and improved options for rendering content.
Using the HTML5 doctype declaration results in much simpler and cleaner code in your pages, as you’ll see.
Using the HTML5 doctype forces most browsers to render your pages in a “standards” mode (which is a good thing if you want to use new HTML features and validate your pages—see this article for more on browser modes).

HTML5 Versus Previous DocTypes

Let’s start by comparing a plain HTML page declared with an earlier doctype to one that is declared using the HTML5 doctype. The following block of code is the template for a new blank HTML page in Visual Studio 2010. VS uses this same doctype for creating HTML pages and also ASP.NET pages (the ASP.NET pages add some additional ASP.NET-related tags, but the doctype and HTML tags are otherwise the same).

Visual Studio Page Template

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

</body>
</html>

Notice that the doctype declaration element specifies the XHTML 1.0 Transitional doctype, and (on the second line) a URI for the doctype declaration file. This doctype has been used for some time now in the VS templates for HTML and ASP.NET web pages. Also, note that the <html> tag specifies a default namespace that includes the XHTML 1.0 elements.

WebMatrix Page Template

 <!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>

    </body>
</html>

Now in contrast, look at the above template that WebMatrix uses for HTML and ASP.NET pages with the Razor syntax. You can see right away how much cleaner and simpler this is: there’s no long DTD specifier or URI in the doctype, and you do not have to declare a namespace on the root <html> tag. This is really all you need to start taking advantage of HTML5 tags and content in your web pages. As mentioned, most of the leading browsers already support HTML5 so this doctype will validate and the majority of HTML5 tags should render properly in leading browsers.

One More Item: Character Encoding

One detail that the new page templates do not include is a <meta> tag that specifies character encoding. To be clear, this is not strictly required and you can validate pages without it. The above markup for the new page template validates at the W3 validation service even without the encoding declaration (although it does mention in a warning: “No character encoding declared at document level”). However, it is a really good idea, even a best practice, to declare a character encoding in your pages.

Here are some possible consequences of not declaring a character encoding:

It can affect the rendering of your content. If you use certain characters, and no encoding is specified, a browser may render them in some odd way.
It can create security vulnerabilities. Without a character encoding, for example, users (whether intentionally or unintentionally) could enter characters in a form which would become active HTML (like a <script> tag) that would then be capable of executing. Ultimately, you should both validate user input and declare a character encoding, to minimize security vulnerabilities of this type.

To declare a character encoding in an HTML5 page is very simple. In previous doctypes it required a fairly long, detailed <meta> tag with several attributes. But in HTML5 pages, all you need is a <meta> tag with a charset attribute, like the following examples which declares a utf-8 encoding:

 <meta charset="utf-8" />

If you add an encoding declaration like this one to the standard page template in WebMatrix, you’ll have a validating doc with the character encoding declared, which is a good thing. The following modified template is what I’ve been using to create my new HTML and .cshtml pages in WebMatrix, given that I use a utf-8 character encoding:

WebMatrix Page Template with Character Encoding Declared

 <!DOCTYPE html>
<html>
    <meta charset="utf-8" />
    <head>
        <title></title>
    </head>
    <body>

    </body>
</html>

This updated form of the template also validates on the W3 validation service, and it gives you a clean, straightforward way to declare an encoding in your pages.

The Bottom line

The use of the new HTML5 doctype in the WebMatrix page templates gives you cleaner, simpler pages, and lets you take advantage of the new features in HTML5. It’s a good idea to add to the template a <meta> tag that declares the character encoding you will use in your web pages, because it gives you more consistent rendering and helps to reduce security vulnerabilities.

Comments

Anonymous
March 17, 2011
The comment has been removed
Anonymous
August 01, 2011
Awesome post! I cannot wait till HTML 5 is supported cross browser. You have cleared up many issues and uncertainties I had with HTML5. I was unaware that it could be used already. Thanks for the post.

通过