Introduction
In the past, Java applets, which are small Java programs, were integrated into HTML using the <applet> tag. These applets were interactive well before the introduction of modern JavaScript and Web APIs.
Note: The <applet> tag was deprecated in HTML4.0 and not supported in HTML5. Instead, you can use <object> tag or <object> tag instead of <object> <embed>. Click here to learn more about the <object> tag, and here to learn more about the <embed> tag.
Why it was used?
- To display animations
- To run small applications
- To add interactive features using Java
Syntax
<applet code="URL" height="200" width="100">.............</applet>
Example Code
<applet code="Shapes.class" width="300" height="200">
<b> Sorry! you need Java to see this. </b>
</applet>
Here is an illustration showcasing a basic Java applet that includes attributes for both width and height.
Attributes of HTML <applet> tag
Here is a compilation of mandatory and discretionary characteristics employed in <applet>:
Required attributes
| Attribute | Description |
|---|---|
code |
Specifies the name of the main class file in the Java applet that is to be executed. |
| object | Specifies the URL of a serialized version or precompiled representation of the applet. |
Optional attributes
| Attribute | Description |
|---|---|
| align | Defines how the applet is aligned relative to surrounding page elements. |
alt |
Provides alternative text to display in case the applet cannot be loaded. |
| archive | Indicates the location of an archive file (such as a JAR) that contains the applet's classes or resources. |
| codebase | Gives the root URL where the class or archive file described as in the code attribute can be found. |
| height | Sets the vertical dimension of the applet's display area in pixels. |
| hspace | Defines the amount of horizontal space around the applet. |
name |
Assigns a unique name to the applet instance for reference by scripts or other elements. |
| vspace | Defines the amount of vertical space around the applet. |
| width | Sets the horizontal dimension of the applet's display area in pixels. |
Why was <applet> deprecated?
The tag in question was a connection between HTML and Java that lacked adaptability. To separate HTML from a specific technology, W3C introduced the <object> element and later introduced the <embed> element. These elements allowed developers to incorporate different types of media and applications.
Reasons for deprecation:
- Dependent on the Java browser plugin (NPAPI)
- Poor accessibility and integration with assistive tools
- Browser instability and frequent crashes due to plugins
As a result, HTML 5 substituted <applet> with choices based on standards.
Supporting Browsers
| Element | Chrome | IE | Firefox | Opera | Safari |
|---|---|---|---|---|---|
<applet> |
Not supported | Not Supported | Yes | Not Supported | Yes |
This implies that applets will not execute even when integrated into your code, leading browsers to show alternative content instead.
Modern alternatives
In recent times HTML prefers the usage of <object> and <embed> to insert external content. But in the majority of uses of applets, safer native technologies are now available in the web platform:
- JavaScript APIs: For logic and interaction
- Canvas or WebGL: For graphics
- WebAssembly (WASM): For performance-intensive Java logic
- Server-side computation: For secure Java execution on backend servers
Moving from <applet> to modern approaches
If your old website still uses <applet>, follow this migration approach:
- Identify applet functionality (graphics, computation, etc.)
- Replace logic with modern web technologies (JavaScript, Canvas, or WebAssembly)
- Update markup using <object> or <embed> if you must embed legacy resources
- Provide fallback content for unsupported browsers
Example 1: Legacy <applet> code
Example
<!DOCTYPE html>
<html>
<head><title>Applet Example</title></head>
<body>
<p>Example of Applet Tag</p>
<applet code="Shapes.class" width="300" height="200">
<b>Sorry! you need Java to see this</b>
</applet>
</body>
</html>
Output:
Explanation:
Invoking a Java class is done to display content within specified dimensions. Due to modern browsers no longer supporting Java applets, a notification stating "Sorry! you need Java to see this" will be displayed instead.
Example 2: <object> Tag Replacement
Example
<!DOCTYPE html>
<html>
<head><title>Applet Example 2</title></head>
<body>
<object type="application/x-java-applet" data="Shapes.class" width="300" height="200">
<p>Applet fallback: your browser does not support Java applets.</p>
</object>
</body>
</html>
Output:
Explanation:
The <object> element has the ability to include external resources from other origins. By combining it with MIME type declarations, it can load Java applets in older web browsers. This tag serves as the designated replacement for <applet> from the HTML4 specification.
Example 3: Using Canvas as a modern replacement
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="300" height="200"></canvas>
<script>
const ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = 'lightgray';
ctx.fillRect(0, 0, 300, 200);
ctx.fillStyle = 'blue';
ctx.fillRect(50, 40, 100, 80);
</script>
</body>
</html>
Output:
A pale gray rectangle containing a blue box is displayed.
Explanation:
The Canvas API enables developers to perform graphics rendering similar to what applets would achieve, but without requiring a plugin.
Accessibility & SEO
Due to their graphical nature and reliance on plug-ins, applets often excluded individuals with disabilities. Modern web application APIs and semantic HTML play a crucial role in improving accessibility. It is essential to include fallback content within embedding elements to improve search engine optimization (SEO) and enhance user experience.
Security and Maintenance Concerns
Moving on from <applet> completely eradicates these risks. Contemporary web tools such as JavaScript, WebAssembly, and server-side APIs operate within a secured environment, preventing direct interaction with the operating system by the code.
By improving security measures, the overall maintenance becomes more manageable over time. This advancement allows developers to implement updates and release features through standard web protocols. This eliminates the need for users to install or set up additional software, ensuring a smoother and more secure web experience for all users.
Conclusion
The <applet> tag was important at the beginning of web interactivity as it allowed Java programs to execute within the browsers. Nonetheless, as the support of the plugins started to decline, security issues occurred, and with the appearance of strong native technologies, it was discontinued at the HTML 4 version and eliminated at HTML5. Alternatives such as <object> or <embed>, which are more secure, fast, and can be customised without external plugins, should now be used by modern developers.