Embed a Scratch applet in HTML5 | Nick Freear’s blog

For the past year I’ve been following the progress of HTML5 with interest. And recently I’ve become interested in MIT’s Scratch. So naturally I’ve been test embedding Scratch using it’s Java applet in HTML5. The only article I’ve found so far on embedding Scratch in HTML5 contains a number of errors and invalid markup, so I’m setting the record straight.

First, the situation in HTML 4.01/XHTML 1.0 – <object> is the preferred element, with <applet> deprecated. So, <applet> is valid in HTML 4 Loose (XHTML 1.0 Transitional), but not HTML 4 Strict.

Drum Kit 2.0, by technoguy

Example embed for HTML 4.01:

<applet codebase="http://scratch.mit.edu/static/misc/" archive="ScratchApplet.jar"
        code="ScratchApplet" height="387" width="482">
   <param name="project" value="../../static/projects/technoguyx/355353.sb" >
   Your browser needs Java to view projects.
</applet>

In HTML5, the <applet> element is obsolete, not deprecated. So, we use the generic <object> element. Also, we need an alternative to the archive, code and codebase attributes. It took me a while to work out the solution, with the help of the W3C validator – we can use the <param> element.

Now, the HTML5 code:

<!DOCTYPE html><html lang="en"><meta charset=UTF-8 >

<object tabindex="0" type="application/x-java-applet" height="387" width="482">
  <!--Generic parameters for all Java applets. -->
  <param name="codebase" value="http://scratch.mit.edu/static/misc/" >
  <param name="archive"  value="ScratchApplet.jar" >
  <param name="code"     value="ScratchApplet" >

  <!--Specific parameters. -->
  <param name="project"  value="../../static/projects/technoguyx/355353.sb" >
  Your browser needs Java to view projects.
</object>
...

Drum Kit 2.0, by technoguy.

Your browser needs Java enabled to view projects.