HTML5 is the fastest growing keyword in job listings. Can you believe this graph from Indeed?
What that means for YOU is that if you know HTML5 there are a whole lotta people who are dying to hire you.
(Not surprisingly, the other 9 fastest growing job keywords are ALSO in tech.)
Of course, if it were just THAT easy wouldn’t everyone be an HTML5 all-star by now?
I know, I know, nothing is ever as easy as it seems. But it’s also not AS complicated.
If you have read our tech term all about HTML5 or downloaded our HTML5 cheatsheet, then you have seen some of the new fancy tags that make up HTML5. Those <article> and <section> and <aside> tags are awesome, and you should be using them.
To a large extent, the goal of HTML5 was to improve upon the HTML4 specification and to update HTML to reflect how people were actually using it. So instead of making everyone use <div> tags for their footers, articles, headers, sidebars, etc. you now have a more semantically correct HTML5 tag to use.
But when an employer adds HTML5 to the their job listing, this is only a small part of what they are hoping you know about HTML5.
The four awesome features of HTML5 you have to know about (and real code examples of how to use them):
Where in the world are you?
Look, I am not for NSA spying, but it’s true that sometimes it would be really great to know where a user is so that you can feed them some targeted, location specific information.
For example, how cool would it be if the government had a website where it told you who your congressional representative was? Or what if when you went to Yelp it automatically sent you the restaurants closest to where you are RIGHT NOW, without you needing to search for anything? Or maybe your local pharmacy website could tell you the nearest location that’s open 24 hours!
Well, with HTML5’s Geolocation feature you can do that.
Code adapted from the W3Schools.
Local Storage & Offline Web Applications
This is really TWO different HTML5 features, but they are somewhat related so I wanted to talk about them together.
If you are an alumni of the Skillcrush 10-Day Bootcamp then you are no doubt aware of servers and databases. You will remember that in order to save information (like a blog post) you have to have a programming language that can pick up your blog post and go save it in a database stored on a web server somewhere.
Well not lies, but incomplete truths.
The new HTML5 local storage feature actually allows you to store a little bit of data right on the user’s computer. Now, this data won’t be available to anyone else, but it will be saved for future use by that user.
So, imagine that you wanted to tell a user that they have been to your website 10 times in the past month. Every time they visited your site you could save a note in their local storage saying “Oh hey! You visited us 5 times this month already.”
If this sounds a little bit like cookies, that’s because it is! Except waaaay better.
Code courtesy of the W3Schools.
The offline cache manifest feature of HTML5 is similar in that it allows you to download your website to the user’s computer by using something called the “cache manifest.” This is particularly useful for mobile optimized websites where users may not always be connected to the Internet but may still need to access your content.
Like if you are a New Yorker and want to be able to read your NY Times article on the subway. The NY Times website could download the article to your computer using the cache manifest, and even if you have to refresh the page while you are offline, you will still be able to read it.
If that sounds like what the NY Times mobile app already does it’s because it is! Except that instead of having to hire a fancy iOS developer to build an expensive mobile app, you can just make a normal mobile-optimized HTML website and give your reader all the perks of a mobile app for a fraction of the price.
HTML5 and the cache manifest, the savvy web developer’s secret weapon! Learn more here.
Much ado has been made about the HTML5 vs. Flash blood feud. Steve Jobs even came out early AND HARD against Flash and refused to make iPhones Flash compatible.
Job’s biggest gripe with Flash was just that it was memory intensive and therefore DRAINED the heck out of phone batteries.
How I used to feel when I had to work on Flash projects. Thank god that doesn’t happen anymore.
Cue the <video> HTML5 element.
Want to build a future focused Scandal viewing website where real-time tweets are displayed in the video player AS THEY GET TWEETED. Without you needing to hand select the tweets to show?
Yeah, with a little bit of JS you can do that.
Want to make your own MTV pop-up video throwback machine?
YOU CAN DO THAT!
Sometimes techies crack me up with the way they name things. So what is it that you do with a canvas? Paint on it, right?
Once again, what’s great about canvas is that you can make the animations dynamic and interactive (just try moving your mouse around on that particle one).
Canvas code courtesy of HTML5 Demos.