HTML5 has many features which you’ve likely heard about or seen in various blog posts. With all of the publicity, HTML5 has begun to hold weight as a marketing term and businesses are paying attention. In the near future, we’ll see businesses want to leverage HTML5 to send a message that they are innovative and competitive.
Unfortunately, many of the HTML5 features are not fully implemented in the newest versions of modern browsers. Older browsers lack any HTML5 support. This leaves us with a key question: “To what extent can I use HTML5 inside my enterprise application?”
Enterprise Strategies for Adopting HTML5
In this blog series, we will deliver a strategy you can use to start adopting HTML5 today. We’ll break down the strategy into the following posts:
Part 1: Simplified Syntax & Semantic Elements
Part 2: Form Enhancements
Part 3: Local & Session Storage:
Client storage is no longer part of the HTML5 specification. Nevertheless we’ve decided to cover client storage as it is still popular as a topic in HTML5 discussions and is implemented in many of the modern browsers.
Part 4: Video & Audio Elements
Simplified Syntax
All of the techniques that are shown in this section (DOCTYPE, Encoding, Script, Style, and Link) work in current and past browsers. No additional work is necessary to provide this support. We recommend you adopt these changes now and only use the old syntax if you have a specific reason to do so.
SIMPLIFIED DOCTYPE
Selecting a DOCTYPE is a necessary part of building a web page. There are many to choose from depending on how you compose your markup. Here is a list of several common DOCTYPEs you may have seen.
Some developers and designers know what all of those DOCTYPEs mean, but I would guess that many don’t. Even if they knew what they meant it can even more difficult to understand which situations warrant each DOCTYPE. I’ve seen many situations in corporations where a developer copies and pastes a DOCTYPE from another document or will use a template and never think about it.
You can find more information about all of these DOCTYPEs and browser modes in an interesting write up from Henri Sivonen entitled Activating Browser Modes with Doctype.
Thankfully this is a much simpler way to declare the DOCTYPE. We now have one DOCTYPE to chose from and it is short and sweet.
I’ve already mentioned that we can use this new DOCTYPE today. But what about older browsers? If clients use a browser that doesn’t recognize the HTML5 DOCTYPE then it will switch the content into standards mode and not quirks mode. Unless you have a specific reason to cater to browser modes, start using the new DOCTYPE declaration and take advantage of all the HTML5 goodness in your web application.
SIMPLIFIED ENCODING
HTML5 has also provided a simplified approach in the the way we indicate the character encoding used for the document.
Interestingly current and older browsers already support this shortened syntax and we can use it right away in web applications. You can read more about this and other interesting details from Mark Pilgrim’s detailed explanation in Dive into HTML 5: What Does It All Mean?.
SIMPLIFIED SCRIPT, STYLE, AND LINK ELEMENTS
Another simplification in HTML5 is to make the type parameter optional on the script, style, and link elements. If we don’t provide the type attribute, then their defaults will be “text/javascript” for script tags and “text/css” for style and link tags. That means that we can leave out the type attribute in the majority of our uses of these elements. The great thing is that we can also use these techniques today in our web site and it will be supported in older browsers as well.
There was a time when websites were commonly designed by using table element after table element to create complex layouts. Recently most designers heavily use the div element to float their way to equally complex and versatile layouts. HTML5 continues to transition web design by introducing new elements that make layouts more explicit.
NEW HTML5 ELEMENTS
Instead of overly using divs across our web application we can use the new HTML5 header, footer, article, section, nav, menu, and hgroup elements. These additions are more semantics than anything else. We could just as easily keep them as divs, but by using the new elements it makes your markup much more recognizable and easier to navigate.
Let’s take a simple scenario and see how it changes our markup. A common thing to include in a website is a header section. Normally we just use a div element and give it an id of “header”. However, we can just use the new semantic HTML5 element header instead.
Support for Older Browsers
As long as a client is using a browser that can understand HTML5 our page will render properly. When someone renders our updated website with a non-HTML5 complaint browser (such as Internet Explorer), there are some things that we’ll need to consider.
Current released versions of Internet Explorer can’t understand the new HTML5 elements, so we’ll need to add some additional JavaScript code to help. We can either create the HTML5 elements manually, use the HTML5 Shiv library, or use the jQuery Modernizr Plugin. Let’s cover each of these in more detail.
Templates to Get You Started
Recently three separate projects have formed to help you get quickly started with HTML5 development in your next project. These projects address many of the concerns we’ve addressed above, but also touch on topics that we haven’t yet addressed.
HTML5 Boilerplate by Paul Irish and Divya Manian – This template is probably the most comprehensive I’ve seen. It includes a host of features that you’ll need to start a new HTML5 web application. It addresses the concerns we’ve mentioned in this article, but it also handles mobile optimizations, optimal caching rules, progressive enhancement using Modernizr, CDN hosted jQuery with local failsafe, plus much more. You’ll most likely use this template as a starting point and then delete the things that may not be pertinent to your web application.
HTML5 Reset – This template is slightly less comprehensive as the Boilerplate, but still provides a great amount of features that you’ll most likely need in your next HTML5 web application. Some of these features include cross-browser concerns, progressive enhancement using Modernizr, and many others.
HTML5 Site Template by Doug Neiner – This template is the most simple alternative to the above two templates. It includes the concerns we’ve addressed in this article, but leaves out some of the extra stuff that you may not need in your web application. If you are overwhelmed with the amount of options from the first two templates, this might be a good place for you to start. Then, if you find yourself in need some of additional features, you can reference the above templates for their implementation.
Conclusion
Although not all browsers have the same level of support for HTML5, you can still start using many of the syntactical and semantic features that it provides. With a few considerations you can use these features without worrying about backwards compatibility.