HTML 5 vs. XHTML 2: The Future of Web Standards Chris Poteet www.siolon.com

Background Deficiencies set forth from HTML 4 and XHTML 1 Need less presentational elements Need more semantic elements Further separate presentation from structure Allow richer serialization More robust media controls The two standards that are “competing” for attention are XHTML 2.0 and HTML 5

Deficiencies set forth from HTML 4 and XHTML 1

Need less presentational elements

Need more semantic elements

Further separate presentation from structure

Allow richer serialization

More robust media controls

The two standards that are “competing” for attention are XHTML 2.0 and HTML 5

History of XHTML 2 W3C started the process in 2001 after XHTML 1.1 was published. First draft published in 2002 Safari opted out of participating

W3C started the process in 2001 after XHTML 1.1 was published.

First draft published in 2002

Safari opted out of participating

History of HTML 5 Started by the Web Hypertext Application Technology Working Group (WHATWG) There was frustration about the direction of XMTML 2.0, and the group itself April 2007, the W3C adopted the group’s specification for review Has better browser support

Started by the Web Hypertext Application Technology Working Group (WHATWG)

There was frustration about the direction of XMTML 2.0, and the group itself

April 2007, the W3C adopted the group’s specification for review

Has better browser support

XHTML 2 Emphasis XHTML 2.0, unlike previous incarnations, is based solely on XML No more SGML heritage Greater emphasis on XML technologies such as XForms, XML Events, etc. Even more of an emphasis of separating presentation and structure Better internationalization

XHTML 2.0, unlike previous incarnations, is based solely on XML

No more SGML heritage

Greater emphasis on XML technologies such as XForms, XML Events, etc.

Even more of an emphasis of separating presentation and structure

Better internationalization

HTML 5 Emphasis Focus more on transitional technology than revolutionary Address deficiencies in HTML 4 More open working group Maintain a SGML syntax Can choose whether to serialize as HTML or XML

Focus more on transitional technology than revolutionary

Address deficiencies in HTML 4

More open working group

Maintain a SGML syntax

Can choose whether to serialize as HTML or XML

New Elements in HTML 5 Layout <nav> <footer> <header> <section> <aside> Media <video> <audio> <source> <figure> <m> <canvas> Forms Support for different content types (dates, email, etc)

Layout

<nav>

<footer>

<header>

<section>

<aside>

Media

<video>

<audio>

<source>

<figure>

<m>

<canvas>

Forms

Support for different content types (dates, email, etc)

Also New in HTML 5 Attributes Reserved class names (copyright, error, note, etc) Audio/Video API for playback Persistent data storage on client-side Offline web application API Browser history API

Attributes

Reserved class names (copyright, error, note, etc)

Audio/Video API for playback

Persistent data storage on client-side

Offline web application API

Browser history API

Sample Layout in HTML 5

New Elements in XHTML 2 <l> (line break, replaces <br>) The HREF attribute can appear on any element <li href=“home.html”>Home</li> <a> still supported Any element can be an image (<img> dropped) <h2 src=“logo.png”></h2> <h> replaces <h1> … <h6> <section> Nest <h> inside of <section> <blockcode> <di> (group of related terms in <dl>) <handler> (for event handling) <separator> (replaces <hr>)

<l> (line break, replaces <br>)

The HREF attribute can appear on any element

<li href=“home.html”>Home</li>

<a> still supported

Any element can be an image (<img> dropped)

<h2 src=“logo.png”></h2>

<h> replaces <h1> … <h6>

<section>

Nest <h> inside of <section>

<blockcode>

<di> (group of related terms in <dl>)

<handler> (for event handling)

<separator> (replaces <hr>)

Elements Removed <basefont> <big> <font> <s> <strike> <tt> XHTML 2 Also Removes: <small> <b> <i> <hr> <iframe>

<basefont>

<big>

<font>

<s>

<strike>

<tt>

XHTML 2 Also Removes:

<small>

<b>

<i>

<hr>

<iframe>

Which One? HTML 5 has better support amongst upcoming browsers (IE8, FF 3, Saf 3) Although 95% of all browsers are XML based XHTML continues to push us towards the future of the web—XML HTML 5 allows for less strict markup (unlike XML) HTML 5 introduces great layout elements XHTML 2 has greater focus on separating presentation and structure Both standards offer solutions to different developers

HTML 5 has better support amongst upcoming browsers (IE8, FF 3, Saf 3)

Although 95% of all browsers are XML based

XHTML continues to push us towards the future of the web—XML

HTML 5 allows for less strict markup (unlike XML)

HTML 5 introduces great layout elements

XHTML 2 has greater focus on separating presentation and structure

Both standards offer solutions to different developers

Further Reading Comparisons http://immike.net/blog/2008/02/06/xhtml-2-vs-html-5/ http://www.alistapart.com/articles/previewofhtml5 http://xhtml.com/en/future/x-html-5-versus-xhtml-2/ http://www.digital-web.com/articles/html5_xhtml2_and_the_future_of_the_web/ Specifications XHTML 2 http://www.w3.org/TR/xhtml2/ HTML 5 http://www.w3.org/html/wg/html5/ http://www.whatwg.org/specs/web-apps/current-work/

Comparisons

http://immike.net/blog/2008/02/06/xhtml-2-vs-html-5/

http://www.alistapart.com/articles/previewofhtml5

http://xhtml.com/en/future/x-html-5-versus-xhtml-2/

http://www.digital-web.com/articles/html5_xhtml2_and_the_future_of_the_web/

Specifications

XHTML 2

http://www.w3.org/TR/xhtml2/

HTML 5

http://www.w3.org/html/wg/html5/

http://www.whatwg.org/specs/web-apps/current-work/

Contact Information [email_address] www.siolon.com

[email_address]

www.siolon.com