XHTML and XForms

Steven Pemberton, CWI, Amsterdam and W3C
Chair, W3C HTML and Forms Working Groups

HTML: A success!

But what a mess! Both in design and use.

XHTML is trying to improve the situation

The XHTML Family

XHTML is a family of XML-based markup languages being designed.

Currently it consists of:

• XHTML 1.0 (in 3 flavours): HTML 4 in XML.
  A transition strategy.
• XHTML 1.1: A cleaned-up XHTML 1.0 Strict
• XHTML Basic: For small devices.
  Now a part of mobile phones, as well as soon for printers and TVs
• And soon: XHTML 2

Example of XHTML running on a phone

XHTML 2

The new member of the XHTML family is in our minds the real XHTML.

Our aims are:

• As generic XML as possible
• Less presentation, more structure
• More usability
• More accessibility
• Better internationalization
• More device independence
• Less scripting

In fact, many of these things are intertwined.

Aim: Generic XML

By 'generic XML' we mean: if a facility exists in XML technologies, and it is suitable, use it and not a special-purpose XHTML facility. Try to get missing functionality added to XML. Examples:

• All presentation defined in terms of CSS
• All presentation tags removed
• CSS being updated for missing functionality
• xml-base added to XML to replace <base>

Advantages: less variability; more interoperability; much of XHTML 2 works already; opportunity to make a cleaner break.

Aim: Less presentation

Remove all presentation-only markup.

Use stylesheets to define presentation.

Advantages: possible to author once, and display on different devices; better presentation possibilities; device presentation not hardwired; CSS has support for devices; more accessibility.

The power of CSS is currently seriously underappreciated.

(Note: doesn't require CSS to be implemented; just uses its model)

Separating Content and Presentation: Author Advantages

• Easier to write your documents
• Easier to change your documents
• Easy to change the look of your documents
• Access to professional designs
• Your documents are smaller
• Visible on more devices
• Visible to more people

Separating Content and Presentation: Implementor Advantages

• Improves the implementation (separation of concerns)
• Can produce smaller browsers

Aim: More structure

Add more semantically-oriented markup to make documents richer.

Examples: <l> element instead of <br>. <section> and <h> elements instead of <h1> <h2> etc

Not

I think that I shall never see<br>
A poem lovely as a tree

but

<l>I think that I shall never see</l>
<l>A poem lovely as a tree</l>

Advantages: more presentational opportunities (folding, marquee, numbering)
[More shortly]

What makes a website popular?

What are the features of websites that you go back to regularly, that differentiate them from websites with the same purpose that you don't go back to?

What makes a website popular:

Forrester Research did some research on this:

• Good content (75%)
• Usability (66%)
• Speed (58%)
• Frequency of updating (54%)

(the rest is noise: 14% and lower)

Aim: more usability

More usability for: the author, the surfer

As an example of poor usability, current frames are a disaster! We are currently defining XFrames, a replacement for Frames.

Aim: More accessibility

One day we will all be grateful for accessible websites. Maybe even today.

The Kiss of the Spiderbot:

"Google is, for all intents, a blind user. A billionaire blind user with tens of millions of friends, all of whom hang on his every word. I suspect Google will have a stronger impact than [laws] in building accessible websites."

Karsten M. Self

Examples: more structure, navigation lists, better treatment of images

Structure/Accessibility example

<h2>Chapter 1</h2>
...
<h3>Section 1</h3>
...

is now:

<section>
<h>Chapter 1</h>
....
   <section>
   <h>Section 1</h>
   ...
   </section>
</section>

More structure gives more accessibility.

Images

In designing XHTML 2 we decided to do away with a separate concept of an image altogether. Now we just say that there is an equivalence between an external resource and an internal one. For instance

<table src="temperatures.png">
<caption>Average monthly temperatures</caption>
<tr> <th>Jan</th> <th>Feb</th>....
<tr> <td>0</td>   <td>-4</td>...
</table>

A browser that can do images will display the image; others will display the table.

Advantages: device independence, accessibility, and even usability (since if the image is unreachable the document is still useful.)

Aim: Internationalization

• Largely thanks to generic XML facilities
• But: Ruby markup for East-Asian texts
• Less use of text-in-attributes (like alt), that cannot be marked up.

Aim: Less scripting

Observe how scripting is currently used.

Identify missing markup/functionality.

Add it where possible; try to cover 80% mark

Examples: menus for navigation; forms data checking; folding presentation.

Advantages: more devices, more presentational variations, better search, better accessibility

Aim: More device independence

Single authoring

The aim of 'less scripting' has already been mentioned: this clearly increases device independence.

Similarly, no hard-wired presentation means that a document can be styled with different stylesheets for different devices (as supported by CSS2)

There are two other areas where device independence is being addressed:

Events and Forms

Events

Current HTML events are a disaster

• Device properties are encoded (e.g. onclick)
• Document structure and scripting are entwined rather than separated out
• Scripting language is hard-wired in document.
• Can't add new event types

XML Events addresses these.

<a onClick="...javascript..." ...>

becomes

<a ev:event="activate" ev:handler="#hdlr" ...>

Forms: the basis of the e-commerce revolution

Clearly HTML: Forms have shown their worth.

But after several years of experience, we now know how they can be improved.

XForms is attempting to address those issues.

XForms

• Client-side checking (no scripting)
• Data types
• XML data is returned
• Two separate parts: the 'real' form (data, datatypes and submission details), and controls bound to the data.
• Controls are device-independent and accessible.

Example Form Control

<input ref="/person/date">
  <label>Date of birth</label>
  <hint>Please enter your date of birth</hint>
</input>

A user agent has a default presentation.

If the user agent supports it, a stylesheet can be used to define other presentations.

Another example control

<select ref="icecream/flavors">
  <label>Flavours</label>
  <item><label>Vanilla</label>
        <value>v</value></item>
  <item><label>Strawberry</label>
        <value>s</value></item>
  <item><label>Chocolate</label>
        <value>c</value></item>
</select>

This example covers both radio-button style selection, and menu selection: not encoded in the control.

XForms Demo

We are close to PR status. Three implementations taking part in interoperability tests. We know of more than 20 implementations currently, and some emerging large user groups.

Conclusions

HTML was originally designed as a structure description language, not a presentational language.

The design of XHTML is truly 'radical': taking HTML back to its roots.

Device independence, accessibility and usability are surprisingly closely related.

Even though website builders may not yet know it, device independence, accessibility and usability have a major economic argument in their favour. Spread the word!

More information: www.w3.org/Markup,www.w3.org/Markup/Forms