XHTML

Steven Pemberton

CWI, Amsterdam

Chair, W3C HTML Working Group

Overview

HTML 1

HTML as an SGML Application

Example of a DTD fragment

<!ELEMENT table
     (caption?, (col*|colgroup*), thead?,
      tfoot?, (tbody+|tr+))>
<!ELEMENT caption  %Inline;>
<!ELEMENT thead    (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">
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % Length "CDATA" -- nn for pixels or nn% for percentage length -->

Problems with SGML

Changes to HTML

Separating content and presentation

For the author

For the webmaster

For the reader

For the implementor

Changes to HTML (2)

The problems with frames

What frames can do

Style languages

CSS

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

Advantages of CSS

By the way...

Documents

Enter XML

Consequences

Consequences 2

By the way:
<P> is not like <BR>

Not like this:

    <H1>XML</H1>

    An underlying problem with HTML is that ...
    <P>
    You could use SGML to define ...

But like this:

    <H1>XML</H1>
    <P>
    An underlying problem with HTML is that ... </P>
    <P>
    You could use SGML to define ...</P>

Consequence of XML

So do we still need HTML?

HTML as XML application

The HTML Working group

Group experience

Philosophy of XHTML

Plan of action

(plan of action)

Differences HTML:XHTML

Example XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head><title>Virtual Library</title></head>
  <body>
    <p>Moved to <a href="http://vlib.org/">vlib.org</a>. </p>
  </body>
</html>

Namespaces

Example of nesting

<html xmlns="http://www.w3.org/1999/xhtml">
  <head><title>A Math Example</title></head>
  <body>
    <p>The following is MathML markup:</p>
    <math xmlns="http://www.w3.org/TR/REC-MathML">
      <apply><log/><logbase><cn> 3 </cn> </logbase>
                  <ci> x </ci>
      </apply>
    </math>
  </body>
</html>

Example of colonising

<math xmlns="http://www.w3.org/TR/REC-MathML" 
           xmlns:html="http://www.w3.org/1999/xhtml">
      <apply><log/><logbase><cn> 3 </cn> </logbase>
                  <ci> x </ci>
      </apply>
      <html:p>This is a paragraph</html:p>
 </math>

Namespaced attributes

XML 'namespace'

Using 'generic' XML

Xlink?

Xlink

Example of Xlink

<crossReference
  xmlns:xlink="http://www.w3.org/1999/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
</crossReference>

Schemas

Schemas: but

Schema fragment

<elementType name='table'>
   <refines>
      <archetypeRef name='common'/>
      <archetypeRef name='simpleBlockDisplay'/>
   </refines>

more>>>

(schema fragment)

<sequence>
   <elementTypeRef name='caption' minOccur='0' maxOccur='1'/>
   <choice>
           <elementTypeRef name='col' minOccur='0' maxOccur='*'/>
       <elementTypeRef name='colgroup' minOccur='0' maxOccur='*'/>
   </choice>

more >>>

(schema fragment)

<choice>
    <sequence>
       <elementTypeRef name='thead' minOccur='0' maxOccur='1'/>
       <elementTypeRef name='tfoot' minOccur='0' maxOccur='1'/>
       <elementTypeRef name='tbody' minOccur='1' maxOccur='*'/>
    </sequence>
    <elementTypeRef name='tr' minOccur='1' maxOccur='*'/>
 </choice>
</sequence>
</elementType>

(equivalent DTD)

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

XHTML 1.0

Transitional version

Examples of Guidelines

Serving XHTML 1.0

Modularisation

XHTML modules

(modules)

(modules)

(modules)

(modules)

(modules)

Note on modules

The XHTML family

Example integration languages

Creating a DTD

XHTML Basic

XHTML Basic Modules

XHTML Basic usage

<!DOCTYPE html PUBLIC 
   "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

XHTML 1.1

XHTML 1.1 Modules

Example XHTML 1.1

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  <head> <title>Virtual Library</title> </head>
  <body>
    <p>Moved to <a href="http://vlib.org/">vlib.org</a>.</p>
  </body>
</html>

Ruby

Example Ruby markup

<ruby>
  <rb>WWW</rb>
  <rp>(</rp><rt>World Wide Web</rt><rp>)</rp>
</ruby>

Use CSS to describe presentation

XHTML 2.0

Forms

Events

The DOM

Accessibility and Internationalisation

Accessibility problems

Structure

Example of structure

<section>
    <h>XHTML</h>
    ...
    <section>
            <h>Structure</h>
            ...
    </section>
</section>

CSS can still handle it

section h { how an h1 should look }
section section h { h2 }
section section section h { h3 }

etc.

Conclusions

The State of Things

To Find Out More