Object Tags

This issue was largely fixed in Internet Explorer 8 beta 1, though it still fails when retrieving pages from other sites (partially fixed in Internet Explorer 8 beta 2, and completely fixed in Internet Explorer 8 RC 1), and for reasons best known to itself, choses to display scrollbars in the demo on this page. Internet Explorer 9 gets this page right, but may still display scrollbars on objects that point to SVG images.

Object tags can be used to embed any displayable media into a web page. And IE uses them quite happily. It uses them to display plugins, aplets, more plugins, and more applets. Oh, and just in case, you can have another plugin. But even since IE 4, the standard has asked for object tags to be used for much more. They are supposed to be used to embed anything. Images, other pages ... anything.

But we can already do that using other tags can't we? Yes. But the object tag is special. Object tags can be nested. The browser should try the outermost one first and work in to the innermost one until one of them works. When it finds something it can use, it should use that one, and ignore any that are nested within it.

So, say we try and display a movie. If that is not supported, try to display a Flash animation. If that is not supported, try to display an applet. If that is not supported, try to display an animated MNG. If that is not supported, try to display an animated GIF. If that is not supported, try to display a JPEG. If that is not supported, try to display an embedded web page. If that is not supported, try to display some text. From an accessibility point of view, this is immensely useful, and it even means that support detection is not needed, since the innermost text could contain a notice saying what plugin is required.

And as if that is not enough, they can also be put in the page head. What for? Because they are invisible there. So you could use them to pre-load images or movies without disrupting the page, and without using any scripts or CSS tricks at all. Awesome. And its been available for years. Oh yes, I forgot about IE. IE doesn't get any of this right. At all.

The furthest IE can go is to embed plugins and applets. Yup, that is all. It cannot nest objects, destroying the accessibility and automatic support detection. It cannot embed images, web pages or animations, destroying the other uses of this very clever tag. If it doesn't support what we ask for, it displays nothing. Yes, nothing. It cannot even preload objects in the page head. Wow. Great implementation there.

The results of this are very unfortunate. Of course, accessibility is reduced. But much worse, people check for support by running support detection scripts. Because of the numerous problems that IE causes with this, less common browsers like Opera are often punished for doing things properly. Users of these browsers are often given scripts that do not work, and usually give a completely incorrect and unnecessary reason for not working. Caching is done using JavaScript preloaders, or occasional CSS tricks. Accessibility is usually ignored. So once again, rely on one technology to implement another, and ignore the fact that some users may not be able to use that technology. More annoyingly, rely on the author to invent an algorithm, often done incorrectly by novice (or even professional) web developers.

Demo: You should see an image here. If images are disabled, or if the image type is not supported, you should see some text instead:
Your browser could not display the image, so it is displaying this text instead
Note: in rare cases, I have seen this demonstration work in IE, but using QuickTime to display the image and embedded page, instead of IE doing it natively. This is incorrect behaviour, since IE understands the MIME type, so it should not load a plugin. In these cases, QuickTime was also rendering all images in all web pages.

Workaround: Use <img> tags for images, with alt attributes for accessibility text (some speech readers will have problems with this). Use <object> or <embed> tags for plugins. Use <object> or <applet> tags for applets. Use a properly written support detect script that does not shut out any browsers, and provides accurate error responses. Embed pages using the <iframe> tag. Include alternative text for browsers that do it properly. Preload images using a preloading script. Forget about preloading anything else.

Don't click this link unless you want to be banned from our site.