Top 10 Reasons to Use HTML5 Right Now

In order to further demystify HTML5 and help these knuckle dragging designers and developers to jump on the bandwagon I’ve put together a top ten list of reasons why we should all be using HTML5 right now.

By Patrick Cox in Articles on

So you’re still not using HTML5, huh? I guess you probably have your reasons; it’s not fully adopted yet, it doesn’t work in IE, you don’t like users, you’re out of touch or you are just passionately in love with writing strict XHTML code. HTML5 is the revolution that the web needed and the fact is, it is the future whether you like it or not — suck it up and deal. HTML5 isn’t hard to use or understand and even though it’s not fully adopted yet, there are still plenty of reasons to start using it right now — like right after you get done reading this article.

There are lots of articles touting the use of HTML5 and praising the benefits of it, yes this is another one of those. With all these articles, with Apple pushing it, with Adobe building new dev products around it, and with so many web sites devoted to it, I still talk to fellow designers and developers who haven’t or won’t adopt it for a variety of reasons. I think the main problem is, it still seems like a mysterious creature to many. To many it feels more like the jet pack or the flying car — an awesome idea that is fun to think about but still not practical in its use. Wrong, the reality is that it is extremely practical right now! It’s not the latest Mercedes concept car being towed around form car show to car show, it’s a reality and it’s not going anywhere.

In order to further demystify HTML5 and help these knuckle dragging designers and developers to jump on the bandwagon I’ve put together a top ten list of reasons why we should all be using HTML5 right now. For those that currently use HTML5 this list may not be anything new or ground breaking, but hopefully it will inspire you to share the benefits of HTML5 with others in the community. We’ll do this Letterman countdown style (minus the celebrity presenter) and start with number ten – accessibility.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

10 – Accessibility

accessibility

HTML5 makes creating accessible sites easier for two main reasons: semantics and ARIA. The new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>, <aside>, etc. allow screen readers to easily access content. Before, your screen readers had no way to determine what a given <div> was even if you assigned it an ID or Class. With new semantic tags screen readers can better examine the HTML document and create a better experience for those who use them.

ARIA is a W3C spec that is mainly used to assign specific “roles” to elements in an HTML document – essentially creating important landmarks on the page: header, footer, navigation or article, via role attributes. This has been well overlooked and widely under-used mostly due to the fact that it wasn’t valid, however, HTML5 will validate these attributes. Also, HTML5 will have built in roles that can’t be over-ridden making assigning roles a no brainer. For a more in depth discussion on HTML5 and ARIA please visit the WAI.

9 – Video and Audio Support

Forget about Flash Player and other third party media players, make your videos and audio truly accessible with the new HTML5 <video> and <audio> tags. Getting your media to play correctly has always been pretty much a nightmare, you had to use the <embed> and <object> tags and assign a huge list of parameters just to get the thing visible and working correctly. Your media tags just become these nasty, huge chunks of confusing code segments. HTML5’s video and audio tags basically treat them as images; <video src=”url”/>. But what about all those parameters like height, width and autoplay? No worries my good man, just define those attributes in the tag just like any other HTML element: <video src=”url” width=”640px” height=”380px” autoplay/>.

It’s actually that dead simple, however because old evil browsers out there don’t like our HTML5 friend, you’ll need to add a little bit more code to get them working correctly… but this code isn’t nearly as gnarly and messy as the <object> and <embed> tags:

<video poster="myvideo.jpg" controls>
 <source src="myvideo.m4v" type="video/mp4" />
 <source src="myvideo.ogg" type="video/ogg" />
 <embed src="/to/my/video/player"></embed>
</video>

Some resources worth checking out:

8 – Doctype

html5 doctype

<!DOCTYPE html>

Yup that’s it, that is the doctype, nothing more, nothing less. Pretty simple right? No more cutting and pasting some long unreadable line of code and no more dirty head tags filled with doctype attributes. You can simply and easily type it out and be happy. The really great thing about it though, beyond the simplicity, is that it works in every browser clear back to the dreaded IE6.

7 – Cleaner Code

If you are passionate about simple, elegant, easy to read code then HTML5 is the beast for you. HTML5 allows you to write clear and descriptive code, semantic code that allows you to easily separate meaning from style and content. Consider this typical and simple header code with navigation:

<div id="header">
 <h1>Header Text</h1>
 <div id="nav">
  <ul>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
 </div>
</div>

So this code is pretty clean and simple? But with HTML5 you can clean this up even more and at the same time give your markup more meaning:

<header>
 <h1>Header Text</h1>
 <nav>
  <ul>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
  </ul>
 </nav>
</header>

With HTML5 you can finally cure your “divitis” and “classitis” by using semantic and HTML headers to describe your content. Previously you would generally just use div’s for every block of content than drop an id or class on it to describe its content but with the new <section>, <article>, <header>, <footer>, <aside> and <nav> tags, HTML5 allows you to code your markup cleaner as well as keep your CSS better organized and happier.

Some resources worth checking out:

6 – Smarter Storage

storage

One of the coolest things about HTML5 is the new local storage feature. It’s a little bit of a cross between regular old cookies and a client-side database. It’s better than cookies because it allows for storage across multiple windows, it has better security and performance and data will persist even after the browser is closed. Because it’s essentially a client side data base you don’t have to worry about the user deleting cookies and it is been adopted by all the popular browsers.

Local storage is great for many things, but it’s one of HTML5 tools that are making web apps possible without third party plugins. Being able to store data in the user’s browser allows you to easily create those app features like: storing user information, the ability to cache data, and the ability to load the user’s previous application state. If you are interested in getting started with local storage, check out Christian Heilmann’s great 24 Ways article from last year — Wrapping Things Nicely with HTML5 Local Storage.

Some more resources worth checking out:

5 – Better Interactions

Awe, we all want better interactions, we all want a more dynamic website that responds to the user and allows the user to enjoy/interact your content instead of just look at it. Enter <canvas>, the drawing HTML5 tag that allows you to do most (if not more) interactive and animated possibilities than the previous rich internet application platforms like Flash.

Beyond <canvas>, HTML5 also comes with a slew of great APIs that allow you to build a better user experience and a beefier, more dynamic web application — here’s a quick list of native APIs:

  • Drag and Drop (DnD)
  • Offline storage database
  • Browser history management
  • document editing
  • Timed media playback

For way more info on these APIs and more native interactive features of HTML5 visit HTML5Doctor.

Some resources worth checking out:

4 – Game Development

Yup, that is correct, you can develop games using HTML5’s <canvas> tag. HTML5 provides a great, mobile friendly way to develop fun, interactive games. If you’ve built Flash games before, you’ll love building HTML5 games.

Script-Tutorials has recently offered a four part series of lessons focused on HTML5 game development, head on over and check out some of the sick stuff they have created:

Some more resources worth checking out:

3 – Legacy/Cross Browser Support

browsers

Your modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera) and the HTML5 doctype was created so that all browsers, even the really old and annoying ones, er, IE6 can use it. But just because old browsers recognize the doctype that doesn’t mean they can use all the new HTML5 tags and goodies. Fortunately, HTML5 is being built to make things easier and more cross browser friendly so in those older IE browsers that don’t like the new tags we can just simply add a Javascript shiv that will allow them to use the new elements:

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

Some resources worth checking out:

2 – Mobile, Mobile, Mobile

Call it a hunch, but I think mobile technology is becoming more popular these days. I know, that is a pretty crazy assumption and some of your are probably thinking — mobile is just a fad… right. Mobile devices are taking over the world. The adoption of mobile devices continues to grow very rapidly and this means that more and more users will be using their mobile browsers to view your web site or application. HTML5 is the most mobile ready tool for developing mobile sites and apps. With Adobe announcing the death of mobile Flash, you will now count on HTML5 to do your mobile web application development.

Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy as designing and constructing for their smaller touch screen displays — hence the popularity of Responsive Design. There are some great meta tags that also allow you to optimize for mobile:

  • Viewport: allows you to define viewport widths and zoom settings
  • Full screen browsing: IOS specific values that allow Apple devices to display in full screen mode
  • Home Screen Icons: like favicons on desktop, these icons are used to add favorites to the home screen of an IOS and Android mobile device

For more info on how to mobilize your site via HTML5, check out “Mobifying” Your HTML5 Site.

Some resources worth checking out:

1 – It’s the Future, Get With It!

The number one reason why you should start using HTML5 today is this: it’s the future, start using it now so you don’t get left behind. HTML5 is not going anywhere and as more and more elements get adopted more and more companies will start to develop in HTML5. HTML5 is essentially just HTML, it’s not scary, it’s not anything you really need to figure out or relearn — if you’re developing XHTML strict right now you are already developing in HTML5 so why not take full advantage of it’s current capability?

You really don’t have any excuses not to adopt HTML5 and begin your new love affair with it. Truly, the only real reason I prefer to use HTML5 is just to write cleaner code, all the other benefits and fun features I haven’t even really jumped into yet, but that is the great thing about it, you can just start using it right now and not even change the way you design. So, start using it right now, whether you are just simplifying and making your markup more semantic OR you are gonna build some sick new mobile game that will take over the world — who knows, maybe you can start selling stuffed animal versions of your gaming characters too.

Great HTML5 Resources

http://html5doctor.com

http://html5rocks.com

http://html5weekly.com/

http://www.remysharp.com

http://www.script-tutorials.com

Patrick Cox

Patrick is a UX Designer and Researcher at Instructure (Canvas LMS).. He also enjoys family, snowboarding, sports, bacon and is jealous of your beard.

Expanding Rounded Menu Animation

Progressively Enhanced WebGL Lens Refraction

Crafting Scroll Based Animations in Three.js

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 75

Comments are closed.

  1. Adobe stoped a development of flash for smartphone. They move to HTML5. Its mean HTML5 will growing up.

  2. #8 Doctype is enough to get me to start writing my sites in HTML 5. I always hated having to copy that ridiculous tag from my other pages. I am sold.

  3. Awesome article about HTML5 makes me want to learn it more, actually stopped midway through the article and setup an example and started messing around.

  6. html5 is great, but right now it’s like eating an unripe fruit. I can’t wait for it to become a standard[ripe].

  8. Thanks for the HTML5 overview..am really excited for the mobile and Game based support…thanks again

  10. I wish the HTML5 video could play media with alpha channel without workarounds that require more video editing. Or maybe I missed something.

  11. I have recently started using it on my customers sites and the code does look much cleaner and easier to wade through when I need to make updates and stuff. Soon I will do a facelift on my personal sites to start using it also.

  12. I think HTML/JS developers are looking at some huge challenges when it comes to developing web apps that have a heavy frontend. The features that browsers now expose are excellent, but that won’t be much comfort when your application’s source code balloons to hundreds of JavaScript files, none of which can rely on any language-based syntax to isolate one chunk of code from all the others. There is a growing interest in high-level languages that produce JS code, and it’s driven by the language’s inability to support large projects.

    Most of your responses have come from seasoned Flash devs and beginning web developers. While the Flash guys can be easily dismissed as has-beens, the fact remains that they’ve maintained projects larger and more complicated than most web devs who use JS exclusively. Until someone has enough experience with large-scale HTML/JS app development to be able to reflect objectively on the value of this stuff, you have to admit that you’re in a position of naïvety.

  13. You’re wrong.

    For most web designers, the reason they haven’t started using HTML5 is because they like their jobs. The point of designing websites is to sell something – a product, a service, an idea, yourself. The more people that can see it, and see it easier, the better chance you have at selling whatever it is you are selling. Yes, some aspects of HTML5 degrade gracefully to browsers that do not support it, but there are a ton of aspects of HTML5 that won’t work in outdated browsers, but what percentage of people have outdated browsers? alot, and I’m not just talking about IE6 (screw IE6). And since the point of web design is to sell, you can’t sell to people who have trouble viewing your website. And all the time you put in to building an HTML5 website will end up not being worth it (it will be awhile before web designers are as good with HTML5 as they are with HTML4. Same goes with CSS3).

    So, no matter what, designing with HTML5 will take longer and all the “cool” new aspects won’t be able to be appreciated by very many people, making your website seem kind of bland to them. Yes, HTML5 is the future. But the reason most web designers aren’t using it yet has absolutely nothing with it’s “mystique” (seriously, do you really think web designers are sitting around saying “ohh…HTML5…i’m so scared to even try…it’s so strange, new and terrifying”?).

    Clearly, there are the web designers who prefer to design what they want to design, when they design it, and how they design it. The ones that still use Flash after all this time, the ones that design absolutely everything in javascript (even though a large percentage of browsers have javascript disabled), and the ones that use the newest and latest languages even though it’s a complete waste of time currently and will detract more visitors than it attracts. Those are the designers who design for themselves, not for their audience, and have literally no clue what they are doing. They are the ones that make my job hard when I have to go behind them and clean up their mess, and cause my prospective clients to question the validity of anything I say because they have had a bad experience with one of “those” designers.

    You seriously sound like the people who went crazy with animated gifs in the 90’s, or made absolutely everything into a CSS sprite, or anyone who used slices so the .5mb worth of images on every single page so all their worthless images can load easier (even though the entire webpage took over a min to load for most visitors).

    HTML5 will be adopted by most web designers, once more people stop using outdated browsers. It just takes time. The reason companies like Apple can focus primarily on HTML5 is because they control the systems it is used on. And in that case, it only applies to websites catered to mobile devices and apps. Has nothing to do with full fledged websites. Adobe is using HTML5 for the same thing.

    See if you can get this question correct – Is Adobe using HTML5 or XHTML for their website? That’s right, XHTML. And Apple? They use XHTML within HTML5. Amazon? HTML4.

    • could not agree more with your stance, Eric. I see the list provided by Patrick as useless drivel that no designer or coder should take notice of. Many of his reasons do not add up, and when it comes down to it the code examples show a poor command of CSS.

  14. Man I love how your introduction went xD, “HTML5 is the revolution that the web needed and the fact is, it is the future whether you like it or not — suck it up and deal with it“.

  15. I absolutely agree with the opinion of Patrick.
    HTML5 is the future, but it’s a real future. I work with HTML5 more than two years and is very happy, but if someone does not understand this, then let him ride in a cart, not the concept car.

  16. Quite a useless mis-informed list you have created here. Well done for propaganda and nothing more. When it finally comes out of draft and browsers properly support it’s features that will be the time to use HTML5.

  17. Just giving you many thanks fellas , regarding discussing this kind of very substantial subject matter , we wanted this for a long weeks many thanks for revealing this.

  18. Eric, dude, you are right! The html5 time has not come yet, really, it’s not ready. Html5 is great, but for now the most browsers are not support all the tags and attributes of html5, so if you want to use html5 for creating sites, you have to add some jquery plugins or some features in code which increase the time of loading your site and etc. Html5 time will come after 2-3 years i think.

  19. I totally agree with you Eric,
    HTML5 is the “real” future but to be honest, its still under construction in many areas. At the same time, we have to do a better job in getting folks to not depend on older browsers like IE7 and IE8 anymore. Has anyone used IE9? It’s a like a whole new light for Microsoft. This is not to say that it doesn’t come with issues but it is super advanced compared to any other project Microsoft has launched! Someone in the company FINALLY got tired of IE sucking and fired a bunch of old folks and hired a squad of talented teenagers. I am anticipating IE10 to be very promising! I am also anticipating for HTML5 to be more stable across all major SEO browsers within 5 years. Until then, HTML4 and custom jQuery/CSS rule the spine of the world with a great sword.

  20. I don’t really see the real benefit that html5 will bring as I can already do everything that html5 brings. Also how can you expect to use something that isn’t supported by the majority of browsers that are currently in use? What i find truly fascinating is the fact that adding in a javascript function (point 3) will replicate the new features anyway?! Seems to me that xhtml 1.1, flash, javascript can achieve the same results already. Point 6 doesn’t provide much comfort to the new EU law on user information. (http://www.cookielaw.org/)

  21. You mentioned Mobile, but forgot Responsive? I think HTML5 is pointless unless it’s Responsive.

  24. Great article.. I am just converting my current website over to be html5 ready.. Little bit of work but it will payoff in the long run!!! Thanks Again! 🙂