Blog

Enterprise Strategies for Adopting HTML5 Part 1: Simplified Syntax & Semantic Elements

This is the first post of a multi-part series covering strategies that you might use to adopt HTML5 in your current or future corporate websites.

Introduction

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?”

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.

Old Way

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">

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.

New HTML5 Way

<!DOCTYPE html>

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.

Old Way

<meta http-equiv="Content-Type"
  content="text/html; charset=utf-8">

New HTML5 Way

<meta charset="utf-8">

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.

Old Way

<link rel="stylesheet" href="site.css" type="text/css" />
<style type="text/css">
  h1 { color: red; }
</style>
<script type="text/javascript" src="common.js"></script>

New HTML5 Way

<link rel="stylesheet" href="site.css" />
<style>
  h1 { color: red; }
</style>
<script src="common.js"></script>

Semantic Elements

The following section includes new HTML5 technologies that we can use today as well as the work arounds we can implement to obtain older browser support.

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.

Old Way

<div id="header">
  <h1>Welcome to My Blog</h1>
  <h2>Random Thoughts of a Programmer</h2>
</div>

JS Bin demo

New HTML5 Way

<header>
  <hgroup>
    <h1>Welcome to My Blog</h1>
    <h2>Random Thoughts of a Programmer</h2>
  </hgroup>
</header>

JS Bin demo

Other than simply just replacing the div element with a HTML5 header element, you might also notice that I introduced the idea of using a hgroup element. This is another new HTML5 element that is meant to group section headings (i.e. h1, h2, h3, etc…). The benefit of this is that the items in the hgroup don’t affect the overall outline of the document. This means that we can have a heading and sub-heading without changing the outline layout of the document.

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.

Internet Explorer 9 is intended to support HTML5 but it is currently only in the early phase of development. The beta version of Internet Explorer 9 will be released on September 15, 2010. Until then you can download the latest preview bits and play around with them.

Creating HTML5 Elements Manually

We can always create the HTML5 elements manually. It isn’t difficult to do. We just need to call the createElement method off the of the document and pass the new element’s name. At that point, the browser will recognize the new element and be able to apply styles to it.

document.createElement("header");  
document.createElement("footer");  
//etc...

Creating HTML5 Elements with HTML5 Shiv

Why do something by hand when someone has already done it for us? Remy Sharp has created a library called HTML5 Shiv that already does the manual creation of HTML5 elements for us. The library is hosted on Google Code and we can integrate it in our project by including the following lines in the head section of the document.

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Creating HTML5 Elements with Modernizr

Another way that we can create the new HTML5 elements is to use the Modernizr JavaScript Library that Paul Irish and Faruk Ateş developed. The library creates all the new HTML5 elements we need while it is loading on the page. All we need to do is to include the script tag inside of the head element before we style our HTML5 elements.

<script src="modernizr-1.5.min.js"></script>

The library really does much more than just create the new HTML5 elements. Its purpose is to detect which features a client browser supports and allows us to develop your web application using progressive enhancement techniques. The scope of the plugin is much too large for this particular blog post, but I encourage you to check it out.

If you plan to use some of the advanced features of Modernizr, then it will already create the new HTML5 elements for you. If you don’t plan on customizing the experience based on the features of the current browser, then your best bet is to use the HTML5 Shiv or manually create the HTML5 elements yourself in code.

Styling the HTML5 Elements

Now that we’ve managed to make older browsers understand the HTML5 elements we need to focus on styling them correctly.

On creation the elements will have a default display style of “inline”. In order to style them correctly we’ll likely need to change their style to “block” instead. This can be done very easily with the following section of code.

header, footer, article, section, nav, menu, hgroup {  
  display: block;  
}  

Dynamic Insertion of HTML5 Elements

As, it turns out there is another caveat that we need to account for when using HTML5 elements in Internet Explorer. If we try to add HTML5 elements to the DOM dynamically it will not recognize the new element and therefore won’t style it appropriately.

Thanks to Joe Bartlett, there is a script called HTML5 innerShiv that will resolve this issue. You can find more information about usage of this script on Chris Coyier’s blog post entitled Fix Inserted HTML5 Content with HTML5 innerShiv.

For example, instead of just appending a new HTML5 element to the DOM, we would first wrap it in the innerShiv method.  

$('header').append(innerShiv("<nav><ul><li><a href="index.html">Home</a></li><li><a href="archives.html">Archives</a></li></ul></nav>"));

A Larger Before vs After Example using HTML5 Semantic Elements

The intent of this section is not to explain the nuances of when and when not to use each of the new HTML5 Semantic Elements, but it is rather an example of how a layout could be changed utilizing the new elements. You can learn more details about each of the HTML5 elements from the HTML5 Doctor Glossary.

To give you an idea of how the format of your page layout might change, I’ve included the following markup snippets. The first code snippet shows how you might organize the markup with HTML 4 and the following snippet shows how you might organize it with the new HTML5 semantic elements.

Old Way

<div id="header">
  <h1>Welcome to My Blog</h1>
  <h2>Random Thoughts of a Programmer</h2>
  <div id="navigation">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="archives.html">Archives</a></li>
    </ul>
  </div>
</div>
<div id="sidebar">
  <h1>Twitter</h1>
  <blockquote cite="http://twitter.com/elijahmanor/status/20313555458">
  1st day at @appendTo I wrote Aug Tips for @ejquery website. Let me know if you found helpful, thnx http://j.mp/ejquery
  </blockquote>
</div>
<div id="posts">
  <div class="post">
    <div class="header">
      <h3>I'm looking for a Job</h3>
    </div>
    <div class="content">
      <p>Well, it's a funny story involving the FBI and IRS raiding...</p>
    </div>
    <div class="footer">
      <p>Published <time pubdate datetime="2010-07-08T12:21-07:00">8, July 2010</time>.</p>
    </div>
  </div>
</div>
<div class="footer">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="archives.html">Archives</a></li>
  </ul>
</div>

New HTML5 Way

<header>
  <hgroup>
    <h1>Welcome to My Blog</h1>
    <h2>Random Thoughts of a Programmer</h2>
  </hgroup>
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="archives.html">Archives</a></li>
    </ul>
  </nav>
</header>
<aside>
  <h1>Twitter</h1>
  <blockquote cite="http://twitter.com/elijahmanor/status/20313555458">
  1st day at @appendTo I wrote Aug Tips for @ejquery website. Let me know if you found helpful, thnx http://j.mp/ejquery
  </blockquote>
</aside>
<section>
  <article>
    <header>
      <h3>I'm looking for a Job</h3>
    </header>
    <content>
      <p>Well, it's a funny story involving the FBI and IRS raiding...</p>
    </content>
    <footer>
      <p>Published <time pubdate datetime="2010-07-08T12:21-07:00">8, July 2010</time>.</p>
    </footer>
  </article>
</section>
<footer>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="archives.html">Archives</a></li>
  </ul>
</footer>

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.

As for future blog posts we will look at the following topics:

  • Part 2: Form Enhancements
  • Part 3: Local & Session Storage
  • Part 4: Video & Audio Elements
Tweet about this on TwitterShare on FacebookShare on RedditShare on Google+Share on LinkedIn

  • http://paulirish.com Paul Irish

    Hey guys,
    A few things I wanted to clarify about this post..

    Modernizr isn't a jQuery plugin and has no dependencies or connections to jQuery. It's a standalone library. :)

    “but if you don’t plan on using progressive enhancement, then your best bet is to use the HTML5 Shiv” .. I would say “if you don't plan on customizing the experience based on the features of the current browser, then…”

    Modernizr and the shim/shiv use the exact same html5 element enabling script now. It was developed by Jonathan Neal along with Remy and I and input from a bunch of JS geeks. In addition to making the elements stylable in IE, it also makes them successfully print.

    Also you might wanna take another look at this line: “Older browsers lack any HTML support.” o.O

    Cheers

  • http://benalman.com/ "Cowboy" Ben Alman

    From an enterprise perspective, I think this series of articles should be covering topics such as content management system integration (including parsing and sanitizing of HTML5), pros and cons of XHTML vs HTML4 vs HTML5 from coding to delivery (including sub-topics like changes in development methodology, HTML5 element support in IDEs, code validation, content-type headers), browser support (where/why HTML5 shiv JavaScript is required), as well as touch on topics like SVG in HTML5 (XHTML5), among other things.

  • http://twitter.com/miketaylr Mike Taylor

    This article is really frustrating to me.

    Elijah has done a decent job of explaining what it takes to 'shim' an HTML5 document and shown a few simple markup advances, but what does this have to do with 'the Enterprise'? What's an 'Enterprise Strategy' for HTML5 anyways? I kept looking for that answer but just got more confused as I read the post, especially with “This leaves us with a key question: “To what extent can I use HTML5 inside my enterprise application?”

    Well, to what extent can I use it?

    I think you've got an interesting opportunity to actually discuss what concerns 'the Enterprise' might have with HTML5 but have totally missed the mark here. This is the same 'how to get started with HTML5' post that's been written scores of times across the web, which is great, but doesn't talk about Enterprise apps or jQuery at all (note that Modernizr is not a jQuery plugin).

    I guess I look forward to see how you try to connect Enterprise jQuery with HTML5 input types, although I'm not optimistic that there's even a remote relationship.

  • amWirick

    Thanks Paul – typos fixed. Modernizr now correctly referred to as a library.

  • rpflo

    In my experience, “Enterprise” is what is stunting the growth of the web, and by enterprise, I mean huge IT departments that won't let go of IE6. I spend more than half my time wrestling IE6 for our enterprise clients.

    As interesting as this topic /could/ be, it won't have any relevance for a long time since the best parts of html5 can't be supported with shims and such–and simply dropping quotes from attributes (while awesome!) is actually old, not new :

    In a nutshell, here is the enterprise strategy: Install Google Chrome frame and then upgrade to IE9 quickly. Your development time will drop, your creative agencies will deliver in half the time or with twice the features.

  • christopherjacob

    Some excellent resources and clear examples. I think this is a good foundation for the rest of the multipart series. If the “Enterprise” (to whatever your interpretation is of that word) is following this site, then I feel this is a nice introduction for “them” to HTML5…

    I disagree with people feeling this site needs to “over complicate” it's articles to badge it's self as a resource for “Enterprise” information.

    I'm looking forward to the rest of the series Elijah; thanks mate.

  • http://twitter.com/rmurphey Rebecca Murphey

    If that's the case, then perhaps this site should more accurately be called “web things enterprises should probably know.” However, the site is called Enterprise jQuery, which leaves me wanting to see articles that present true strategies for developing enterprise-grade applications using jQuery, because the questions in that problem space are immense.

    When the content instead addresses fairly basic web development and JavaScript issues (with the notable exception of the mockjax article) that have been addressed plenty of times before, it can leave enterprises with the impression that this is the extent of what they need to care about when it comes to JavaScript, and that does no one any favors.

  • jdsharp

    Hi Rebecca,

    Please be slow and cautious when making snap judgements. We have more forthcoming and a longer term strategy and commitment than what can adequately be summed up in a few posts. That's for participating in the discussion.

    Cheers,
    - Jonathan

  • jdsharp

    Hi Rebecca,

    Please be slow and cautious when making snap judgements. We have more forthcoming and a longer term strategy and commitment than what can adequately be summed up in a few posts. Thanks for participating in the discussion.

    Cheers,
    - Jonathan

  • http://twitter.com/rmurphey Rebecca Murphey

    I have withheld commentary for a month waiting to see more substantial content. If there is a longer-term strategy and commitment then I am all ears — especially considering that the need for an enterprise strategy was dismissed by the library a year ago (http://groups.google.com/group/jquery-dev/brows…). What I have seen so far is neither enterprise nor strategy, and judging from the other commenters and other conversations I've had, I am not the only one who thinks this. I really want to see the conversation elevated to actual enterprise-grade questions; what I have seen so far falls tremendously short of that.

    For better or for worse, this site stands to define decisionmakers' understanding of “enterprise” jQuery. That definition needs to go beyond front-end best practices 101, and I hope it will soon.

  • http://twitter.com/cdeutsch Christopher Deutsch

    I enjoyed this article. Thank you! Haven't looked into much HTML5 yet (too busy working) but will likely start doing the basics covered here to move in the direction of HTML5.

  • http://twitter.com/UniqueDesignIT Mattia Forza

    HTML5 has simply revolutioned the way we design and develop website. Simple, direct, semantic code. Clean, pure, web power.

  • http://twitter.com/vincpa Vince

    I'm confused, people always talk about how sites should work when JavaScript is not available. Why on earth would you want to use the new HTML5 tags if it requires a JS library in order for browsers to recognise the new tags?

    Your going to have a site that's broken on browsers with JS turned off.

  • JJoos

    You missed a spot: 'or use the jQuery Modernizr Plugin. Let’s cover each of these in more detail.'

  • http://twitter.com/cwebba1 Craig Webb

    Last week I incorporated part of Boilerplate into a project that I am working on. During the process I found out that the website version is out of date. The version on Paul Irish's Github is very different. I'm still working with it now. It has a lot of parts and is very cool. If the website version gets updated, then delete this comment.

  • http://twitter.com/cwebba1 Craig Webb

    What I am looking for (and not finding) is a full list of the variations of style sheet. In Boilerplate, I see one style that includes media=”handheld”, and sends me looking.

    I seek a list of all variations from which to choose – media=”handheld”, media=”print”, etc. Can you make this more clear? I've found a Boilerplate fork of boilerplate on github by http://github.com/rizkysyazuli – this looks good. Yes? Details details details. . .

  • Brent

    I'm pretty sure there is no <content> tag (used in your example) you'd probably use a <section> tag for that.

    brent
    @
    mimoYmima.com</section></content>

  • Pingback: Preview of HTML5 « Kvijayanand's Blog