Back to site

The Future of Web Design: A look back and a look forward at web design trends

---

Introduction

Welcome to the MediaLoot HTML5 compendium! The purpose of this page is to be a consistently updated reference for web designers and developers who want to start using the new features of HTML5.

Let’s face it, it’s difficult to keep up with all the new changes to the language, and there’s a lot of pressure for designers to start using HTML5 and CSS3 too — both of which can be overwhelming at first.

The W3C specs for HTML5 and CSS3 are also incredibly long and practically unreadable, not to mention unfinished -  so it’s easy to see why a lot of designers choose to hold off on taking the effort to learn the new languages, however it’s really not that hard to start using both languages today, there doesn’t need to be a lot of pressure either because the beauty of adopting early is that you can work your way into it slowly and the only thing you actually need to know if you’re already using XHTML/HTML4 and CSS2 is what’s new and how can it benefit you.

Tag Reference

There are a range of new tags being introduced with HTML5, below is a reference chart for them, their attributes and their respective compatibility with the major browsers, although some elements may be listed as not compatible it is usually possible to emulate compatibility with CSS or Javascript, for example it is possible to use semantic elements in old versions of IE with a javascript include.

= Global attributes
(class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title)

Tag	Attributes	IE6	IE7	IE8	IE9	Firefox 3.5	Safari 5	Chrome 9	Opera 11
<article> An article on the page
<aside> Content aside from the page content
<audio> Sound content	autoplay, controls, end, loopend, loopstart, playcount, src, start
<canvas> Define graphics	height, width
<command> Specifies a command	checked, default, disabled, hidden, icon, label, radiogroup, type
<datagrid> Data in a tree-list	disabled, multiple
<datalist> A dropdown list	data
<datatemplate> Data template
<details> Details of an element	open
<dialog> Dialog or conversation
<embed> Embedded content	height, src, type, width
<eventsource> Target for events sent by a server	src
<figcaption> Caption for a figure element
<figure> A group of media content and their caption
<footer> Footer for a section or page
<header> Header for a section or page
<hgroup> A group of h1, h2 etc. elements
<mark> Marked text
<meter> Measurement within a range	high, low, max, min, optimum, value
<nav> Navigation links
<output> Specifies type of output	form
<progress> Progress of task of any kind	max, value
<rule> Rules for updating a template	condition, mode
<section> Section in a document
<source> Specifies media resources	media, src, type
<summary> Summary of the details element
<time> Date and time	datetime
<video> Video content	autoplay, controls, end, height, loopend, playcount, poster, src, start, width
<wbr> Line break opportunity for long words

Browser Compatibility in Depth

Browser compatibility should be used as guide only, the chart above doesn't take into account partial support - in depth resources can be found below. Checkout these great resources for full in depth compatibility information.

• Comparison of Layout Engines (HTML5) http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
• Current HTML5 Supporthttp://rgaucher.info/pub/whatwg_html5_implementations.html
• When Can I Use? http://a.deveria.com/caniuse/
• How to Make all Browsers Render HTML5 Correctly http://net.tutsplus.com/.../how-to-make-all-browsers-render-html5-mark-up-correctly-even-ie6/
• HTML5 & CSS3 Support http://www.findmebyip.com/litmus

Getting Browsers to Play Ball

To emulate support for semantic elements in current and older versions of Internet Explorer you can include a small javascript file such as html5shiv or modernizr.js to tell IE about the new tags you’ll be using. You can implement html5shiv by copying the code below:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

For all browsers it is useful to add some CSS to your document indicating how to render the new semantic elements, this can be something like:

header, footer, aside, nav, article {display: block;}

Cheat Sheets

A cheat sheet can be an invaluable resource, here are 3 of the best the web has to offer:

• 
• 
• 

Semantics

HTML5 (or is it just HTML? HTML5 is dead long live HTML) is becoming a lot more semantic and understandable, yes semantic is somewhat of a buzzword nowadays surrounding HTML, the easiest way to explain what all the hype is about is that tags will be relevant to the intended content they wrap.

The main difference we’re going to see is less <div>mania, just like using tables for layout in the past made HTML confusing and unreadable, most XHTML documents now end with a series of closing <div> tags like so:

			</div>
		</div>
	</div>
</div>

Ever played guess the <div> when your layout suddenly decided to jump all over the page? finding the culprit can be difficult sometimes, but by using more semantic tags, we can improve this, for instance tags like <header>, <section>, <article>, and <footer> will make it easier for humans and search engines to understand the content on your page.

More on this topic at Cat Cubed

HTML5 Skeleton

The Basic Skeleton

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	</body>
</html>

In HTML5 there is only one doctype, and it’s html so that’s nice and easy to remember, other than that the basic skeleton is the same as in XHTML and HTML4.

However, a more advanced skeleton, using some of the new HTML5 elements can go like this:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<header>
			<h1>Name</h1>
		</header>
		<nav>
			<ul>
				<li>Link 1</li>
				<li>Link 2</li>
			</ul>
		</nav>
		<section>
			<article>
				<hgroup>
					<h2>Title</h2>
					<h3>Sub Title</h3>
				</hgroup>
				<p>Content</p>
			</article>
		</section>
		<aside>
			<ul>
				<li>Link 1</li>
				<li>Link 2</li>
			</ul>
		</aside>
		<footer>
			<p>Copyright notice</p>
		</footer>
	</body>
</html>

Practicing with XHTML

If you’re not quite ready to jump into using HTML5 yet or for whatever reason you still prefer using XHTML at the moment there are a few things you can do to prepare for HTML5 while you wait, it’s as simple as naming your <div>’s using HTML5 conventions.

For example for a blog post you could use this template:

<div class=”article”>
	<div class=”header”>
		<div class=”hgroup”>
			<h1>Title</h1>
			<h2>Sub Title</h2>
		</div>
	</div>
	<div class=”section”>
		<p>Content of the blog post</p>
	</div>
	<div class=”footer”>
		<p>Meta</p>
	</div>
</div>

Notice how the <div> classes are named after the new HTML5 tags, although doing this appears to add a lot of unnecessary <div>’s around it has got it’s advantages too, apart from familiarizing yourself with HTML5 without actually using it, you may find it easier to target elements without knowing their specific class name (this really depends on how you work to how effective it will be) but by using the XHTML example above and the CSS below

.article>.section>.p { font-size: green}

we could target all paragraph elements within posts and ignore paragraphs that don’t follow that breadcrumb of article > section > paragraph.

More on semantics at A List Apart: A Preview of HTML5

Audio & Video

As you can imagine, <audio> and <video> tags aren’t fully supported by browsers yet, however Safari and Firefox can take advantage of them.

Audio
Embedding audio is a simple as the code below in Safari and Firefox:

<audio autoplay="autoplay" controls="controls">
<source src="yourfile.mp3" />
<source src="yourfile.ogg" />
</audio>

You can even remove the <source> tags and put src=”yourfile.mp3” in the audio tag, however it’s recommended to use the <source> tags, the reason two files are loaded is because Safari will recognize .mp3 files and Firefox will recognize .ogg files but neither will recognize the other yet.

It’s pretty likely that this will change in the future, however at this time the current method works.

Video
Embedding video is very similar, the basic code is:

<video width="640" height="480" controls=”controls”>
<source src="yourfile.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

As you can see it’s very similar to the <audio> tag except for that scary looking type attribute, what you need to tell the browser with the type attribute is what container format the video is and the codecs that are required to play it.

HTML5 Video Demo

VideoJS is an HTML5 Video Player, built with Javascript and CSS, with a fallback to a Flash video player for when the browser doesn't support HTML5 video (native HTML5 video doesn't require any plugins and uses the browsers own controls and video player skin.).

This demo is using native video (best view in Safari, Chrome or Firefox).

You can find a lot of information on this at diveintohtml5.org

Demos & Resources

• 

  Ball Pool
  Canvas & Javascript

  View Demo
  
• 

  Particle Animation
  by Feedtank

  View Demo
  
• 

  HTML5 Test
  Test your browser

  View Demo
  
• 

  Canvas 3D
  Canvas & Flickr

  View Demo
  
• 

  Canvas Nebula
  by Professor Cloud

  View Demo
  
• 

  HTML5 Audio
  Apple audio demo

  View Demo
  
• 

  HTML5 Video
  by Sublime Video

  View Demo
  
• 

  Weather Mapping
  by SmallTalk

  View Demo
  
• 

  iPhone Tetris
  by Six Revisions

  View Demo