Can I Use HTML5 Now?

21 Sep

Using HTML5 Now

One of the fundamental principles underlying HTML5 is
that it is backwards compatible. With only a small number
of exceptions—such as <font> tags and frames—valid code
written according to the HTML 4.01 or XHTML 1.0 specifications
is also valid HTML5. Simply replace your existing
DOCTYPE declaration with the shorter HTML5 one:


That’s all there is to it! One of the reasons this “DOCTYPE” was
chosen is that it’s the shortest string that reliably prevents
browsers from rendering pages in quirks mode.
Of course, HTML5 introduces many new tags and attributes,
but there’s no obligation to use them unless you
need to—just as you probably never used every tag and
attribute in HTML 4 You also need to be aware of the
capabilities of the browsers your target audience is likely to
use. This is a constantly changing scenario, so it’s impossible
to lay down hard-and-fast rules in a book. In addition
to your own testing, a website like  is
more likely to provide up-to-date information on what you
can use and what’s best to avoid.

Much of the discussion about HTML5 has focused on the
new semantic elements, such as <section>, <header>, <footer>,
and <nav>. The idea behind the introduction of these tags
is to give page markup greater meaning. Up to now, the
only way of grouping related elements on a page has been
with <div> tags. On its own, a <div> has no meaning, so
it’s common to indicate its role through an ID or class.
Rather than using <div id=”nav”>, it’s more logical (and
less code) to use <nav>—as long as your target browser supports
the new tag.

Figure 1.0 shows the level of support for HTML5 semantic
elements as reported by in April 2011. Light
green shows full support; darker green shows partial support;
and pink shows no support. ( Figure 1.0 – )

 Figure 1.0 Support for HTML5 elements depends on the browser version.

If you’re in the fortunate position of being able to target
only the most recent browsers, you can forge ahead immediately
with the new semantic tags. (Semantic Notepad) However, most designers
need to cater to IE 6–8, which still represent a significant
proportion of the browser market and are likely to do so
for some time, even though I personally have never meet anyone
using such old browsers the numbers are scary enough.
*Browser Statistics Link  & *Browser Trends Link  & *How the Disabled use the web Link

Figure 2.0: Shows the the blog structure using the HTML5 ‘semantic’ markup. and a list of the new tags can be found here:

HTML5 Glog Demo 1 (The blog structure using HTML5 semantic markup)

Figure 2 : The blog structure using HTML5 semantic markup

Supporting HTML5 Semantic Tags

Dealing with browsers listed in Figure 1.0 that offer only
partial support for HTML5 semantic tags is easy. All that’s
needed is to add the following rule to your style sheet:

article, aside, hgroup, header, footer, figure,

figcaption, nav, section {

display: block;


You can apply other styles to these elements in exactly the
same way as you would to paragraphs or other HTML elements.
For example, the following rule applies the same
font family and size to both <p> and <article> elements:

article, p {

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;


Unfortunately, IE 8 and earlier require an extra jolt of
encouragement to recognize the new HTML5 tags. You
need to use JavaScript to create a dummy element for each
type of semantic tag you want to use. For example, if you
want to use the <header>, <footer>, and <nav> tags, you
need to add the following in the <head> of each page:






Or as my Favorite tip to use:
Alternatively, you can load a tiny script from the Google
content distribution network (CDN) by adding the following
just before the closing </head> tag:

<!–[if lt IE 9]>

<script src=”

Ê trunk/html5.js”></script>


This is a 2 KB file of JavaScript wizardry devised by Remy Sharp that forces earlier versions
of IE to recognize the new HTML5 tags and apply CSS to
them. It creates dummy elements for all semantic tags,
saving you the bother of using createElement() for each
one. Although the file is small enough to host on your own
site, the advantage of using Google’s CDN is that the file
most likely will already be in the user’s browser cache after visiting
other sites, so it doesn’t need to be downloaded again, and again. Get it here & learn more)

( Read more about why to use Google for your jQuery Scripts & Google’s AJAX Libraries CDN here.  and learn more about jQuery here)

The predefined HTML5 CSS layouts in Dreamweaver
CS5.5 (File > New > Blank Document) use Remy Sharp’s
script in combination with a style rule to display the semantic
tags as block-level elements, ensuring almost universal
support for them in the future.

But What if they have JavaScript disabled?

Well now here is the problem: It’s not 100% foolproof.
If JavaScript is disabled in the browser, like IE leaves the
HTML5 tags completely unstyled. This wouldn’t be such
a big problem if the whole page was unstyled and would revert to the original unstyled,
but you end up with a crazy ugly mix of styled and unstyled elements!

In HTML5 Now (New Riders, 2010), Tantek Çelik  advocates a  smart approach.
He recommends wrapping HTML5 semantic tags in a

<div> and assigning it a class named after the tag like this:

<div class=”header”>


<!– header content goes here –>



This is undoubtedly the safest way to implement HTML5
semantic tags in a website, but it duplicates markup needlessly.
Although IE 9, Firefox 6, and other modern browsers support
the HTML5 tags.
Websites tend to need to be redesigned on
a regular basis, so there’s a strong argument in favor of
waiting for broader support when using for semantic tags.

But as we focus on all the backward compatibility we sometimes forget the point, and though it’s sometimes overlooked and is showing more & more important in our work as both designer & developer today, and that is ‘Forward Compatibility’.
Keeping that in mind, you will decide the balance of your projects needs individually for now.  The variables of each project themselves are the true determining factor in whether or not you are ready to start using HTML5 fully and using HTML5’s semantic tags and setting yourself up for multi-device-online-compatibility or not.

Sometimes even finding, (usually during your larger projects) that HTML5 can even solve some problems that only Flash could once answer. So it really is up to you the individual and the problems you want to solve,  your users, and your size of the project.

But I do recommend getting started on learning how to use HTML5 /CSS3 and taking advantage of the gifts they brings us even now, and I think having to tweak a few copy & paste backwards compatibility hacks until everyone is caught up is a small price to pay to get started…

I hope you enjoyed this topic as much as I did. I cant help but run a search on the subject and see it is a big hot topic right now. There is no shortage of opinions on the subject, both grumpy “I fear change” to “it will solve everything” attitudes, so please go keep your mind open to learning new things and enjoy the journey as you find what works for you.

-Robert (BlotterMonkey)

end. (updated)


What do YOU think?

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s