XHTML

1
XHTML

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

2
Overview

• History
• Philosophy
• XML and related technologies
• XHTML 1.0
• Modularisation
• XHTML Basic
• XHTML 1.1
• The Future

3
HTML 1

• The original HTML was designed in the early
  1990s for scientific reports
• Each document was a single resource (not even
  ltIMGgt)
• (This explains much about HTTP by the way)

4
(HTML 1)

• It is amazing how much we have been able to do
  with a language with such beginnings
• It was described using SGML

5
HTML as an SGML Application

• SGML an international standard in 1986
• It is a Meta-language that describes data
  formats, using DTDs (Document Type Definitions)
• Describes structure, not presentationltH1gtHTML as
  SGML Applicationlt/H1gt

6
Example of a DTD fragment

• lt!ELEMENT table
• (caption?, (colcolgroup), thead?,
• tfoot?, (tbodytr))gt
• lt!ELEMENT caption Inlinegt
• lt!ELEMENT thead (tr)gt
• ...

7
Attributes

• lt!ATTLIST TABLE
• attrs -- coreattrs, i18n, events
  --
• summary Text IMPLIED
• width Length IMPLIED
• border Pixels IMPLIED
• gt

8
Entities

• lt!ENTITY fontstyle
• "TT I B BIG SMALL"gt
• lt!ENTITY inline "PCDATA fontstyle
  phrase special formctrl"gt
• lt!ENTITY Length "CDATA" -- nn for pixels or nn
  for percentage length --gt

9
Problems with SGML

• Arcane syntax
• Very difficult to implement fully
• No support for types

10
Changes to HTML

• Netscape and Microsoft start adding to HTML
  mostly presentation-oriented tags (like ltBLINKgt,
  ltCENTERgt), and frames
• The World Wide Web Consortium (W3C) started
  effort to
• Keep HTML Pure
• Do presentation via Style Sheets

11
Separating content and presentation

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

12
For the author

• 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

13
For the webmaster

• Separation of concerns
• Simpler HTML, less training
• Cheaper to produce, easier to manage
• Easy to change house style
• Reach more people
• Search engines find your stuff easier
• Visible on more devices

14
For the reader

• Faster download (one of the top 4 reasons for
  liking a site)
• Easier to find information
• You can actually read the information if you are
  sight-impaired
• Information more accessible
• You can use more devices

15
For the implementor

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

16
Changes to HTML (2)

• Another change that Netscape made, with
  insufficient thought was Frames
• Frames create significant problems with web pages

17
The problems with frames

• Cant bookmark framesets
• Back does odd things
• Page up and page down work oddly
• Reload often doesnt work right
• Security is compromised
• Nested frames are hard to deal with (how do you
  get out?)

18
What frames can do

• Search and show interfaces
• Keeping script variables in a hidden frame

19
Style languages

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

20
CSS

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

21
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

22
Using CSS

• Use the following at the top of an XML document
• lt?xml-stylesheet type'text/css'
  hrefmystyle.css'?gt
• Or this in the ltheadgt of an HTML document
• ltlink rel"stylesheet" type"text/css"
  hrefmystyle.css" /gt

23
Advantages of CSS

• Makes HTML easier to write (and read)
• You can define a house style
• Compatible you can still see the content on
  non-CSS browsers
• Pages are much smaller
• Accessible to sight-impaired
• ...

24
By the way...

• Check your logs more than 95 of people browsing
  now use a CSS-enabled browser
• The current generation of browsers (IE 5, NS 6,
  Opera 4) have excellent support for CSS.
• You never need to use the ltFONTgt and ltFONTFACEgt
  elements again!

25
Documents

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

26
Enter XML

• XML is a W3C effort to simplify SGML
• It is a meta-language a language for defining
  languages
• It is a subset of SGML
• One of the aims is to allow everyone to invent
  their own tags
• DTD is optional a DTD can be inferred from a
  document

27
Consequences

• The requirement of being able to infer a DTD from
  a document has an effect on the languages you can
  define
• Closing tags are now requiredltLIgt....lt/LIgt
  ltPgt....lt/Pgt
• Empty tags are marked specially ltIMG
  SRCpic.gif/gt ltBR/gt ltHR/gt (or ltHRgtlt/HRgt etc)

28
Consequences 2

• CDATA sections must be marked as such (only
  necessary if they contain lt, etc.)
• ltSCRIPTgt
• lt!CDATA
• ... script content ...
• gt
• lt/SCRIPTgt

29
By the way ltPgt is not like ltBRgt

• Not Like This
• ltH1gtXMLlt/H1gt
• An underlying problem with HTML is that ...
• ltPgt
• You could use SGML to define ...

• But Like This
• ltH1gtXMLlt/H1gt
• ltPgt
• An underlying problem with HTML is that lt/Pgt
• ltPgt
• You could use SGML to define ...lt/Pgt

30
Consequence of XML

• Anyone can now design their own (Web-delivered)
  languages
• CSS makes them viewable
• ltaddressgt
• ltnamegtSteven Pembertonlt/namegt
• ltcompanygtCWIlt/companygt
• ltstreetgtKruislaan 413lt/streetgt
• ltpostcodegt1098 SJlt/postcodegt
• ltcitygtAmsterdamlt/citygt
• ltspeaker/gt
• lt/addressgt

31
So do we still need HTML?

• Workshop in May 1998
• XML is still a meta-language
• There is still a perceived need for a base-line
  mark-up
• HTML has some useful semantics, both implied and
  explicit (search engines gladly use it, for
  instance)

32
HTML as XML application

• Clean up (get rid of historical flotsam)
• Modularise split into separate parts
• Allows other XML applications to use parts
• Allows special purpose devices to use subset
• Add any required new functionality (forms, better
  event handling, Ruby)

33
The HTML Working group

• International membership, around 20 members
• Many major players (IBM, Microsoft, Netscape,
  etc)
• Meets weekly by phone, quarterly face-to-face

34
Group experience

• There was more to be worked out than we
  anticipated
• XHTML is the first major application of XML, so
  the worlds eyes are on us
• XML still needs the wrinkles ironed out

35
Philosophy of XHTML

• Transition from old world to XML
• Clean up the language
• Return to structure only
• Use generic XML as much as possible
• Modularise
• Address wider needs (International,
  Accessibility)
• Add new functionality

36
Plan of action

• HTML 4.01 corrected version
• XHTML 1.0 transitional version of HTML 4.01 in 3
  flavours
• Modularisation agreement on split and
  methodology
• XHTML Basic Small devices
• XHTML 1.1 clean version of 1.0 strict

37
(plan of action)

• Events accessible and device-independent
• Ruby needed Asian markup
• Forms more control
• XHTML 2.0 Putting it all together

38
Differences HTMLXHTML

• Because of the difference between SGML and XML,
  there are some necessary differences, for
  instance
• Use lower case ltpgt not ltPgt
• Attributes are always quoted ltth colspan2gt
• Anchors use id attribute not name (and not just
  on ltagt by the way) lta idindexgt ltp idtopgt

39
Example XHTML 1.0

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/stric
  t.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml
  xmllang"en"gt
• ltheadgtlttitlegtVirtual Librarylt/titlegtlt/headgt
• ltbodygt
• ltpgtMoved to lta href"http//vlib.org/"gtvlib.or
  glt/agt. lt/pgt
• lt/bodygt
• lt/htmlgt

40
Namespaces

• Namespaces have been added to XML to allow you to
  mix fragments from different languages (e.g. HTML
  Maths)
• In 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.

41
Example of nesting

• lthtml xmlns"http//www.w3.org/1999/xhtml"gt
• ltheadgtlttitlegtA Math Examplelt/titlegtlt/headgt
• ltbodygt
• ltpgtThe following is MathML markuplt/pgt
• ltmath xmlns"http//www.w3.org/TR/REC-MathML"gt
  
• ltapplygtltlog/gtltlogbasegtltcngt 3 lt/cngt
  lt/logbasegt
• ltcigt x lt/cigt
• lt/applygt
• lt/mathgt
• lt/bodygt
• lt/htmlgt

42
Example of colonising

• ltmath xmlns"http//www.w3.org/TR/REC-MathML"
• xmlnshtml"http//www.w3.org/1999/xhtm
  l"gt
• ltapplygtltlog/gtltlogbasegtltcngt 3 lt/cngt
  lt/logbasegt
• ltcigt x lt/cigt
• lt/applygt
• lthtmlpgtThis is a paragraphlt/htmlpgt
• lt/mathgt

43
Namespaced attributes

• Attributes normally come from the element itself
• lthtmla href"next.xml"gt
• But you may also use global attributes from a
  namespace
• ltpointer htmlhref"x.xml"gt
• ltmusic style"classical" htmlstyle"color
  red"gtBeethovens 5thlt/musicgt

44
XML namespace

• XML also has its own pseudo-namespace for
  reserved attributes
• ltpara xmllang"en"gt

45
Using generic XML

• Presentation ? use CSS
• Links ? use Xlink or Schemas
• Forms ? use CSS?
• Images etc. ? use Xlink or Schemas
• (Natural) language of elements ? use xmllang
  attribute

46
Xlink?

• HTML has several built-in hyperlinks ltagt,
  ltimggt, ltobjectgt, ltlinkgt, etc.
• Since XML allows you to define your own elements,
  a browser doesnt know which are links
• Xlink was started to solve this problem.

47
Xlink

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

48
Example of Xlink

• ltcrossReference
• xmlnsxlink"http//www.w3.org/1999/xlink"
• xlinktype"simple"
• xlinkhref"students.xml"
• xlinkrole"studentlist"
• xlinktitle"Student List"
• xlinkshow"new"
• xlinkactuate"onRequest"gt
• Current List of Students
• lt/crossReferencegt

49
Schemas

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

50
Schemas but

• They dont support the definition of entities
  (eacute)
• Not easy to read (or write)

51
Schema fragment

• ltelementType name'table'gt
• ltrefinesgt
• ltarchetypeRef name'common'/gt
• ltarchetypeRef name'simpleBlockDisplay'/gt
• lt/refinesgt
• moregtgtgt

52
(schema fragment)

• ltsequencegt
• ltelementTypeRef name'caption' minOccur'0'
  maxOccur'1'/gt
• ltchoicegt
• ltelementTypeRef name'col' minOccur'0'
  maxOccur''/gt
• ltelementTypeRef name'colgroup'
  minOccur'0' maxOccur''/gt
• lt/choicegt
• more gtgtgt

53
(schema fragment)

• ltchoicegt
• ltsequencegt
• ltelementTypeRef name'thead' minOccur'0'
  maxOccur'1'/gt
• ltelementTypeRef name'tfoot' minOccur'0'
  maxOccur'1'/gt
• ltelementTypeRef name'tbody' minOccur'1'
  maxOccur''/gt
• lt/sequencegt
• ltelementTypeRef name'tr' minOccur'1'
  maxOccur''/gt
• lt/choicegt
• lt/sequencegt
• lt/elementTypegt

54
(equivalent DTD)

• lt!ELEMENT table
• (caption?, (colcolgroup), thead?,
• tfoot?, (tbodytr))gt

55
XHTML 1.0

• XHTML 1.0 is an XML-ised version of HTML 4.01
• Just like HTML 4.01, there are 3 versions
  strict, loose, and frameset

56
Transitional version

• XHTML 1.0 has been carefully designed to make use
  of quirks in existing HTML browsers
• Use of a small number of guidelines allows XHTML
  to be served to HTML user agents as well as XML
  user agents

57
Examples of Guidelines

• Use space before / of empty elements
• ltbr /gt lthr /gt ltimg srcfoo.gif /gt
• Dont use lthrgtlt/hrgt form
• Use name and id on ltagt
• lta name index id indexgt lt/agt

58
Serving XHTML 1.0

• An XHTML 1.0 document that follows the guidelines
  can be served up either as HTML, or as XML
• But beware CSS has slightly different rules for
  HTML and XML
• Similarly, the DOM has differences for HTML and
  XML

59
Modularisation

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

60
(modularisation)

• A language can be built by using just XHTML
  modules, or adding your own
• We had originally defined Modularisation just for
  our own use, but it has turned out useful for
  other groups as well

61
XHTML modules

• Structure html, head, title, body
• Text abbr, acronym, address, blockquote, br,
  cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6,
  kbd, p, pre, q, samp, span, strong, var
• Hypertext a
• List ol, ul, dl, li, dt, dd

62
(modules)

• Applet (deprecated) applet, param
• Presentation b, i, hr, big, small, sub, sup, tt
• Edit del, ins
• Bi-directional Text bdo

63
(modules)

• Basic Forms simple forms
• Forms full forms
• Basic Tables simple tables
• Tables full tables

64
(modules)

• Image img
• Client-side Image Map map,
• Server-side Image Map change to img
• Object object, param
• Frames
• Target attribute
• Iframe

65
(modules)

• Intrinsic Events adds events attributes
• Metainformation meta
• Scripting script
• Stylesheet style
• Style Attribute
• Link link

66
(modules)

• Base base
• Name Identification name attribute
• Legacy basefont, center, font, s, strike, u,
  plus loads of attributes (eg align)
• Ruby Asian markup

67
Note on modules

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

68
The XHTML family

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

69
Example integration languages

• SMIL is planning a module to integrate SMIL and
  HTML
• Likewise for MathML

70
Creating a DTD

• It is not expected that creating XHTML-based
  languages will be a daily activity
• Not the place to describe the method here it
  depends on understanding DTDs.
• The Modularisation document has extensive
  examples
• Future versions will also use Schemas (we hope)

71
XHTML Basic

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

72
XHTML Basic Modules

• Structure Module
• body, head, html, title
• Text Module
• abbr, acronym, address, blockquote, br, cite,
  code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd,
  p, pre, q, samp, span, strong, var

73
(XHTML Basic Modules)

• Hypertext Module
• a
• List Module
• dl, dt, dd, ol, ul, li
• Basic Forms Module
• form, input, label, select, option, textarea

74
(XHTML Basic Modules)

• Basic Tables Module
• caption, table, td, th, tr
• Image Module
• img
• Object Module
• object, param

75
(XHTML Basic Modules)

• Metainformation Module
• meta
• Link Module
• link
• Base Module
• base

76
XHTML Basic usage

• lt!DOCTYPE html PUBLIC
• "-//W3C//DTD XHTML Basic 1.0//EN"
  "http//www.w3.org/TR/xhtml-basic/xhtml-basic10.dt
  d"gt

77
XHTML 1.1

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

78
XHTML 1.1 Modules

• Structure, 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.

79
Example XHTML 1.1

• lt?xml version"1.0" encoding"UTF-8"?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
• "http//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
  gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  xmllang"en" gt
• ltheadgt lttitlegtVirtual Librarylt/titlegt lt/headgt
• ltbodygt
• ltpgtMoved to lta href"http//vlib.org/"gtvlib.or
  glt/agt.lt/pgt
• lt/bodygt
• lt/htmlgt

80
Ruby
81
Example Ruby markup

• ltrubygt
• ltrbgtWWWlt/rbgt
• ltrpgt(lt/rpgtltrtgtWorld Wide Weblt/rtgtltrpgt)lt/rpgt
• lt/rubygt
• (Use CSS to describe presentation)

82
XHTML 2.0

• XHTML 2.0 is still in preparation
• New forms
• New events
• More accessibility

83
Forms

• Being produced by a separate group
• Consists of three parts
• data model
• instances
• user interface
• Will allow you to
• save and restore forms
• download multi-page forms

84
(Forms)

• Will include much more client-side checking
• Form data will be sent to the server as XML
• Separates 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)

85
Events

• Current events are almost all in terms of mouse
  onclick, onmouseover, onfocus, etc.
• Future event model will be device independent,
  and allow you to define your own new events
• Uses the DOM event model

86
The DOM

• Domain Object Model how you access a document
  via scripting
• Currently only an XML DOM
• An XHTML DOM is being investigated

87
Accessibility and Internationalisation

• W3C has an accessibility group that checks that
  new recommendations address people with
  accessibility needs
• There is also an internationalisation group that
  does the same for cultural issues (which produced
  ltrubygt)

88
Accessibility problems

• A sighted person can work out the structure from
  the visual presentation
• A non-sighted person cannot the structure must
  be present in the markup
• That is why new features were added to forms and
  tables in HTML 4, like ltcaptiongt

89
Structure

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

90
Example of structure

• ltsectiongt
• lthgtXHTMLlt/hgt
• ltsectiongt
• lthgtStructurelt/hgt
• lt/sectiongt
• lt/sectiongt

91
CSS can still handle it

• section h how an h1 should look
• section section h h2
• section section section h h3
• etc.

92
Conclusions

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

93
The State of Things

• New generation of XMLCSS browsers emerging
• Many XML applications appearing
• Major companies planning XML as output(Adobe
  PDF, MS Office 2000)
• Now HTML4, XHTML 1.0, Modularisation, Basic, 1.1

94
To Find Out More

• All XHTML developments are made public at
  www.w3.org/Markup
• Members of W3C can also look at
  www.w3.org/Markup/Group

95
(No Transcript)