HTML5

All of our templates are coded using HTML5. HTML5 is a major revision of the HTML standard. It's really the HTML we're all used to, just with more elements.

Special Note: While Expression Web 4 will display HTML5 elements correctly in Design View, earlier versions of Expression Web will not. While you can use an HTML5 template in an earlier version, you will not be able to rely on Design View for how your page accurately looks.

But HTML5 isn’t one thing. It is a whole collection of features and technologies. Most features are cross-browser compatible and ready for prime time, so the good news is most parts of HTML5 we can use right now.

For instance, you can change your doctype to the HTML5 one (<!doctype html>). Your document is now HTML5. Because the HTML5 spec was based on a lot of work figuring out what browsers already do, things like this work. So, if you prefer the HTML5 syntax, feel free to do that now.

html
  1. <!DOCTYPE html>
  2. <html>

As for the new elements, they’re lacking support in old versions of Internet Explorer, but you can add quite a bit of support for HTML5 into IE with JavaScript. You can add the following into our templates for the HTML5 elements if you have to support older IE browsers. This "conditional" coding says that in IE browsers prior to IE9, create the following elements:

javascript
  1. <!--[if lt IE 9]>
  2. <script>
  3. document.createElement('header');
  4. document.createElement('nav');
  5. document.createElement('section');
  6. document.createElement('article');
  7. document.createElement('aside');
  8. document.createElement('footer');
  9. </script>
  10. <![endif]-->

... or as an external javascript file ...

  1. <!--[if lt IE 9]>
  2. <script>
  3. <script src="javascripts/html5.js" type="text/javascript"></script>
  4. </script>
  5. <![endif]-->

Note that unknown HTML elements are displayed as inline by all browsers, so we've added display: block; for new block-level elements in the main CSS file for older browsers.

css
  1. header, footer, nav, article, section, aside, figure, figcaption {
  2. display: block;
  3. }

HTML5 is here to stay, and we use this coding version in our templates because it offers more functionality while still using the main things in Web creation -- HTML, CSS, and Javascript.