5 Things I Hate About HTML5

Share this article

I love HTML5. So does Viki Hoo and her recent article, 5 Things I Love About HTML5, states why. But not all is rosy in the HTML5 garden. So, in order to restore balance to the SitePoint universe, here are my five pet peeves:

1. Superfluous Tags

HTML5 (the technology) provides 30 new tags although you’ll never use half of them. That’s fine, but consider how we coded navigation lists in HTML4/XHTML1:


<ul id="nav">
	<li><a href="link1.html">link 1</a></li>
	<li><a href="link2.html">link 2</a></li>
	<li><a href="link3.html">link 3</a></li>
</ul>

Here’s the HTML5 equivalent:


<nav>
	<ul>
		<li><a href="link1.html">link 1</a></li>
		<li><a href="link2.html">link 2</a></li>
		<li><a href="link3.html">link 3</a></li>
	</ul>
</nav>

It has a small semantic advantage, but does it really make a difference in the real world? No.

It also has the disadvantage of increasing page weight and adding unnecessary DOM elements. I’m using the new syntax but, after many years of extolling the benefits of clean code and avoiding DIVitis, it makes me feel a little dirty.

2. Poor Developer Tools

Does your IDE or editor fully support HTML5, CSS3 and the new JavaScript APIs? I bet it doesn’t.

In the old days, I loved using Firefox extensions such as HTML Validator which highlighted issues in your mark-up when you viewed a page. Today, we have a few HTML5 validation tools, but they’re usually buggy beta releases and you need to submit your code to an online service. It’s slow and cumbersome — I rarely bother.

3. Multiple Media Madness

The new video and audio tags are great. Unfortunately, the ongoing vendor battles mean your video must be encoded in WebM, H.264 and Ogg Theora to work in HTML5 browsers. Oh yes, you’ll then require a Flash fallback for IE6/7/8 — and if you’re doing that, why bother with the video tag?

4. Browser Support

I could rant about IE6/7/8 and IE9/10 not being released on Windows XP. However, in my opinion, it’s the diverse range of implementation levels that annoy me most. If you want to use a HTML5 feature, you must continually consult documentation and test code thoroughly.

Consider something as basic as the date input field. Opera shows a lovely calendar picker. Firefox, Chrome and Safari know a date’s required, but offer rudimentary controls and validation. IE9 falls back to a dumb text box. Ironically, you’ll probably want to disable Opera’s implementation and revert to JavaScript solutions.

5. Hype and Confusion

The media pounced on the term “HTML5” and it’s applied to any cool web effect. Even if it’s an animated GIF. While that’s not necessarily a problem when you’re talking to clients, it is causing developer confusion:

  • Some consider HTML5 to be radically different to HTML4 when it’s really an evolution.
  • Some think effects are achieved using HTML when it’s actually CSS3 or JavaScript APIs.
  • Some won’t touch HTML5 because the W3C specifications are still at the draft stage.
  • Some won’t consider HTML5 because they need to support legacy browsers.
  • And let’s not forget the trouble CSS3 vendor prefixes have caused and why we need to fix it.

These concepts may be obvious if you’ve been working in the trade a few years, but who’d want to be a newbie?

Let’s be clear: HTML5’s benefits outweigh the problems. I use it and recommend you switch as soon as possible. But remember that you’re paying a price to use cutting-edge techniques; don’t assume code will work as you expect on every HTML5-aware browser!

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

CSS3HTML5 Dev CenterHTML5 Tutorials & Articlesjavascript
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week