HTML5 v. XHTML5

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:

<!DOCTYPE HTML>
<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:

<!DOCTYPE HTML>
<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="http://www.w3.org/1999/xhtml">
  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="http://www.w3.org/1999/xhtml" lang="en-us">
  <head>
    <meta charset="UTF-8"/>
    <title>XHTML5</title>
  </head>
  <body>
    <p>put valid XHTML markup here</p>
  </body>
</html>

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

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.

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.
    sessionStorage.getItem('keyname')
    sessionStorage.keyname
  • removeItem(key) - removes the key and its associated value. Unset the value with:
    sessionStorage.removeItem(‘keyname’);
  • 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:
    sessionStorage.clear();
  • 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 http://www.nczonline.net/blog/2009/07/21/introduction-to-sessionstorage/

Microdata

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.

<ul>
<li><img src="http://standardista.com/images/estelle.jpg" alt="photo of Estelle Weyl "/></li>
<li><a href="http://www.standardista.com">Estelle Weyl</a></li>
<li>1234 Main Street<br />
San Francisco, CA 94114</li>
<li>415.555.1212</li>
</ul>

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

<ul id="hcard-Estelle-Weyl" class="vcard">
<li><img src="http://standardista.com/images/estelle.jpg" alt="photo of Estelle Weyl" class="photo"/></li>
<li><a class="url fn" href="http://www.standardista.com">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>
<li class="tel">415.555.1212</li>
</ul>

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 http://microformats.org/code/hcard/creator

The same content could be written with microdata:

<ul id="hcard-Estelle-Weyl" itemscope itemtype="http://microformats.org/profile/hcard">
<li><img src="http://standardista.com/images/estelle.jpg" alt="photo of Estelle Weyl" class="photo"/></li>
<li><a href="http://www.standardista.com" 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>
<li itemprop="tel">415.555.1212</li>
</ul>

Or you can combine the two:

<ul id="hcard-Estelle-Weyl" class="vcard" itemscope itemtype="http://microformats.org/profile/hcard">
<li><img src="http://standardista.com/images/estelle.jpg" alt="photo of Estelle Weyl" class="photo"/></li>
<li><a class="url fn" href="http://www.standardista.com" 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>
<li class="tel" itemprop="tel">415.555.1212</li>
</ul>

http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#microdata 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.

ApplicationCache

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" />
<title>....

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:

CACHE MANIFEST
#version01

#files that explicitly cached
CACHE:
index.html
css/styles.css
scripts/application.js

#Resources requiring connectivity
NETWORK:
signin.php
dosomething.cgi

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.

TYPE ⇒

Attribute

Text, search, url, tel Email Password Dateandtime
Date,
Month,
Week,
Time
Dateandtime-local,
number
range color Checkbox, radio file
accept WK, O,
FF, IE
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,
FF, IE
disabled WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
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,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
min O, WK O, WK O, WK
multiple FF, WK, IE FF, WK
Name WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O, FF, IE WK, O,
FF, IE
WK, O,
FF, IE
pattern WK, O WK, O WK, O
placeholder WK WK WK
readonly WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
required WK, O WK, O WK, O WK, O WK, O WK, O WK, O
size WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
step O, WK O, WK O, WK
checked WK, O,
FF, IE
value WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O,
FF, IE
WK, O, FF, IE WK, O,
FF, IE
WK, O,
FF, IE
  • 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.

-Estelle

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">
(function(){
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++){
document.createElement(html5elmeents[i]);
}
}
)();
</script>
<![endif]-->

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.

-Estelle

The object element

The <object> element defines an embedded object. The <object> element is used to embed multimedia objects into web pages that are generally not natively supported by the browser. Object can be used for video clips, sound, images and other media formats. “Other media formats” include formats that are generally natively supported by browsers, such as images, text and html. The <object> element (and the various attributes) and child parameters provide browsers and multimedia application embedded in browsers with the information required to display multimedia objects.

<object data="myImage.png" type="image/png"></object>
<object data="myIframe.html" type="text/html"></object>
<object data="myMusicFile.mpeg" type="application/mpeg"></object>

Listing 1: the <object> element is a generic way of including media. Use more type specific elements, such as <img> or <iframe> when available. The <img> element is discussed in part 9 of this series.

The <object> element is generally used for embedding multimedia that requires the browser to load an external application to render the media (such as a flash movie or an audio file). The <object> element, along with its attributes and child <param> elements, allows you to specify everything required by the object — applets, plug-ins, media handlers and other components you may want to include in your web page — for presentation of that media by the browser and browser plugin, including source code, data type, initial values, etc. When including a Java applet, a .swf file, an ActiveX object, or other multimedia object, specify the data and parameters for objects and the code that can be used to display and manipulate the object data via <object> element attributes and child <param> elements.

Specifications and Browser Support

While the object element was supposed to be an important addition to the HTML 4.0 standard, it is still not completely supported by all browsers; though all browsers do support it to some extent. Whether an object is supported by the browser depends on the object type. The object element can be used to show many different media types such as ActiveX, PDF, Flash, or HTML, images and text files). Unfortunately, some browsers use different code to load the same object type. The nesting of the object elements is a great solution to enable you to degrade media based on browser support.

The <object> element can be located in either the <head> or as a child of the <body> element. The <object> can be found inside both block and inline elements, including inside the <button> and <a> elements, but NOT as a child of the <pre> element. The <object> element, in turn, can contain both inline and block level elements, including <param>, <form>, text and child object elements. While we’ll discuss <param> below, note that if a <param> element is found between the <object> and </object> it is part of the object of which it is a direct child and not an alternate code to execute. If text is found between the opening and closing <object> tags, it is alternate text for browsers that do not support the <object> element or the media defined by the <object> element. If the browser is able to display any of the parent media, then the text will not be displayed.

While the object element is an INLINE element, it can contain both inline and block level elements. Because it is an inline element, some recommend only including inline elements as children. If you are providing alternative content that will be displayed, my view is that you should use whatever HTML elements are most appropriate for displaying the default content, since it is valid to do so.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" 
   width="368" height="190" title="This is my flash movie">
   <param name="movie" value="myFlash.swf" />
   <param name="quality" value="high" />
   
   <object data="myImageName.jpg" type="image/jpeg">
     Some text 
   </object>
</object>

Listing 2: Example of code for an <object> element embedding a .swf file. I’ve added a nested image object for browsers not supporting flash (think iPhone!), and some default text if images are not displayed or found.

The <object> element

<object> elements can be nested inside a parent <object> element to provide the browser with alternative content to present if the browser is unable to display the media included by the outermost parent <object>. The browser walks thru the nested <object> media until it finds a media type it can render. If a browser is unable to render the media type of the parent object, the browser will try to render the next child <object> element until it finds an <object> with a datatype it is able to render. The search for the first renderable child will continue thru all the included object, and, if no renderable <objects> are found, the browser will display any HTML content, including images, that is the child of the inner-most <object> element.

For example, if you are displaying a Flash movie, but the user’s browser does not have the flash player installed, then you can present the user an image. However, if the user is using a tele-type reader, then you can serve the user text instead.

If the <object> element does not display properly, the content nested between the <object> and </object> tags will be executed. This allows allows you to have several nested object elements (one for each browser, depending on browser media support), and default text for some browsers if the content is not found or if the media is not supported.

Note: When the browser supports the media type, but the file is not found, browsers differ on whether or not to show the nested content.

Examples of simple <object> elements in action

<object data="real_file.htm" type="text/html" width="300" height="200">
  <p>The link to <a href="missingfile.htm">a real page</a> will 
  not show in browsers,since browsers can render html</p>
</object>

EXAMPLE 1: Since the HTML data file DOES exist, the HTML file linked to with the data attribute will display. Browsers include the html file object in an iframe like display — in this case a 200 x 300px iframe since height and width were declared.

<object data="fake_file.htm" type="text/html" width="300" height="200">
  <p>The link to <a href="missingfile.htm">a missing page</a> will 
  show in some browsers, and not in others </p>
</object>

EXAMPLE 2: Since the HTML data file does NOT exist, the above will display differently in different browsers. For example, IE6 provides an empty iFrame like 200px by 300px space, Safari displays the paragraph, and Firefox displays nothing.

<object data="real_pdf.pdf" type="application/pdf" width="300" height="200">
  <p>The link to <a href="real_pdf.pdf>a real pdf file</a> will 
  show in some browsers. Others will display the Adobe Acrobat application 
  within and iframe</p>
</object>

EXAMPLE 3: Since the pdf file DOES exist, the HTML file linked to with the data attribute will display IF the browser supports displaying PDF files within a browser window. However, if the user’s browser does not support in-browser displays of Adobe Acrobat, the paragraph with the link to the pdf file will be displayed.

<object data="myMusicFile.mpeg" type="application/mpeg">
     <object data="missingImage.jpg" type="image/jpeg">
        My Text Replacement 
     </object>
</object>

Listing 4: If you have Quicktime, or some other audio format plugin supported by your browser, the music file will be displayed. If there is no media player, the browser will display the JPG instead of MPEG. However, in our example, the image doesn’t exist. Firefox and Safari correctly display the replacement text. However, IE6 tries to display the missing image.

Note that in example four, the image is included as an <object> instead of <img> because I wanted to display the text ONLY if the image did not load: I didn’t want to display both. Browsers will consider the <img> element as part of the data to be displayed if the user agent can not render the data in the outer object element. Since the <object> element does not support the alt attribute, a better way of coding the contents of listing 2 would be:

<object data="myMusicFile.mpeg" type="application/mpeg">
     <img src="myImageName.jpg" alt="My Text Replacement" /> 

</object>

This is more appropriate since you can include an alt attribute with the image. If a user agent does not render images, the text provided in the alt attribute will be displayed, which was what was intended in Listing 2.

Attributes of the <object> element

In addition to the core attributes and internationalization attributes, the <object> element accepts the following attributes:

  • declare

    The declare attribute, when included, states that the object should only be declared, not created or instantiated until needed. The declare attribute only takes one value: declare="declare".

  • classid

    The classid attribute defines a class ID value as set in the Windows Registry or a URL. Used to specify the location of the object’s implementation, the URL syntax depends upon the object’s type. The value can be either a traditional address or an apparently incomprehensible string of letters and digits that are actually the letters C-L-S-I-D, followed by a colon, space and the object ID, such as “CLSID: 99B42120-6EC7-11CF-A6C7-00AA00A47DD2″, for an ActiveX control. Classid is used in conjunction with or as an alternative to the data attribute. Unless you can figure out the Registry of classid’s, get the correct classid value from the supplier of the ActiveX control. For example, for .swf files, the classid value is generated by Flash when the developer publishes the .swf and associated .html file from the .fla file. Or, when using Dreamweaver to inset media, Dreamweaver automatically includes the correct classid value..

  • codebase

    This codebase attribute contains the URL to use as a relative base for the URL specified by the classid attribute. In Listing 2 above, the URL of the codebase points to the codebase for the flash player or plug in. Note that the URL for the SWF file is included in the child parameter and NOT in the <object> element.

  • data

    Another URL, the data attribute contains the location of the data required by an object. This should be either a relative or absolute path the your file.

  • type

    This type attribute specifies the content-type, or MIME type, for the object’s data. This is different from the codetype (below), which is the MIME type of the object and not of the data it uses.

  • codetype

    This attribute specifies an object’s content-type, or MIME type. This defines the MIME type of the object, not the the data the object may use, as defined in the data attribute.

  • archive

    This archive attribute contains an absolute or relative URL, or space separated list of URLs, for the location of archive files. An archive file is generally used to contain multiple object files to improve the ability to access the object improving perceived download time.

  • standby

    If you want to define the text displayed while the object is loading include the standby attribute with the text message to be displayed as the attribute value.

  • height

    This height attribute specifies the height of the object in pixels or as a percentage of the enclosing window, depending on whether the percentage symbol is included. This value is overridden if the CSS defines a height for the object.

  • width

    This width attribute specifies the width of the object in pixels or as a percentage of the enclosing window, depending on whether the percentage sign is included in the attribute value. The CSS width property overrides the element attribute value when included.

  • usemap

    Objects can have hyperlinks associated with them through standard links using the <a> element, thru embedded linking mechanisms such as links in a flash movie, and also via image maps. The usemap attribute generally takes a fragment identifier referencing a map element somewhere else within the file of the image map to be used with the object as the value, but can also take an URL to a map in a separate file in browsers that support such behavior. If you include the usemap attribute, you should also include a <map> and the object will most likely be an image. An image map specifies active geometric regions of an included object and assigns a link to each region. Image maps are covered in part 10 of this series.

  • name

    The name attribute is allowed, but is not required.

  • tabindex

    Along with <a>,<area>,<button><input>, <select> and <textarea>, the <object> element also supports the tabindex attribute.

The border, align, datafld, dataformats, datasrc, hspace and vspace attributes for the <object> element have all been deprecated in XHTML.

The <param> element

The <param> element is used to define special parameters used to control Shockwave and Flash SWF files, ActiveX controls, Netscape Navigator plug-ins, and Java applets. The <param> element can only be nested within a parent <object> or <applet> element. (Note that the <applet> element is not valid in XHTML strict). Parameters set attributes specific to different types of objects. For example, a Flash object can use a quality parameter <param name=”quality” value=”best”> for the object tag. If you are using Dreamweaver, you will find a Parameter dialog box in the Property inspector.

The <param> element is an empty element, so must be closed with a trailing slash. The name attribute is REQUIRED. The value attribute, while optional, should be included. The <param> element also accepts the id, valuetype, and type attributes.

Note: There is no widely accepted standard for identifying data files for ActiveX controls. See the documentation for the object you’re using for information on the parameters it requires.