"}
A Hand-Coded Designer CSS UI Kit
How To Design Your Business Card, A Guide for Web Designers
The MediaLoot HTML5 Compendium

The MediaLoot HTML5 Compendium

Let's face it, it's difficult to keep up with all of the new coding languages. Despite that difficulty, and the fact that some of these standards aren't even finalized, there's still a lot of pressure for designers to start using HTML5. The purpose of this compendium is to make it easier for everyone by providing an up-to-date reference on the new features and uses of HTML5.

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

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.

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:

  • cheat sheet
  • cheat sheet
  • cheat sheet

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.).

Download Video: MP4, WebM, Ogg
HTML5 Video Player by VideoJS

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

Share Your Resource

Have you worked with an HTML5 resource that has proven indispensable? Do you know a tip or a trick that we haven't yet included in this collection? Share your favorites below and help make this page even better.

Comments

  • Reply »
    Debbie

    Debbie

    Nice resource guys! I love the styling of this blog post (can I call it that?) it makes everything so much nicer to read.

    One of my favorite things about html5 is the new form attributes. The color and date pickers are awesome, you should definitely add some more information about that to the post. There isn’t really great support right now without adding a js library, but I can’t wait until more browsers can use them.

    Also, I love the demos but are there any of these that we can actually use on our own websites? Maybe would be nice to have an html5 effect library or something.

    Feb 16, 2011 at 8:02 pm
  • Reply »
    Callum

    Callum

    Very nice post. It’s good to see media loot sticking to their word about keeping their blog updated. Keep up the great work.

    Feb 16, 2011 at 10:55 pm
  • Reply »
    Greg Babula

    Greg Babula

    Here are some good resources I post on my blog

    http://gregbabula.com/tagged/html5

    http://gregbabula.com/tagged/css3

    Feb 24, 2011 at 10:03 pm
  • Reply »
    odollagma

    odollagma

    Haha that’s rediculous. No way

    Dec 14, 2011 at 10:06 pm
  • Reply »
    cristian hury

    cristian hury

    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.

    Sep 25, 2013 at 1:55 pm
  • Reply »
    Shawn Ballard

    Shawn Ballard

    This is a great resource! Keep up the good work guys.

    Oct 16, 2013 at 11:01 am

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

You can't just submit stuff to our site, but we'd love for you to consider being one of our design contractors, see http://medialoot.com/main/open-positions/ for more information.

See all