It’s been over two decades since https://en.wikipedia.org/wiki/Tim_Berners-Lee and Robert Cailliau defined HTML, which rose to prominence as the markup language for building the internet. Since its inception, the [HTML development community has consistently requested improvements to the language. Unfortunately, these requests were primarily addressed by web browser developers attempting to alleviate the issues faced by their colleagues. This approach, while well-intentioned, inadvertently resulted in a proliferation of cross-browser compatibility problems and redundant development efforts. Over the past 20 years, HTML has undergone only four revisions, while most browsers have been through double-digit major updates, not to mention numerous smaller patches.

The advent of HTML5 was heralded as the ultimate solution to these persistent problems, promising to be the single, unifying standard for all browsers. It was arguably one of the most eagerly awaited technological advancements since the birth of the World Wide Web. But has it lived up to the hype? Do we finally have a truly cross-browser compatible markup language that functions seamlessly across desktop and mobile platforms, delivering all the features we’ve been longing for? It’s hard to say definitively. As recently as a few days ago (September 16th, 2014), we received one more call for review by W3C, indicating that the HTML5 specification is still a work in progress.

One can only hope that by the time the specification is finalized, browsers won’t be bogged down by outdated code and will be able to effortlessly and correctly implement powerful features like Web Workers, Multiple synchronized audio and video elements, and other long-awaited HTML5 components.

Despite the ongoing evolution, there are countless companies thriving with businesses built on HTML5. Similarly, a plethora of exceptional HTML5-based applications and games are enjoyed by millions, proving that success with this technology is attainable. Clearly, HTML5 is here to stay and will continue to be widely used, regardless of the state of its specification.

However, the aforementioned recipe for success isn’t foolproof and could easily backfire if not approached carefully. That’s why I’ve highlighted some fundamental HTML5 pitfalls to avoid. Many of these issues stem from incomplete or inconsistent implementation of specific HTML5 elements across different browsers, issues we hope will be resolved soon. Until then, I recommend familiarizing yourself with this list and keeping it in mind when developing your next HTML5 application, whether you’re a novice or a seasoned professional.

Common mistake #1: Trusting local storage

Let them eat cake!(https://en.wikipedia.org/wiki/Let_them_eat_cake) This dismissive attitude has plagued developers for far too long. While we’ve seen attempts to address data storage, such as the reasonably sound [fear of security breaches and protection of computers, in the “dark ages” when the Internet was feared by many, web applications were allowed to leave unreasonably small amounts of data on computers. True, there were things like user data bestowed upon us by the “esteemed browser masters from Microsoft(r)” or concepts like Local Shared Objects in Flash, these solutions fell short of ideal.

It’s no surprise, then, that one of the first HTML5 features embraced by developers was Web Storage(http://www.w3schools.com/html/html5_webstorage.asp). However, a word of caution: Web Storage is not a secure storage mechanism. While it improves upon cookies by not transmitting data over the network, it lacks encryption. Storing sensitive information like security tokens in Web Storage is strongly discouraged. Your [security policy should never hinge on data held within Web Storage, as a malicious user can readily manipulate their localStorage and sessionStorage values.

For a deeper dive into Web Storage and its proper usage, I recommend consulting this post.

Common mistake #2: Expecting compatibility among browsers

HTML5 is much more than just a simple markup language; it has evolved into a robust technology that blends behavior and layout. Think of HTML5 as an enhanced version of HTML, augmented by sophisticated JavaScript capabilities. Given the historical struggles we’ve faced in achieving consistent rendering of even static HTML and CSS combinations across browsers, it’s safe to assume that increased complexity will inevitably demand greater effort in ensuring cross-browser compatibility.

Just as we’ve seen with JavaScript, HTML5 interpretation varies significantly across browsers. Although all the major players in the browser arena have contributed to the HTML5 specification, and thus we might anticipate a convergence over time, even today, some browsers completely disregard certain HTML5 elements, making it challenging to adhere to a consistent set of features. The situation becomes even more intricate when we factor in the expanding landscape of internet-connected devices and platforms, further complicating HTML5 development.

A prime example of this is Web Animations, an excellent feature supported solely by Chrome and Opera. Conversely, the Web Notification feature, which could be used to notify users about events like email delivery outside the browser window, is entirely ignored by Internet Explorer.

For a comprehensive understanding of HTML5 features and their level of support across various browsers, refer to the HTML5 guide available at www.caniuse.com.

Despite its novelty and well-defined specifications, the reality is that HTML5 development still requires us to anticipate and plan for a considerable degree of cross-browser incompatibility. Browsers need to bridge numerous gaps, and it’s unrealistic to expect them to seamlessly overcome all platform-specific differences.

Common mistake #3: Assuming high performance

Although still under development, HTML5 is undeniably a potent technology with distinct advantages over its predecessors. However, with great power comes great responsibility, especially for those new to HTML5. HTML5 has gained widespread adoption across all major browsers on both desktop and mobile platforms. Encouraged by this, many development teams choose HTML5 as their preferred platform, hoping their applications will perform equally well everywhere. However, assuming consistent performance across desktop and mobile solely based on the HTML5 specification is naive. A number of companies (cough! Facebook cough!) banked on HTML5 for their mobile platforms and unfortunately discovered that it didn’t quite live up to their expectations.

Despite this, several companies have achieved remarkable success by relying heavily on HTML5. Just look at the numerous online game development studios that are pushing the boundaries of what’s possible with HTML5 and browsers. The key takeaway is that as long as you’re cognizant of the potential performance limitations and work around them, you can create truly exceptional applications.

Common mistake #4: Limited accessibility

The internet has become an indispensable part of our lives. Creating applications accessible to individuals who rely on assistive technologies is a crucial aspect of software development that is often neglected. HTML5 strives to address this by incorporating advanced accessibility features. However, some developers mistakenly believe this to be sufficient and fail to invest time in implementing additional accessibility options in their applications. Unfortunately, HTML5 currently faces limitations that prevent it from making your applications universally accessible. Be prepared to dedicate extra effort if you aim to cater to a wider range of users.

I recommend checking this place for a more in-depth look at accessibility in HTML5 and the current state of commonly used accessibility features.

Common mistake #5: Not using HTML5 enhancements

HTML5 has significantly expanded the standard repertoire of HTML/XHTML tags. Beyond new tags, we’ve also gained several new rules and behaviors. However, far too many developers limit themselves to a handful of these enhancements and miss out on some of the truly remarkable new capabilities of HTML5.

Client-side validation is one such gem in the world of HTML5. It was arguably one of the first HTML5 elements embraced by web browsers. Sadly, you’ll still encounter developers who habitually add the novalidate attribute to their forms. Their reasons for doing so are understandable, and this is likely to spark debate. For backward compatibility, many applications implemented custom JavaScript validation, and layering browser-based validation on top of that can be cumbersome. However, ensuring that these two validation methods don’t clash isn’t overly complex. Furthermore, standardizing user validation through the browser would create a more consistent user experience and contribute to resolving some of the accessibility concerns mentioned earlier.

Another noteworthy enhancement pertains to how user input is handled in HTML5. Before HTML5, all form fields had to be nested within the <form></form> tag. New form attributes now allow you to write perfectly valid code like this:

1
2
3
4
5
6

<form action="demo_form.asp" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

Even though lname resides outside the form element, it will be submitted along with fname.

For a deeper understanding of the new form attributes and enhancements, refer to the Mozilla Developer Network.

Wrap up

I acknowledge that web developers often bear the brunt of the browser wars, as many of the aforementioned issues directly result from inconsistencies in HTML5 implementation across browsers. Nevertheless, it remains our responsibility to stay informed about and avoid common HTML5 pitfalls while investing time in understanding the new features it offers. By mastering these nuances, we can leverage the full potential of these exciting new enhancements and propel the web to new heights.