XHTML Steven Pemberton CWI, Amsterdam Chair, W3C HTML Working Group

Overview zHistory zPhilosophy zXML and related technologies zXHTML 1.0 zModularisation zXHTML Basic zXHTML 1.1 zThe Future

HTML 1 zThe original HTML was designed in the early 1990’s for scientific reports zEach document was a single resource (not even ) z(This explains much about HTTP by the way)

(HTML 1) zIt is amazing how much we have been able to do with a language with such beginnings zIt was described using SGML

HTML as an SGML Application zSGML: an international standard in 1986 zIt is a Meta-language that describes data formats, using DTD’s (Document Type Definitions) zDescribes structure, not presentation HTML as SGML Application

Example of a DTD fragment <!ELEMENT table (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>...

Attributes <!ATTLIST TABLE %attrs; -- %coreattrs, %i18n, %events -- summary %Text; #IMPLIED width %Length; #IMPLIED border %Pixels; #IMPLIED … >

Entities <!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

Problems with SGML zArcane syntax zVery difficult to implement fully zNo support for types

Changes to HTML zNetscape and Microsoft start adding to HTML: mostly presentation-oriented tags (like, ), and frames zThe World Wide Web Consortium (W3C) started effort to: yKeep HTML Pure yDo presentation via Style Sheets

Separating content and presentation zHTML was designed as a data-structuring language, but the later changes undermined this. zSeparating content from presentation has distinct advantages

For the author zEasier to write your documents zEasier to change your documents zEasy to change the look of your documents zAccess to professional designs zYour documents are smaller zVisible on more devices zVisible to more people

For the webmaster zSeparation of concerns zSimpler HTML, less training zCheaper to produce, easier to manage zEasy to change house style zReach more people zSearch engines find your stuff easier zVisible on more devices

For the reader zFaster download (one of the top 4 reasons for liking a site) zEasier to find information zYou can actually read the information if you are sight-impaired zInformation more accessible zYou can use more devices

For the implementor zImproves the implementation (separation of concerns) zCan produce smaller browsers

Changes to HTML (2) zAnother change that Netscape made, with insufficient thought was Frames zFrames create significant problems with web pages

The problems with frames zCan’t bookmark framesets z[Back] does odd things z[Page up] and [page down] work oddly z[Reload] often doesn’t work right zSecurity is compromised zNested frames are hard to deal with (how do you get out?)

What frames can do zSearch and show interfaces zKeeping script variables in a hidden frame

Style languages zThe first action that W3C did was to start an activity on Style Sheets (Nov 1995) zThis produced CSS1 initially (Dec 1996), then CSS2 (May 1998) (CSS3 is in preparation) zLater produced XSL, an XML-based language, as complementary to CSS

CSS zCSS is a separate language from HTML that allows you to specify how an HTML document, or set of documents, should look zSeparates content from presentation zHTML can be a structure language again

Examples of CSS h1 { font-weight: bold; font-size: 2em } h2 { font-weight: bold; font-size: 1.5em } em {background-color: yellow} body {margin-left: 20%}

Using CSS zUse the following at the top of an XML document: zOr this in the of an HTML document:

Advantages of CSS zMakes HTML easier to write (and read) zYou can define a house style zCompatible: you can still see the content on non-CSS browsers zPages are much smaller zAccessible to sight-impaired z...

By the way... zCheck your logs: more than 95% of people browsing now use a CSS-enabled browser zThe current generation of browsers (IE 5, NS 6, Opera 4) have excellent support for CSS. zYou never need to use the and elements again!

Documents zAs mentioned, HTML was designed for just one sort of document (scientific reports), but is now being used for all sorts of different documents zYou could use SGML to define other sorts of document, but SGML is notoriously hard to fully implement zEnter XML

Enter XML zXML is a W3C effort to simplify SGML zIt is a meta-language: a language for defining languages zIt is a subset of SGML zOne of the aims is to allow everyone to invent their own tags zDTD is optional: a DTD can be inferred from a document

Consequences zThe requirement of being able to infer a DTD from a document has an effect on the languages you can define: yClosing tags are now required yEmpty tags are marked specially (or etc)

Consequences 2 zCDATA sections must be marked as such (only necessary if they contain “<”, “&” etc.): <![CDATA[... script content... ]]>

By the way: is not like Not Like This XML An underlying problem with HTML is that... You could use SGML to define... But Like This XML An underlying problem with HTML is that … You could use SGML to define...

Consequence of XML zAnyone can now design their own (Web- delivered) languages zCSS makes them viewable Steven Pemberton CWI Kruislaan SJ Amsterdam

So do we still need HTML? zWorkshop in May 1998 zXML is still a meta-language zThere is still a perceived need for a base- line mark-up zHTML has some useful semantics, both implied and explicit (search engines gladly use it, for instance)

HTML as XML application zClean up (get rid of historical flotsam) zModularise – split into separate parts yAllows other XML applications to use parts yAllows special purpose devices to use subset zAdd any required new functionality (forms, better event handling, Ruby)

The HTML Working group zInternational membership, around 20 members zMany major players (IBM, Microsoft, Netscape, etc) zMeets weekly by phone, quarterly face-to- face

Group experience zThere was more to be worked out than we anticipated zXHTML is the first major application of XML, so the world’s eyes are on us zXML still needs the wrinkles ironed out

Philosophy of XHTML zTransition from ‘old world’ to XML zClean up the language zReturn to structure only zUse generic XML as much as possible zModularise zAddress wider needs (International, Accessibility) zAdd new functionality

Plan of action zHTML 4.01: corrected version zXHTML 1.0: transitional version of HTML 4.01 in 3 flavours zModularisation: agreement on split and methodology zXHTML Basic: Small devices zXHTML 1.1: clean version of 1.0 strict

(plan of action) zEvents: accessible and device- independent zRuby: needed Asian markup zForms: more control zXHTML 2.0: Putting it all together

Differences HTML:XHTML zBecause of the difference between SGML and XML, there are some necessary differences, for instance: yUse lower case: not yAttributes are always quoted: yAnchors use id attribute not name (and not just on by the way):

Example XHTML 1.0 Virtual Library Moved to vlib.org.

Namespaces zNamespaces have been added to XML to allow you to mix fragments from different languages (e.g. HTML + Maths) zIn the same way that object-oriented languages allow you to identify which function you are using, namespaces allow you to identify which tags you are using.

Example of nesting A Math Example The following is MathML markup: 3 x

Example of colonising <math xmlns=" xmlns:html=" 3 x This is a paragraph

Namespaced attributes zAttributes normally come from the element itself: zBut you may also use ‘global’ attributes from a namespace: Beethoven’s 5th

XML ‘namespace’ zXML also has its own pseudo-namespace for reserved attributes:

Using ‘generic’ XML zPresentation  use CSS zLinks  use Xlink or Schemas zForms  use CSS? zImages etc.  use Xlink or Schemas z(Natural) language of elements  use xml:lang attribute

Xlink? zHTML has several ‘built-in’ hyperlinks:,,,, etc. zSince XML allows you to define your own elements, a browser doesn’t know which are links zXlink was started to solve this problem.

Xlink zXlink started as a method of describing which attributes of an element were a link zIt later changed into a language of links, so it could no longer be used to describe XHTML zThe current plan is now to introduce types into Schemas to describe links

Example of Xlink <crossReference xmlns:xlink=" xlink:type="simple" xlink:href="students.xml" xlink:role="studentlist" xlink:title="Student List" xlink:show="new" xlink:actuate="onRequest"> Current List of Students

Schemas zSchemas are a new technology to replace much of DTDs. zSchemas are expressed in XML zThey have support for data types zMuch easier to parse and implement than DTDs

Schemas: but zThey don’t support the definition of entities (é) zNot easy to read (or write)

Schema fragment more>>>

(schema fragment) more >>>

(schema fragment)

(equivalent DTD) <!ELEMENT table (caption?, (col*|colgroup*), thead?, tfoot?, (tbody+|tr+))>

XHTML 1.0 zXHTML 1.0 is an XML-ised version of HTML 4.01 zJust like HTML 4.01, there are 3 versions: ‘strict’, ‘loose’, and ‘frameset’

Transitional version zXHTML 1.0 has been carefully designed to make use of ‘quirks’ in existing HTML browsers zUse of a small number of guidelines allows XHTML to be served to HTML user agents as well as XML user agents

Examples of Guidelines zUse space before / of empty elements: zDon’t use form zUse name= and id= on : …

Serving XHTML 1.0 zAn XHTML 1.0 document that follows the guidelines can be served up either as HTML, or as XML zBut beware: CSS has slightly different rules for HTML and XML zSimilarly, the DOM has differences for HTML and XML

Modularisation zXHTML has been divided into a number of modules. zA module is a collection of elements and/or attributes that can be used as building blocks to build a DTD.

(modularisation) zA language can be built by using just XHTML modules, or adding your own zWe had originally defined Modularisation just for our own use, but it has turned out useful for other groups as well

XHTML modules zStructure: html, head, title, body zText: abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var zHypertext: a zList: ol, ul, dl, li, dt, dd

(modules) zApplet (deprecated): applet, param zPresentation: b, i, hr, big, small, sub, sup, tt zEdit: del, ins zBi-directional Text: bdo

(modules) zBasic Forms: simple forms zForms: full forms zBasic Tables: simple tables zTables: full tables

(modules) zImage: img zClient-side Image Map: map, + zServer-side Image Map: change to img zObject: object, param zFrames zTarget: attribute zIframe

(modules) zIntrinsic Events: adds events attributes zMetainformation: meta zScripting: script zStylesheet: style zStyle Attribute zLink: link

(modules) zBase: base zName Identification: name attribute zLegacy: basefont, center, font, s, strike, u, plus loads of attributes (eg align) zRuby: Asian markup

Note on modules zNote that some modules consist of a single element, or just add some attributes to existing elements zNot all modules are independent: if you use some modules, they bring other modules with them, or change other modules zFuture modules are planned (eg extended forms, events)

The XHTML family zTo still be called an XHTML language you must use Structure, Hypertext, Basic Text, and List modules (you may define your own Structure module)

Example integration languages zSMIL is planning a module to integrate SMIL and HTML zLikewise for MathML

Creating a DTD zIt is not expected that creating XHTML- based languages will be a daily activity zNot the place to describe the method here: it depends on understanding DTDs. zThe Modularisation document has extensive examples zFuture versions will also use Schemas (we hope…)

XHTML Basic zXHTML Basic is the first XHTML family- member to be defined using Modularisation zIt is designed for small devices, typically mobile telephones

XHTML Basic Modules zStructure Module* ybody, head, html, title zText Module* yabbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var

(XHTML Basic Modules) zHypertext Module* ya zList Module* ydl, dt, dd, ol, ul, li zBasic Forms Module yform, input, label, select, option, textarea

(XHTML Basic Modules) zBasic Tables Module ycaption, table, td, th, tr zImage Module yimg zObject Module yobject, param

(XHTML Basic Modules) zMetainformation Module ymeta zLink Module ylink zBase Module ybase

XHTML Basic usage <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" " basic/xhtml-basic10.dtd">

XHTML 1.1 zXHTML 1.1 is the second family member to be defined using Modularisation zIts main aim is to present a cleaned-up, non-transitional version of XHTML 1.0 strict (no frames) zIt also adds Ruby markup zOtherwise: no new functionality

XHTML 1.1 Modules zStructure, Text, Hypertext, List, Object, Presentation, Edit, Bidirectional Text, Forms, Tables, Image, Client-side Image Map, Server-side Image Map, Intrinsic Events, Metainformation, Scripting, Stylesheet Module, Style Attribute (Deprecated ), Link, Base, Ruby.

Example XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " Virtual Library Moved to vlib.org.

Ruby

Example Ruby markup WWW ( World Wide Web ) z(Use CSS to describe presentation)

XHTML 2.0 zXHTML 2.0 is still in preparation zNew forms zNew events zMore accessibility

Forms zBeing produced by a separate group zConsists of three parts: ydata model yinstances yuser interface zWill allow you to ysave and restore forms ydownload multi-page forms

(Forms) zWill include much more client-side checking zForm data will be sent to the server as XML zSeparates content from presentation (e.g. a radio button and a select box both allow you to select one from many, and you may want to use different choices on different devices)

Events zCurrent events are almost all in terms of mouse: onclick, onmouseover, onfocus, etc. zFuture event model will be device independent, and allow you to define your own new events zUses the DOM event model

The DOM zDomain Object Model: how you access a document via scripting zCurrently only an XML DOM zAn XHTML DOM is being investigated

Accessibility and Internationalisation zW3C has an accessibility group that checks that new recommendations address people with accessibility needs zThere is also an internationalisation group that does the same for cultural issues (which produced )

Accessibility problems zA sighted person can work out the structure from the visual presentation zA non-sighted person cannot: the structure must be present in the markup zThat is why new features were added to forms and tables in HTML 4, like

Structure zText would also benefit from such a treatment: not h1, h2 etc (which are subject to misuse) but nested sections with their own headings

Example of structure XHTML … Structure …

CSS can still handle it section h { how an h1 should look } section section h { h2 } section section section h { h3 } etc.

Conclusions zXML with related technologies gives you the freedom to define and deliver your own document types zHTML is still needed as a base-line markup zThe new HTML gives a transition path to the future

The State of Things zNew generation of XML+CSS browsers emerging zMany XML applications appearing zMajor companies planning XML as output (Adobe PDF, MS Office 2000) zNow: HTML4, XHTML 1.0, Modularisation, Basic, 1.1

To Find Out More zAll XHTML developments are made public at zMembers of W3C can also look at