An Introduction to Website Layouts in HTML5

While Web development technologies advance at the speed of light, all of the content we see and interact with is still shown to us by good old HTML (along with CSS, but HTML dictates the layout of every page). HTML 4.0 has been standardized way back in 1997, when the Web was ugly as hell, tables were still being created with HTML, and the dot com bubble had yet to happen.

It is actually surprising that it keeps running as well as it does – 18 years is simply a huge amount of time for any computer technology to exist (remember floppies, or even CDs?), let alone one that is at the base of the consumer side of the Web.

Obviously, a new standard has to be worked on, and it is – HTML5 has now been completed and is ready to be put to good use. So far, adoption has been very slow, with the news blogs talking mostly about its video playback capabilities (which probably stems from the fact that Adobe’s Flash is absolutely terrible).

The latest Web browser versions already support HTML5, both on desktops and mobile, and if you’re a developer, there’s little reason not to use it for your next website or theme – we have to switch to it sometime, and in my opinion, it’s better to do it now than wait for it to become obsolete, as well. [501+ Best HTML5 Website Templates]

So, how does HTML5 help you improve your website layouts and functionality?

> HTML5 Code is Cleaner

From the lack of a long, detailed Doctype declaration to shorter and optional attributes, HTML5 is cleaner, simpler and faster to write. It’s quite a step up from HTML 4.0, and makes coding a little more pleasant.

The syntax has also been improved with new elements, which are easier to understand and use, especially with proportional layouts, which are pretty much a necessity for creating free responsive themes that work just as well on a mobile as they do on a desktop device.

HTML5 is also backwards compatible with the 4.0 specification, so older browsers (looking at you, IE) can still render things correctly, although you may need to implement some workarounds for certain types of markup.

> More Built-in Capabilities

HTML5 was created with the future in mind, and it’s intended to be more than just a markup language – it’s more of an application development framework, which is quite unlike its simple predecessor. It borrows a lot of features from other languages, while still maintaining the focus on dictating the layout and displaying the final page in the browser.

One of the most touted features is the ability to easily integrate and play video, but HTML5 also makes it simple to insert audio content, complete with optional playback controls. You also get better control over your images – for example, you can easily associate a caption with an image using the figure element.

Regular expressions also made their way into HTML5 – there’s no more need to use a different language and invoke scripts in order to do simple regex operations. The math element also lets you use MathML tags directly – a simple addition, but very helpful for a lot of websites.

Local storage has also made an appearance in the new markup language, and it provides a faster and more secure way of storing data on the client’s computer. So instead of storing short snippets of information in cookies and employing workarounds for storing something bigger, you can just use localStorage objects to save anything on the user’s hard drive.

An interesting practical application is storing any static data, so it doesn’t have to be reloaded every time the user opens your website – dramatically reducing load times and bandwidth usage.

> Mobile Friendly

While HTML5 brings a lot to the table for all devices, it is smartphones and tablets that are the primary driving force behind its quick adoption (even though it’s still very slow, in my opinion). Mobile devices and browsers benefit the most from the new syntax and more compact code of HTML5, which is why most of the websites use HTML5 for their mobile versions.

Web-based apps can also be built very quickly and are pretty efficient when it comes to resource usage, even compared to their native counterparts. If you need to code a quick wrapper app for your service or website, HTML5 and CSS3 are the best starting point.

Thanks to the above-mentioned local storage, you can cache any data on the user’s phone, saving them bandwidth, and providing useful features like offline reading – all without dabbling into any third party language.

> Finally, The Death of Flash

Since audio and video playback get direct support in HTML5, we’ll no longer have to deal with Adobe Flash – providing fast and easy to control media streams to any device. Flash was useful back when there was no other alternative, but nowadays (in the times of Full HD and 4K video) it’s just a slow, buggy, frequently crashing thing with major security holes that people use because of necessity – Netflix made the right choice going with Microsoft Silverlight, but even they are working on a HTML5 player.

Needless to say, a lot of people (including me, of course) will glad when it’s finally gone, and HTML5 is the technology that will make that happen.

HTML5 is a great successor to HTML 4.0, and it extends it in all the right ways. Since it’s now fully standardized, there’s no reason not to start using it right away. The new features will make websites faster, more reliable, and overall better, and along with CSS preprocessors (and hopefully CSS4), we’ll be able to do much more, easier and faster than ever before.