In the coming weeks we’ll be publishing a series of posts that introduce you to all aspects of web design. From coding and design, to the business of freelancing, SEO and social – everything you need to know from scratch – all in one place.
We hope you enjoy the series; please feel free to leave your own thoughts in the comments box and if you have a subject in mind that you’d like covered, just let us know. We’d be only too happy to oblige!
An Introduction to HTML5 by Kerry Butters
Technology is wonderful isn’t it? Just a decade ago we were clumping around the net, often on dial-up connections, tapping our fingers waiting for pages to load and now here we are. We have superfast internet connections, smartphones and even a prototype that allows films to be projected directly onto the retina of the eye.
Naturally, web technologies have evolved alongside all of these and perhaps can be said to be a primary driver, so what’s changed in web design over the years?
Lots, but one of the most important changes we’re seeing is the new elements that have been added to HTML to make up the new standard that is HTML5.
What is HTML5?
It’s HTML (Hyper Text Markup Language), the language that most web pages are written in, with new elements to make it more powerful. This goes hand-in-hand with changes to CSS (Cascading Style Sheets) to make up CSS3. Both are updated versions which are intended to make web applications more powerful, lighter and faster.
Anyone developer wanting to make a start with using HTML5 needs to have a good working knowledge of CSS and JavaScript in order to make good use of it. Front-end designers also need to know about the new elements and learn CSS3 (as well as an understanding of JavaScript) in order to make sure that they can create great layouts for their designs.
Why Use HTML5?
There are numerous reasons, one of the most important being that it supports mobile devices and some new elements can be used to replace plugins such as Flash. The latter can be great, when used wisely and well, but it’s often not and this makes for slow web pages that are sometimes prone to crashing a machine. Flash also isn’t the most secure plugin in the world and due to its popularity, is a target for malware.
HTML5 allows developers more functionality for the latest browsers which in turn, makes for some great-looking websites. For example, using the new canvas element of HTML5 allows a 2D image to be drawn directly within the browser, rather than the page having to call and load the image from the server.
Faster, Sleeker, Slimmer
JavaScript APIs allow for this type of functionality and supports further functions such as geolocation and app storage. HTML5 can also be used on desktop and mobile and is supported by a growing spectrum of browsers (most modern browsers support the new elements, but many older browsers don’t).
HTML5 can also be updated quickly and easily, so there’s no need to develop native apps; do it with HTML5 and development costs can be cut as they’re not so intensive. Of course, it’s highly likely that these apps will survive anyway for the time being, but for a business looking to redevelop their web presence for desktop and mobile, HTML5 and responsive design are a better solution.
What New Elements are Included?
There are a variety of new elements and attributes, but the ones that are the most interesting include:
- The canvas element mentioned earlier
- Video and audio playback elements
- Form controls
- Local storage support
- Content-specific elements such as article, section, header, footer
The latter are known as semantic elements, which means that each “clearly describes its meaning to both the browser and the developer.” In the content-heavy world of the modern internet, this is important and allows developers to create pages in which content areas are clearly defined.
For example, whilst with HTML4, you may see a page layout that’s controlled by <div> and <span> elements, with the latest standard, a layout will look more like the following:
Most of the above layout is self-explanatory, but let’s take a quick look at the new <article> element. Of course, the most obvious thing that may be placed here is a blog post or article, but the element doesn’t necessarily restrict this. It can also be used for forum posts, commenting systems or the site’s latest news stories.
Why Isn’t Everyone using It?
Whilst most new browsers support HTML5, older browsers don’t. However, this can be easily overcome by adding blocks to the style sheet to tell the page how to behave if someone attempts to view it on an older browser such as Internet Explorer 8.
According to Intel: “HTML5 is a future trend in the world of app development, Intel believes it is important to help experienced developers transition to this cross-platform approach and aid new developers to quickly get up to speed with this exciting new approach so that they can deploy their apps & games on nearly all modern computing platforms.”
Take a look at the Intel video below which gives a simple overview of HTML5, its power and its cross-browser functionality.
So now you know what HTML5 is and why everyone is going on (and on) about it. It’s the future of design and development and whilst there are plenty of other tools, frameworks and coding techniques out there, this is the one that the majority will be using to create the web of the future.
That is until we come up with something even more powerful, which is the nature of technology and the internet itself – constant (and exciting) evolution.
Leave a Reply