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.
As a designer, it is imperative you know the basics of HTML5 and CSS3, and at least understand their relationship with PHP and JavaScript. This article will give you a jump-start on the fundamentals and provide a handful of valuable resources for getting started with HTML5 for your next project.
What’s different?
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:
<!DOCTYPE html>
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.
Resources:
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:
- Canvas: HTML5 Canvas works with JavaScript libraries and CSS3 to help you create interactive websites, charts and graphs, web-based games and animations, much like Flash and Java did in the past.
- 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.
Learn More:
- 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?
While all of the major browsers have caught up to include support for the HTML5 and CSS3 spec as we know it today, it takes awhile for people to get up to date. HTML5 itself is designed to be as backwards compatible as possible, but is still a good idea to provide fallback support in the form of an HTML5 Shiv, which is a small JavaScript that helps older browsers interpret HTML5 elements and attributes properly. Most older browsers also have various ways of handling certain containers and elements, requiring you to create special styles just for them. A number of premade “reset” stylesheets exist to make this process easier for you.
Resources:
- 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
- Modernizr
- Remy Sharp’s HTML5 Shiv
- CSS reset
HTML5 Readiness
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
On March 26th, Wix will launch the very first full-featured HTML5 website building application that allows you to produce valid HTML5 websites without having to master the spec. This tool can significantly change how you design, giving you a visual editor for creating and styling elements, using drag and drop for arranging layouts and adding widgets. The builder includes a library of interactive canvas elements and animations, CSS3 effects and add-ins such as HTML5 audio, video, slideshows and forms. It also gives you control over adding your own HTML and JavaScript elements. Visit the Wix website to learn more and sign up to be the first to explore this new technology.
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.
- Replace Flash, JavaScript, CSS Sprites and other heavy plugins with HTML5 elements or pure CSS3 alternatives.
Learn More:
- HTML5 Rocks
- HTML5 Doctor
- HTML5 at W3Schools
- HTML5 Validator
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.