HTML5 markup in Kentico 6 - Part 1

0
Comments
1
Votes
Login to vote

As CSS was introduced to our industry, good developers have strived to separate markup from styling. During this time we began using the proper elements to provide context to the page’s content. H1-H6 headings were called upon to outline our document and tables were relegated to holding data among other shifts in markup. One of our favorites over the last decade though has been the amorphous <div> element. This block level element has been nested, floated, hacked and has been the obedient workhorse of the industry. All that work while never having any particular meaning. HTML5 has specifications for elements such as <section>, <header>, <footer>, <nav>, <aside> and <article> that are chipping in to help the <div> and providing more context.

Covering the proper usage of these elements is a book unto itself (see HTML5 for Designers for a rundown) but we want to get Kentico 6 kicking out our newfangled markup to our users’ devices. Following are a few tasks you can tackle for your next project.

Whip out the shiv

In the name of progressive enhancement, we always have to consider how IE8 and their ilk will handle these new (ergo unknown) elements. Out of the box these unknown elements cannot be styled and without addressing this we leave a lot of users behind. To overcome this very big issue we’ve adopted the html5shiv.js technique (http://code.google.com/p/html5shiv/). Essentially Javascript creates each of our HTML5 elements within the Document Object Model via document.createElement(“element”) this allows IE’s rendering engine to recognize and style our elements.

DOCTYPE in master template

HTML 4.01 and XHTML were very explicit in their Document Type Declarations. For example, here is Kentico’s default DocType for XHTML 1.0:

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

HTML5 and all versions moving forward use a simplified variant of this to just let our users’ devices know that this document is HTML. In the Kentico CMS Desk, click on the node in the document with our Master Template applied and select the Master Page tab. In the document type textarea enter:

<!DOCTYPE html>

Our DocType is now wonderfully simple and wonderfully correct.

Clearing out more bloat

There are a few things in the Portal Template we can take care of to get our documents in line with the HTML5 specification. In /CMSPages/PortalTemplate.aspx, we should remove the xmlns attribute from the <html> element as its no longer relevant. In the codefile for that page, /CMSPages/PortalTemplate.aspx.cs, we can replace text in the HeaderTags like so:

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);

    // Init the header tags
    tags.Text = HeaderTags;
    tags.Text = tags.Text.Replace("<meta http-equiv=\"cache-control\" content=\"no-cache\" />", "");
    tags.Text = tags.Text.Replace(" type=\"text/css\"", "");
    tags.Text = tags.Text.Replace(" type=\"image/x-icon\"", "");
}

If your server is configured properly, browsers will correctly assume that links to .css files are of the type text/css, links to .ico files are image/x-icon, and script sources are Javascript. We also removed the meta element defining cache-control as no-cache. While cache-control can still be used it is recommended to use no-cache sparingly. HTML5 has different mechanisms to handle client-side caching and with the usage of cell phones we should be considerate of those visiting the site without a network connection.

Since this is a core Kentico file it will no longer upgrade when a Hotfix is applied so changes will have to be applied manually.

More to come

In a future article I’ll cover the nav element and we’ll develop a simple repeater and transformation for our main navigation.

 
Posted by Josh Gipper on 8/14/2012 3:18:50 PM
Filed under: 6, HTML, HTML5, Kentico, Markup
  
Comments
Blog post currently doesn't have any comments.