HTML5: 10 Tips That Will Change Your Life
In case you missed it, the Web has changed. All of that online banking, real-time video chatting, and cat-video sharing has stretched the foundation of the Web to its breaking point and beyond. That's why the foundation has been given an upgrade.
HyperText Markup Language (HTML) is the language of the browser. Originally based on the document-oriented Standard General Markup Language (SGML), HTML served the needs of the original academic users of the Web through its first four versions, but the increasing user demand for a variety of functions -- from secure encrypted transactions to video media -- meant that APIs, SDKs, add-on libraries, and external applications had to be bolted on to the HTML in order to make things work more or less the way people and organizations wanted. So in 2004 the Web Hypertext Application Technology Working Group (WHATWG) started working on a new version of HTML to be known as HTML5.
On October 28, 2014, the World Wide Web Consortium (W3C) -- which had joined forces with the WHATWG to develop the standard -- released HTML5 as a stable recommendation, which is standards-speak for "it's finished." Now we can all sit at our systems and enjoy the benefits that HTML5 will bring to everyone.
And what might those benefits be? They depend, a bit, on whether you're a developer or a user. For developers, life can be dramatically simpler under HTML5 than under HTML4.1 because there are add-ons and extras that you won’t need to use. That’s a good thing, though there are still some issues you'll have to take into consideration in the near term.
For users, life should be easier, because many of the add-ons that create security holes and compatibility problems are no longer required in order to have a rich, secure browser experience. And that browser experience should extend to more devices with a consistent look and feel from screen to screen. What's not to like, right?
[Think Fortran is dead? Think again.]
It's important to remember that HTML5 is a standard in the early stages of its finalized life. That means there are going to be some bumps in the road and some surprises along the way. That's why we thought it would be helpful to give some insight into this new way of building Web pages.
If you're already coding in HTML5 all of this might be old news -- and you might have some insight into things we missed. Let us know about your experiences and your plans. It would be nice to have some real information on HTML5 before HTML5.1 rolls around (and that process starts next year). Let's get started, shall we?
New Browser Workaround
OK, so if you (or your CIO) are going to be really stubborn about the whole "new browser" thing, there's a kludgy way to get around the requirement. You can define HTML5 code as block elements in your older HTML code and insert HTML5 elements there. It will work, and might even work well. But you won't feel good about yourself.
If there's some legitimate reason that you absolutely cannot upgrade to a current browser then this could work, unless…
You’re stuck on a version of Internet Explorer prior to IE8. Then you have a problem, because Microsoft didn't allow you to define unknown code in a style. There's a Javascript workaround (search on "HTML5" and "the shiv") but you’re starting to stack kludge on kludge and we know how well that tends to work out, don't we?
Video Is A Lot Easier
Making video happen in HTML4 is something of a pain. It's not that no one knows how to do it. It's that there are several possible methods, none of which come from the language itself. It's all about the plug-in. This has worked, most of the time, but all of us have seen the various sad-face computer icons that tell us one plug-in or another has crashed, needs to be updated, or isn't available.
HTML5 avoids all of that because video is a media type defined within the language itself. Want to include a video on your page? It's as simple in HTML5 as including a static image is in HTML4. If you've ever spent time wrestling with the inclusion code for a custom video player, you'll likely weep with joy the first time you write a video page in HTML5. And for users, those cute cat videos became much more reliable.
Now, there are still a few wrinkles: Not all browsers offer identical support for all video media types. In general, though, if you stick with the newWebM video format you should be fine.
Animation Is Included
How many of you remember having to learn Flash in order to do cool animated effects on your Web page? If you didn't learn Flash, you worked with a designer who inserted blocks of magical mystery code into your otherwise very solid page. Those days are over, and pretty much everyone (including Adobe) seems happy about it.
HTML5 includes all the features you need to build animation into your page. You can even do advanced 3D animation without having to resort to any external code. That's very cool. It's also far more secure and reliable than earlier methods, and we all know that we love security and reliability almost as much as we love a dancing carrot that comes to show us which button we should choose next.
Another benefit: You no longer have to think about which device your page will display on. Any browser that supports HTML5 on any device will show your nifty animation just fine.
Video Calling Is Coming
Animation is very cool, but browser-based video calling and collaboration through a protocol called WebRTC (Web Real-Time Communications)could be a serious game changer. While not strictly a part of the HTML5 protocol, HTML5 browsers have the capability to take advantage of WebRTC in a serious way.
Imagine building a video-conferencing feature for your Web site with three lines of code. You can do that with WebRTC. It's seriously cool. It's also fairly new, so some issues are still being resolved. One of them has been a security flaw that compromised some VPNs. Another is the fact that WebRTC is a point-to-point system -- the calls don't have to go through a central server. That's great for reducing data center overhead, but the effect on overall network traffic isn't yet known. It could be trivial, or it could blow previous network planning models out of the water.
The issues will almost certainly be resolved because WebRTC seems just too darned useful to ignore. Add it to your HTML5 coding repertoire, and collaboration and customer support could both shift into a much higher gear.
Old Languages Still Work …
… and you'll still need them. From Javascript to Python, there are tools that you'll still need to use for getting into databases, figuring out complex actions and processes, and manipulating devices in the real world. They all still work with HTML5 and you'll be glad they do. Now, you'll want to carefully check the tags around their inclusion because they almost certainly have changed, but you'll be able to make it all work.
The same isn't true for a lot of the browser plug-ins and add-ons you've used in the past, especially those that deal with rich media. The odds are good that HTML5 deals with all your media types natively, so you can jettison a lot of the included blocks you've come to know and loathe.
The Device Still Matters
It would be nice to say that HTML5 has taken care of all the issues around different screen sizes and capabilities, but that would be a lie. While many, many things are smoother as you move between devices, developers cannot assume that the page they build on a desktop screen will look awesome on a smartphone. Browsers and devices are still grappling with precisely how they're going to deal with HTML5 compatibility. Pages will need to continue to query the browser for type and device, and then load sections and versions as appropriate. Sorry.
HTML5 Is All About Mobile
With everything said about the fact that you still have to care about which device is used to view a page, HTML5 is a language that acknowledges the fact that the world is moving to mobile. With HTML5, you don't treat mobile devices as strange second-class citizens -- you write dynamic code that assumes that some sort of mobile screen is where your page will display.
The good news is that everything you build into the page, from video to animation, to dynamically sized elements, should display well, even if there are occasional oddities in how sizes display on some devices.
The takeaway? Don't discard your fleet of test devices just yet, but don't assume that your big 27-inch monitor is representative of how everyone will be viewing your page. As Steve Martin famously said, "Let's get small.
HTML5 Is Complicated And That's Good
Compared to HTML4, or even Flash, HTML5 can be complicated and seem non-intuitive. That's good, because it means HTML5 has the power and functions to be the sort of page-description language your organization needs for complex, powerful browser-based applications. That's really the right way to think about it -- as an application language rather than merely a page-description language.
There are hundreds of facilities available online to help you learn HTML5, and plenty of professional education organizations ready to help. Start now -- HTML5 defines the future of the Web as thoroughly as it defines the pages of your site.
Are you already using HTML5? Have you begun to learn the language? We'd love to hear about your experiences. Tell us what you think, and share thoughts on its strengths and weaknesses, in the comments section below.