Intro to HTML5 for Designers
HTML5 is an exciting new standard for web design and development, replacing the need for plugins like Flash and Java and instead harnessing the native browser power to achieve effects, functionality and forms not possible with XHTML. Together with CSS3, HTML5 is stable enough for use today and is supported on all modern browsers, including Internet Explorer 9 and 10. It is built to gracefully degrade and, when combined with landmark roles, provides even better accessibility for websites than ever before.
The core of HTML5 is still mostly the same as the HTML we know and love. The general structure is the same, as well as common tags like <a>, <p> and <div>. Rather than re-inventing HTML markup, HTML5 simply enhances it by adding several layout tags that are more semantic – or in simpler terms – make more sense to how designers think. For example, <a> tags can be wrapped around an entire block of code to avoid repeatedly linking titles, words or “read more” text.
As the web has evolved to use a standard top-to-bottom structure with articles and blocks for links or widgets, HTML5 gives us several new elements for building layouts that help minimize the number of unneeded divs and confusing markup. These new elements include: <article>, <aside>,<footer>, <figure>,<figcaption>,<hgroup>, <header>, <nav>, <mark>,<section> and <time>.
HTML5 improves upon several existing elements to make them easier to understand and more universally compatible. You’re probably familiar with the XHTML DOCTYPE declaration. It is long, ugly and confusing. HTML5 boils it down to one word:
This new DOCTYPE is future-proof, intended to remain the same through future iterations of HTML to come. In the same way, language has been simplified by adding a “lang=” attribute to the opening <html> tag, and “charset=” has been added as a <meta> tag attribute. Several elements and attributes have also been depreciated, or removed, from the HTML5 specification due to being under-used, confusing or bad for accessibility.
The most important change with HTML5 that affects you, as a designer, is the complete separation and removal of presentational markup. This includes tags like <font>, <center>, <i> and <b>. Inline styles are a no-no, and presentational attributes such as border, align, bgcolor and width are depreciated. They will still work, to some degree, but they will cause your HTML5 validation to fail.
Why Use HTML5?
Now that you understand what is new to markup with HTML5 and what it aims to change, let’s summarize why it’s better:
- HTML5 is cleaner, simpler and requires less markup to achieve complex layouts.
- The new elements and attributes are defined using terms that relate directly to what the element or attribute actually does, so it is easier to read and understand.
- Interactivity is now an inherent part of website building with HTML5. Forms, interface elements and multi-media can be implemented without any additional scripting or plugins.
- HTML5 is mobile-friendly and primed for app development and responsive design. This is a valuable selling point for your products or services.
- HTML5 is still fairly new and exciting, but also not well understood. The sooner you learn it and begin implementing it, the longer you can reap the benefits of being at the head of the pack.
Example of HTML5 in it’s simplicity:
What Can HTML5 Do?
HTML5 can do everything XHTML/HTML4 can do, plus the data handling capabilities of XML and multi-media capabilities of Flash. HTML5 introduces a set of new features that take advantage of new capabilities found in browsers like Firefox, Opera and Chrome to make this possible:
- Multi-Media: With HTML5, you can embed audio and video using the browser’s native players or one you design yourself, and know that it will be mobile-friendly with a faster load time and better responsiveness. Sites like Vimeo and YouTube have implemented this technology already and hope to be 100% HTML5 compatible in the next two years.
- Geolocation: HTML5 can find any location and use it in any application for tagging, SEO, maps and more, and do it without plugins or a 3rd Party API.
- Faster Forms:HTML5 forms are built using the browser’s controls for validation, hinting, format and handling. You can still use them with external scripts, but it is not required.
- Interactive attributes: Some attributes added or enhanced with HTML5 enable a new level of interactivity that took a lot more development knowledge and scripting before. Now, attributes such as draggable, required, and contenteditable (to name a few) allow your elements to communicate with and be manipulated by the user.
As a designer, you will probably depend on ready-made widgets and snippets to implement these features into your websites as they are a bit more complicated than basic markup and styling, but it is good to know what is possible.
- HTML5 Gallery
- How to Draw with HTML 5 Canvas
- HTML5 Canvas The Basics (Opera Developer Community)
- HTML5 Canvas Cheat Sheet
- Interactive Typography Effects
- 3D Slideshow with HTML5 Canvas
- Cartagen: Framework For Rendering Maps in HTML5
- RGraph: HTML5 Canvas Graph Library
- Learning About HTML5 Local Storage
- Everything You Need to Know About HTML5 Audio and Video
What Can’t HTML5 Do?
- HTML5 Please helps you out with recommendations for polyfills and implementation so you can decide if and how to put each of these features to use.
- When Can I Use provides extensive browser compatibility and support information for CSS3, HTML5 and more.
- DD_belated PNG script
- Remy Sharp’s HTML5 Shiv
- CSS reset
While HTMl5 was designated as ready for use in 2009, it will still take another few months to get it to a truly ready state, with full certification not expected until 2014 (although HTML5 Doctor Richard Clark thinks it could be this year.) All this means is that some of the ways browsers handle the spec could change, or things that have been depreciated could be resurrected. Since the spec’s closing in 2009, you can feel safe knowing nothing new will be added and the core fundamentals of how the new elements and attributes are intended to be used will not change.
Building Websites With HTML5
Even with tools like Wix on the horizon, you shouldn’t hesitate to learn as much as you can about HTML5 today. Here are 7 things you can do with your website right now:
- Start using the HTML5 doctype and simplified document structure.
- Include fallbacks for graceful degradation in older browsers.
- Use block-level linking to help minimize your markup.
- Control style and layout exclusively through CSS, and use semantic class names when building your stylesheets.
- Use HTML5 elements for the majority of your markup.
- Use HTML5 form inputs.
Vail Joy is a professional writer, designer and developer with a vibrant background in music business, photography and social media. When she is not contributing her expertise to blogs and e-zines, she is building HTML websites and slaying dragons for Obox Design.