HTML5: Introduction to <canvas>

Canvas: Tutorial of basic canvas functionality, canvas properties and methods

The HTML5 Canvas specification is a JavaScript API for coding drawings. The canvas API allows the definition of a canvas context object as the <canvas> element on your HTML page inside which we can draw.

We can draw in both 2D and 3D (WebGL) context. 2D is available in all the modern Web browsers, IE9, and via excanvas.js in current versions of IE, and will be more thoroughly introduced below. 3D is still nascent, with only experimental implementations.

2D context provides a simple yet powerful API for performing quick drawing operation, on a 2D bitmap surface. There is no file format, and you can only draw using script. You do not have any DOM nodes for the shapes you draw — you’re drawing pixels, not vectors. OK, not true. You are drawing vectors, but once drawn, only the pixels are remembered.

Your first <canvas>

Being a very basic introduction to canvas, we are only going to cover basic shapes and lines. If you are unfamiliar with JavaScript, the syntax may at first seem a bit confusing. If you are familiar, it should make sense.

Step 1 is adding the <canvas> element to your document. In terms of HTML, the only step involved in adding a canvas to your document is adding the <canvas> element to your document:

<canvas id="flag" width="320" height="220">
You don't support Canvas. If you did, you would see a flag

That is it for the HTML part of it. . We could simply have written <canvas></canvas>. However, you should include an id for ease of JavaScript targeting, but you could also target via placement within the DOM. You can also define the width and height of the canvas, though you can define that in the CSS as well. We’ve also included alternative content for users that don’t support or otherwise can’t see your <canvas> content

With that, we’ve created your blank drawing board, or canvas. Everything else takes place in our JavaScript files. Step 2 is drawing on our canvas. From now on, everything is in javascript. We target the canvas node with getElementById(‘flag’) or getElementsByTagName(‘canvas’)[0], initialize a 2D context and start drawing using 2D context API commands. We can draw the Japanese flag:

var el= document.getElementById("flag");

if (el && el.getContext) {
var context = el.getContext('2d');
context.fillStyle = "#ffffff";
context.strokeStyle = "#CCCCCC";
context.lineWidth = 1;
context.shadowOffsetX = 5;
context.shadowOffsetY = 5;
context.shadowBlur = 4;
context.shadowColor = 'rgba(0, 0, 0, 0.4)';
context.strokeRect(10, 10, 300, 200);
context.fillRect(10, 10, 300, 200);
context.fillStyle = "#d60818";
context.arc(160, 107, 60, 0, Math.PI*2, false);


The first line finds your <canvas> element by matching the element’s id attribute. Before creating the 2D context, we check to make sure that the canvas element has been found AND that the browser supports canvas by checking for the existence of the getContext method.

We have to then create a reference to a context using the getContext(contextId) method of the canvas element –‘2d’ and ‘3d’ are the contextId value choices. If context creation is successful, we are finally free to draw in our canvas.

Before drawing a shape, we must define the look and feel of the shape we want to draw by setting properties on the context object. We define the look of the border (stroke and linewidth) properties and the shadow of our first rectangle, which we draw with the strokeRect() method. We pass the same parameters as our SVG example: (10, 10, 300, 200). The four values are the x-offset, the y-offset, width and height respectively. Once the script executes a command, the script forgets about what it has done, and moves onto the next line of code. Unlike our SVG example, the rectangle we’ve drawn on our canvas is not part of the DOM.

When we draw our second rectangle using the fillRect method, which paints rectangles using the previously set fillStyle property, we need to pass the coordinates again as the DOM does not remember our first rectangle, though it can access pixel information.

Both rectangle method calls have the same parameters — 10, 10, 300, 200 — we’ve drawn our fill rectangle directly on top of our dropshadow rectangle. We could have created an object with those coordinates and passed it to both methods, but we can’t tell the canvas to access the first rectangle’s coordinates and copy to the second after the method call

As mentioned above, once you paint onto the canvas, the DOM has no recollection of what you’ve painted. Yes, the JavaScript remembers the values of the properties you’ve set, but the pixels that are places on the canvas are just pixels of color. As we start the process of drawing the disc or sun on our flag, the DOM has no recollection of which pixels were painted with which colors, but it does remember some properties we set, like our shadowColor. As we don’t want a shadow on the red circle, we can set the shadowColor to transparent.

Next we define our circle. We are not actually drawing the circle yet. context . arc(x-offset of center, y-offset of center, radius, startAngle, endAngle, anticlockwise) adds points to an arced path creating a virtual circumference of a circle described by the arguments, starting at the given start angle, in our case 0, which is on the right horizon, and ending at the given end angle, going in the given direction, which in our case is clockwise. Had our endAngle been less than 2Π, our circle would have been flattened: the start and end points connected by a straight line. Π would have created a half circle. We also re-define the fill color, from white to red. We then paint the circle we created using the fill() method that fills the described arc in the fillStyle color.

We haven’t even touched the surface of what <canvas> can do. is a fun page to learn simple shapes, colors, shadows, text, images, transformation, animation and mouse movement with <canvas>.

Canvas functions and properties


Set the fillStyle


Set the strokeStyle


Line widths


Line join styles

   context.lineJoin="bevel || round || miter"

Line end styles

   context.lineCap="butt || round || square"


Draw a rectangle

   context.strokeRect(left, top, width, height)

Fill a rectangle

   context.fillRect(left, top, width, height)

Erase a rectangle

   context.clearRect(left, top, width, height)


Begin a path


Complete a path


Move the pen to a location

   context.moveTo(horizontal, vertical)

Draw a straight line from current point to a new location

   context.lineTo(horizontal, vertical)

Stroke the current path


Fill the current path



Shadow color


Shadow horizontal offset


Shadow vertical offset


Shadow blur


Canvas versus SVG

HTML5 Canvas and SVG may seem similar, in that they are both web technologies that allow you to create rich graphics inside the browser, but they are fundamentally different. In SVG, you ‘draw’ with XML. For canvas, you draw with JavaScript. Canvas is the painting of pixels onto a canvas, once painted, each pixel is forgotten. SVG, on the other hand, creates DOM nodes, accessible until deleted or until navigation away from the page. They both have their advantages and disadvantages.

SVG is resolution independent, making SVG an excellent choice for user interfaces of all sizes as it allows scaling for all screen resolutions. SVG is an XML file format enabling easy accessibility. SVG can be animated using a declarative syntax, or via JavaScript. Each element becomes part of and is accessible via the SVG DOM API in JavaScript. However, anything that accesses the DOM repeatedly slows the page down.

Canvas is all drawn in pixels. Zooming can lead to pixilation. Canvas is inherently less accsessible: accessibility is limited mainly to including fallback content should canvas not render. Interactivity requires redrawing of each pixel. There are no DOM nodes for anything you draw. There’s no animation API, instead timers are generally used for updating the canvas at quick intervals. Canvas gives you a surface to draw onto with the API of the context you choose. Canvas, however, is very well suited for editing of images, generating raster graphics such as for games or fractals, and operations requiring pixel-level manipulation. Canvas can also be exported to gif or jpeg.


HTML5 allows developers to code very loosely, making the HTML 4 loose doctype seem strict. To me, not closing tags, omitting tags, not quoting attributes, etc., makes me throw up a little bit in my mouth. Not a pretty picture? Well, I would argue, neither is loose code. In fact, this is a valid HTML5 document:

<meta charset=utf-8>
<title>Valid HTML5</title>
<p>Tweetable Web page</p>

No <head>, no <body>, yet still valid. If that is too verbose for you, even:

<title>Blank Document</title>

is a valid HTML5 document. All you need is a doctype and a title.

If you want to code HTML5 yet still use valid XML syntax and headers, and serve your document as XML, you’re coding XHTML5: it seems that ‘XHTML5’ has become an official name of HTML5 coded and served as XML, since the original term "Polyglot Markup" never took off.

XHTML5 is a document that conforms to both the HTML and XHTML syntax by using a common subset of both the HTML and XHTML. To code XHTML5 you need to:

  1. Use the HTML5 doctype
  2. Code in XHTML well-formed syntax
  3. Default XHTML namespace: <html xmlns="">
  4. A server that serves up files as XML MIME type application/xhtml+xml

An XHTML5 document can be served as either HTML or XHTML, depending on browser support and MIME type. It really only becomes XHTML5 document if it is served with the XML MIME type application/xhtml+xml . Otherwise, it is just really well coded HTML5

For a document to be XML, you need a server that serves up the file as XML MIME type: application/xhtml+xml. This MIME declaration is not visible in the source code. If you want to check how you file is served, check the HTTP Content-Type header. The XML MIME type is not yet supported by Internet Explorer, but IE can render XHTML documents.

A XHTML5 document looks like this:

<!DOCTYPE html>
<html xmlns="" lang="en-us">
    <meta charset="UTF-8"/>
    <p>put valid XHTML markup here</p>

The XML declaration <?xml version=”1.0” encoding=”UTF-8”?> is not required if the default UTF-8 encoding is used. The meta charset is also not required, if your server is set up with the HTTP Content-Type header.

No, you don’t need to serve your files as XML. You don’t even need to include the XHTML namespace to code valid HTML5. If you do choose to markup your HTML5 as if you were coding XHTML, your HTML5 document will validate. This article provides a definition of what is XHTML5 versus what is HTML5 coded using XHTML syntax.

Introducing HTML5: Web Workers

All the interactivity executed on a page, including CSS repainting of a page when needed, runs on a single JavaScript thread. If there is a task with a heavy script load, the browser may slow to a crawl, greatly harming the user experience. HTML5 Web Workers allow JavaScript to delegate tasks to other processes so that scripts run in parallel: the main script can do the exciting stuff while the Web Workers do any heavy lifting you pass to them without slowing the main script thread.

One way workers are useful is to allow your code to perform processor-intensive calculations without blocking the user interface thread. Workers enable web content to run scripts, even AJAX HTTPRequests, in background threads. The worker thread can perform tasks without interfering with the user interface.

You know how sometimes web applications take a long time and you have to wait for the hourglass to disappear before being able to interact with the page? Web workers are a solution. Workers perform JavaScript on a background thread leaving the main thread free to manipulate the DOM and repaint the page, if necessary.

Web workers cannot manipulate the DOM. If actions taken by the background thread need to result in changes to the DOM, they should post messages back to their creators to do that work. The postMessage() method can be employed.

Brief overview of Web Worker implementation

To create a web worker you call the Worker() constructor, specifying the URI of a script to execute in the worker thread and set the worker’s onmessage property to an appropriate event handler function to receive notifications from the web worker. You terminate a worker with the Worker terminate() or close() method. The terminate() method is immediate, stopping all current processes.

var webWorker = new Worker('new_thread.js'); //create it
webWorker.onmessage = function(event) {
// handle the message

Workers can use timeouts and intervals just like the main thread can. This can be useful, for example, if you want to have your worker thread run code periodically instead of nonstop. You can control the worker by employing the setTimeout(), clearTimeout(), setInterval(), and clearInterval() methods.

Worker threads have access to a global function, importScripts(), which lets them import scripts or libraries into their scope. It accepts as parameters zero or more URIs to resources to import;

importScripts(scripts/jquery-min.js', application.js');      /* imports both scripts */ 

HTML5 includes several APIs that enable developers to enhance user experience. HTML5 web workers improve script runtime of web applications. In this section we provided a very brief overview of webworker. You should also check out microdata, which can be incorporated to improve the semantics of web content. We’ll also be covering ARIA, or Accessible Rich Internet Applications, and GeoLocation into our intro to HTML5 modules series.

In the meantime, if you want to dive deeper into Web Workers, check out:


SessionStorage is an alternative to session cookies, but more powerful. The HTML5 storage API defines persistent data storage of key-value pair data in Web clients. The HTML5 Storage API improves upon HTTP session and local cookies that you are likely to be already familiar with. While cookies are limited to 4KB, the new standard allows for more space. The size depends on the browser, but is generally in the MB rather that KB range. HTML5 provides for two types of storage: persistant localStorage, and unique per open window/tab sessionStorage. Today we’ll focus on sessionStorage.


Session storage is accessible to any page from the same site opened in that window. If the user had multiple windows opened on the site, each one would have its own individual copy of the session storage object.

Cookies are sent to the server with every HTTP request. Session data, however, isn’t sent automatically, reducing the size of every request. The developer determines which key-value pairs need to be sent with each request.

Most shopping carts us use cookie-based authentication to remember the users browser session. Without sessionStorage, if two users want to shop on the same site from two windows of the same browser, it is not possible because cookies are tied to the browser session. With session storage, this can be done as the session storage is tied to the current window. As each window maintains its own session information, using sessionStorage is perceived as if each window is a different user accessing the shopping cart from different systems.

Okay that example explains how session storage is different from cookies… but is there not a slightly more practical example to talk about? I’m just thinking what storefront is ever going to think of what you just described as a desirable scenario that they’ll want to support (or care about)?

Perhaps something like the ability to test websites by logging in as different users as the same time from different tabs, or? just something that is a bit more practical would help I think…

sessionStorage should be used to store temporary data related to a single browser window as it ceases to exist after the window is closed.

The sessionStorage object has five methods and one property:

  • setItem(key, value) – sets the value for the given key. For example, define the session variable with:
    sessionStorage.setItem('keyname', 'data value')
  • getItem(key) – retrieves the value for the given key. Returns null if the key does not exist.
  • removeItem(key) – removes the key and its associated value. Unset the value with:
  • key(position) – returns the key for the value in the given numeric position.
  • clear() – removes all key-value pairs. Clear all the key value pairs with:
  • length – The length property indicates how many key-value pairs are currently stored in sessionStorage.

Using sessionStorage is extremely easy. It is like defining and using a regular variable, except that it needs to be prefixed with sessionStorage.

For more information on sessionStorage, see


Microdata let you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics. Microdata uses the new to HTML5 attributes of itemscope, itemprop, itemref and itemtype. The itemscope attribute is used create an item. The itemprop attribute is used to add a property to an item. If an itemprop has associated properties that are not descendants of that itemprop, you can associate those properties with that itemprop by using the itemref attribute: the entity that has the itemscope attribute also accepts the itemref attribute that takes as it’s value a space separated list of id’s of entities that should be crawled in addition to the itemprop’s descendants.

Microdata is most useful when it is used in contexts where other authors and readers are able to cooperate to make new uses of the markup. You can create your own types of microdata markup marked up on a page that doesn’t expect its microdata to be re-used. Use the itemtype attribute to provide a URI. There doesn’t need to be anything at that URI, but all of the itemscopes of the same itemtype should reference the same URI. It is most useful, however, to not create your own vocabulary if one exists for a similar purpose. There are several microdata vocabularies that have been standardized that coincide with Microformat conventions.

Microformats are very similar to microdata. In fact, microdata can be viewed as an extension of the existing microformat idea that attempts to address the deficiencies of microformats without the complexity of systems such as RDFa. Instead of using the new itemscope, itemprop, itemtype, etc. attributes, Microformats repurpose the class attribute to provide human and machine readable semantic meaning to data, microdata

Microformats are standardized sets of vocabularies that are both human and machine-readable. They are web page conventions used to describe common information types including events, reviews, address book information and calendar events. Each entity, such as a person, event or business, has its own properties, such as name, address and phone number.

In general, microformats use the class attribute in opening HTML tags (often <span> or <div>) to assign brief, descriptive names to entities and their properties. Unlike Microdata, Microformats are NOT part of the HTML5 specification.

Here’s an example of a short HTML block showing my contact information for me.

<li><img src="" alt="photo of Estelle Weyl "/></li>
<li><a href="">Estelle Weyl</a></li>
<li>1234 Main Street<br />
San Francisco, CA 94114</li>

Here is the same HTML marked up with the hCard (person) microformat.

<ul id="hcard-Estelle-Weyl" class="vcard">
<li><img src="" alt="photo of Estelle Weyl" class="photo"/></li>
<li><a class="url fn" href="">Estelle Weyl</a></li>
<li class="adr">
<span class="street-address">1234 Main Street</span>
<span class="locality">San Francisco</span>, <span class="region">CA</span>, <span class="postal-code">94114</span> <span class="country-name hidden">USA</span>
<li class="tel">415.555.1212</li>

In the first line, class="vcard" indicates that the HTML enclosed in the <ul> describes a person: in this case, me. The microformat used to describe people is called hCard but is referred to in HTML as vcard. While confusing, it isn’t a typo.

The rest of the example describes properties of the person, including a photo, name, address, URL and phone, with each property having a class attribute describing the property. For example, fn describes my full name.
Properties can contain other properties. In the example above, the property adr encompasses all components of my fake address including street-address, locality, region and postal-code. With a little CSS we can hide the ‘hidden’ class and add a line break between street-address and locality. To create your own hcard, visit

The same content could be written with microdata:

<ul id="hcard-Estelle-Weyl" itemscope itemtype="">
<li><img src="" alt="photo of Estelle Weyl" class="photo"/></li>
<li><a href="" itemprop="fn">Estelle Weyl</a></li>
<li itemprop="adr">
<span itemprop="street-address">1234 Main Street</span>
<span itemprop="locality">San Francisco</span>, <span itemprop="region">CA</span>, <span itemprop="postal-code">94114</span> <span class="hidden" itemprop="country-name">USA</span>
<li itemprop="tel">415.555.1212</li>

Or you can combine the two:

<ul id="hcard-Estelle-Weyl" class="vcard" itemscope itemtype="">
<li><img src="" alt="photo of Estelle Weyl" class="photo"/></li>
<li><a class="url fn" href="" itemprop="fn">Estelle Weyl</a></li>
<li class="adr" itemprop="adr">
<span class="street-address" itemprop="street-address">1234 Main Street</span>
<span class="locality" itemprop="locality">San Francisco</span>, <span class="region" itemprop="region">CA</span>, <span class="postal-code" itemprop="postal-code">94114</span> <span class="country-name hidden" itemprop="country-name">USA</span>
<li class="tel" itemprop="tel">415.555.1212</li>
</ul> provides information about microdata.

Search engines will not display content that is not visible to the user. Providing search engines with more detailed information, even if you don’t want that information to be seen by visitors to your page, can be helpful. Event time in ISO data format helps ensure that events are placed in the right time sequence and correctly placed in calendars. Providing geo coordinates of latitude and longitude can help ensure correct mapping. Providing semantics around reviews provides Google with added meta data that it can use to better display your search results leading to a higher click thru rate.

To enable the web to be a single global database, being able to parse the available data into meaningful data points is required. Microdata and microformats help make otherwise non-descript data meaningful to parsers.


Up until now, users of web applications have only been able to use the applications while connected to the Internet. When offline, web based e-mail, calendars and other online tools have been unavailable, and, for the most part, continue to be. While offline, users may still access some portions of sites they have visited by accessing what is in the local cache, but that is limited and inconvenient. If a user gets bumped offline in the middle of a process — writing an email, filling a form — hitting submit can lead to a loss of all the data entered. The HTML 5 specification provides a few solutions including a SQL-based database API for storing data locally, and an offline application HTTP cache for ensuring applications are available even when the user is offline. HTML 5 contains several features that address the challenge of building Web applications that don’t lose all functionality while offline, including SQL, offline application caching APIs as well as online/offline events, status, and the localStorage API.

In this section we are focusing on the Application Cache.

A book could be written about each of these topics. In this series of articles, we’re are introduced to each of the HTML5 API and related modules (for example, GeoLocation is not in the HTML5 specifications, but is often thought to be). This series will provide a brief introduction to each topic, linking to the specifications and other relevant articles. It’s important to know about what is going to be in HTML5 so that when these features are needed, and when they are available and supported on your target devices, you’ll know about these features.

Application Cache

To access a webpage offline, we’ve been able to click on the ‘save’ menu item in our browser to save the html file and associated media for a while now, but this method of saving web pages only works for static content. With the ubiquity of web-based applications, it is more important now than ever that web applications be accessible when the user is offline: whether the user is offline for the duration of a 5 hour flight, or if the user is just temporarily offline as 3G connectivity is lost while driving… um, I mean, riding as a passenger. While browsers have been able to cache components of a website, HTML5 addresses some of the difficulties of being offline with the ApplicationCache API.

Using the cache interface gives your web application the advantages of 1) offline browsing, 2) faster reloads and 3) reduced server load. With Application Cache offline browsing, you entire site (within limits) can be navigable even when a user is offline. By caching resources, the resources are local, loading much faster, and they’re retrieved only when altered, which reduces the server load. AppCache enables the local storing of up to 5MB (or limits you to 5MB, depending on your perspective) per website.

The Application Cache (or AppCache) enables you to specify which files should be cached and made available offline, enabling your website to work correctly, including page reload, when your user is not online.

For AppCache to work, you include the manifest attribute in the opening <html> tag. The value of which is the URL of a text file listing which resources should be cached. In your HTML file, include manifest="URL_of_manifest".

<!doctype HTML>
<html manifest="resourcelist.manifest">
<meta charset="utf-8" />

With the inclusion of the manifest attribute linking to a valid manifest file, when a user downloads this page, the browser will cache the files listed in the manifest file, the manifest file itself and the current document and make them available even when the user is offline.

When the page is visited, the browser will try to update the cache if the manifest file has changed. It fetches the manifest and, if the manifest has changed since the page was last visited, the browser re-downloads all the assets and re-caches them.

The cache manifest file

The .manifest file is a text file that lists the resources the browser should cache. The file must start with the following string: CACHE MANIFEST. The required string is then followed by a list of files to be cached, and optional comments and section headers.

To create a comment, include a # as the first character of the line and the remainder of the line will be ignored. Section headers change the current section. There are three possible section headers, CACHE:, FALLBACK: and NETWORK:. The files following the CACHE: header are explicit. If no header is defined, or if files are listed above the headers, those files are explicit. FALLBACK: switches to the fallback section — if the first file is not available, the second file listed on the line will be served. While secure (https://) files may be cached, they have to be from the same origin as the manifest. The NETWORK: heading leads the online white list section – it isn’t cached, and references to this file will bypass the cache and access the file online.

The manifest file is also permanently stored into the browser cache, only to be overwritten if there is an edit made to the file. While the browser will not read the comment, the .manifest file needs to be served with the mime-type "text/cache-manifest". You may need to add a custom file type to your web server or .htaccess configuration if you don’t have access to the server.

A .manifest file lists the files that the browser should cache. The file may look something like this:


#files that explicitly cached

#Resources requiring connectivity

The Application Cache API adds an element to HTML5. The <event-source> element is a new feature in HTML 5 that allows servers to continuously stream updates. When used with the appCache, its src attribute takes as its value a NETWORK: file. The NETWORK: files will never be cached, so that any attempt to access that file will bypass the cache. The <event-source> tag defines a source for events sent by a server. The src attribute of the <event-source> element takes as it’s value the white-listed NETWORK: file to allow for continuous upsteaming from the server.

You’ll note that there is a version number in a comment on the second line. While the browser will generally ignore the comment, it will note if there are changes to the file. Changing the commented version number has become the standard way of informing the browser that the manifest file should be considered updated.

Updating the cache

Once an application is offline it remains cached until the user clears their browser’s data storage for your site, the .manifest file is modified or the app cache is programmatically updated.

If you update a file listed in the manifest, this does not inform the browser that the assets must be re-cached. The reason we added the commented version number was to inform the browser that the assets must be re-cached by altering the .manifest file itself.

If the manifest file or a resource specified in it fails to download, the entire cache update process fails and the browser will keep using the old application cache.

HTML5 Input Attributes & Browser Support

I have updated the HTML5 Web Form Browser support grid to include the various input attributes, for what input type each is relevant, and which browsers support each attribute for each type.



Text, search, url, tel Email Password Dateandtime
range color Checkbox, radio file
accept WK, O,
autocomplete O O O O O O O
autofocus WK, O WK, O WK,O WK, O WK, O WK, O WK, O WK, O
checked WK, O,
disabled WK, O,
WK, O,
WK, O,
WK, O,
WK, O,
WK, O,
WK, O,
WK, O,
WK, O,
Form O O O O O O O O
list WK, O WK, O WK, O WK, O WK, O WK, O
max O, WK O, WK O, WK
maxlength WK, O,
WK, O,
WK, O,
min O, WK O, WK O, WK
multiple FF, WK, IE FF, WK
Name WK, O,
WK, O,
WK, O,
WK, O,
WK, O,
WK, O,
WK, O, FF, IE WK, O,
WK, O,
pattern WK, O WK, O WK, O
placeholder WK WK WK
readonly WK, O,
WK, O,
WK, O,
WK, O,
WK, O,
required WK, O WK, O WK, O WK, O WK, O WK, O WK, O
size WK, O,
WK, O,
WK, O,
step O, WK O, WK O, WK
checked WK, O,
value WK, O,
WK, O,
WK, O,
WK, O,
WK, O,
WK, O,
WK, O, FF, IE WK, O,
WK, O,
  • WK = Webkit (tested Safari 5)
  • O = Opera (10.5 on Mac)
  • FF = Firefox (3.6.3 on Mac)
  • IE = Internet Explorer (IE8 on XP)

Browsers that don’t support the type attribute may still support other attributes in the input as the browser may support attributes on the text input type (such as maxlength or size), and will therefore support those attributes on a type it doesn’t support, as the input will default to text type. For example, while IE and FF don’t currently support the email type, they do support the multiple attribute on that type, since they will accept a text type including space separated email addresses.

Resources for this effort include:

HTML5: <section> v. <article>

I have been asked several times “when do you use <article> and when do you use <section> in HTML5?” I use an analogy that I figured I would share, as it seems to help developers make sense of the two elements.

Think of a newspaper. The paper comes in sections. You have the sports section, real estate section, maybe home & garden section, etc. Each of those sections, in turn, has articles in it. And, some of those articles are divided into sections themselves.

In other words, you can have parent <section>s with nested <article>s that in turn have one or many <section>s. Not all pages documents need these, but it is perfectly acceptable and correct to nest this way.

I hope that helps explain it.


Making IE recognize HTML5 elements

IE6, IE7 and IE8 don’t recognize the HTML elements. This causes a major problem when you’re using the HTML5 elements, such as ‘aside’, as part of (or your complete) selector in your CSS. Add this snippet either in your HTML or as a condionally included file, and IE will be able to handle your HTML5 elements as selectors in your CSS, and as members of your DOM in javascript. (thanks to John Resig for the inspiration)

<!--[if IE]>
<script type="text/javascript">
var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
for(var i = 0; i < html5elmeents.length; i++){

Printing HTML5 in Internet Explorer: where HTML5 is not supported

The code snipped above does wonders for enabling the various Internet Explorer’s to understand HTML5 elements as element selectors for scressn media, it does nothing to enable print CSS. The above javascript doesn’t cure the ‘print’ issue. Jonathan Neal has come up with a javascript solution to the IE HTML5 print issue.

IE Print Protector is a javascript file that allows you to print HTML5 pages in Internet Explorer, helping IE render HTML5 elements correctly, both on screen and in print.

HTML5: <section> v. <article>

I have been asked several times “when do you use <article> and when do you use <section> in HTML5?” I use an analogy that I figured I would share, as it seems to help developers make sense of the two elements.

Think of a newspaper. The paper comes in sections. You have the sports section, real estate section, maybe home & garden section, etc. Each of those sections, in turn, has articles in it. And, some of those articles are divided into sections themselves.

In other words, you can have parent <section>s with nested <article>s that in turn have one or many <section>s. Not all pages documents need these, but it is perfectly acceptable and correct to nest this way.

I hope that helps explain it.