html5-is-html-and-xml.html 23.8 KB

Raw Blame History Permalink

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="all">
    @import "/QA/2006/01/blogstyle.css";
    </style>
    <meta name="keywords" content='html, html5, specification, xml' />
    <meta name="description" content="It seems not very clear for many people. So let's set the record straight. HTML 5 can be written in html and XML." />
    <meta name="revision" content="$Id: html5-is-html-and-xml.html,v 1.58 2011/12/16 03:02:39 gerald Exp $" />
   <link rel="alternate" type="application/atom+xml" title="Atom" href="http://www.w3.org/QA/atom.xml" />
   <link rel="alternate" type="application/rss+xml" title="RSS 1.0" href="http://www.w3.org/QA/news.rss" />
   <title>HTML 5, one vocabulary, two serializations - W3C Blog</title>

   <link rel="start" href="http://www.w3.org/QA/" title="Home" />
   <link rel="prev" href="http://www.w3.org/QA/2008/01/mase-update.html" title="W3C Mail Search Engine gets an update" />
   <link rel="next" href="http://www.w3.org/QA/2008/01/are_you_mobileok.html" title="Are You MobileOk?" />

   <!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"
         xmlns:dc="http://purl.org/dc/elements/1.1/">
<rdf:Description
    rdf:about="http://www.w3.org/QA/2008/01/html5-is-html-and-xml.html"
    trackback:ping="http://www.w3.org/QA/sununga/mt-tb.cgi/127"
    dc:title="HTML 5, one vocabulary, two serializations"
    dc:identifier="http://www.w3.org/QA/2008/01/html5-is-html-and-xml.html"
    dc:subject="HTML"
    dc:description="It seems not very clear for many people. So let&apos;s set the record straight. HTML 5 can be written in html &lt;strong&gt;and XML&lt;/strong&gt;."
    dc:creator="Karl Dubost"
    dc:date="2008-01-15T21:03:28+00:00" />
</rdf:RDF>
-->

    <!-- <script type="text/javascript" src="http://www.w3.org/QA/mt.js"></script>-->

</head>
<body class="layout-one-column">
      <div id="banner">
      <h1 id="title">
	<a href="http://www.w3.org/"><img height="48" alt="W3C" id="logo" src="http://www.w3.org/Icons/WWW/w3c_home_nb" /></a>
W3C Blog
</h1>
    </div>

    <ul class="navbar" id="menu">
        <li><strong><a href="/QA/" title="W3C Blog Home">[ W3C Blog ]</a></strong></li>
        <li><a href="/QA/Library/" title="Documents and Publications on Web and Quality">Documents</a></li>
        <li><a href="/QA/Tools/" accesskey="3" title="Validators and other Tools">Tools</a></li>
        <li><a href="/2007/12/qa-blog-help/index#feedback">Feedback</a></li>
    </ul>
<div id="searchbox">
<form method="get" action="http://www.google.com/custom" enctype="application/x-www-form-urlencoded">
<p id="formbox"><input type="text" size="15" class="textfield" name="q" accesskey="E" maxlength="255" /> <input type="submit" class="submitfield" value="Search" id="goButton" name="sa" accesskey="G" /> <input type="hidden" name="cof" value="T:black;LW:72;ALC:#ff3300;L:http://www.w3.org/Icons/w3c_home;LC:#000099;LH:48;BGC:white;AH:left;VLC:#660066;GL:0;AWFID:0b9847e42caf283e;" /><input type="hidden" id="searchW3C" name="sitesearch" checked="checked" value="www.w3.org/QA" /><input type="hidden" name="domains" value="www.w3.org/QA" /></p>
</form>
</div>


    <div id="main"><!-- This DIV encapsulates everything in this page - necessary for the positioning -->

                     <p class="content-nav">
                        <a href="http://www.w3.org/QA/2008/01/mase-update.html">&laquo; W3C Mail Search Engine gets an update</a> |
                        <a href="http://www.w3.org/QA/">Main</a>
                        | <a href="http://www.w3.org/QA/2008/01/are_you_mobileok.html">Are You MobileOk? &raquo;</a>
                     </p>

                        <h2 class="entry-header">HTML 5, one vocabulary, two serializations</h2>
                           <div class="entry-body">
                              <p>It seems not very clear for many people. So let's set the record straight. HTML 5 can be written in html <strong>and XML</strong>.</p>

<p>HTML 5 specification is the description of a vocabulary that you can write in two different syntaxes (html and XML) depending on your developer needs, markets and applications. The precedent versions of the HTML vocabulary (HTML+, HTML 2.0, HTML 3.2) were written using SGML syntax rules. HTML 4 had already two syntaxes: SGML (called HTML 4.01) and XML (called XHTML 1.0). </p>

<p>HTML 5 is being written in two syntaxes: html and XML. Because SGML has never been deployed in browsers and many html authoring tools, HTML 5 defines a new serialization called html, which looks a lot like the previous known SGML.</p>

<p><img src="/QA/2008/01/html5-serializations.png" width="573" height="357" alt="Html5 Serializations"/></p>

<p>kudos to <a href="http://james.html5.org/">James Graham</a> for the <a href="http://lists.w3.org/Archives/Public/public-html/2008Jan/0124">graphics idea</a>.</p>

                           </div>
                           <div id="more" class="entry-more">


                           </div>
                       <p class="postinfo">Filed by <a href="http://www.w3.org/People/karl/">Karl Dubost</a> on January 15, 2008  9:03 PM in <a href="http://www.w3.org/QA/archive/technology/html/">HTML</a>, <a href="http://www.w3.org/QA/archive/w3cqa_news/technology_101/">Technology 101</a>, <a href="http://www.w3.org/QA/archive/web_spotting/tutorials/">Tutorials</a>, <a href="http://www.w3.org/QA/archive/technology/xml/">XML</a><br />
<span class="separator">|</span> <a class="permalink" href="http://www.w3.org/QA/2008/01/html5-is-html-and-xml.html">Permalink</a>
                                 | <a href="http://www.w3.org/QA/2008/01/html5-is-html-and-xml.html#comments">Comments (17)</a>
                                 | <a href="http://www.w3.org/QA/2008/01/html5-is-html-and-xml.html#trackback">TrackBacks (0)</a>
</p>


<h3 class="comments-header" id="comments">Comments</h3>
<div class="comment" id="comment-102409">
<p class="comment-meta" id="c102409">
<span class="comment-meta-author"><strong>Daniel Aleksandersen </strong></span>
<span class="comment-meta-date"><a href="#c102409">#</a> 2008-01-15</span>
</p>
<div class="comment-bulk">
<p>I usually do not like that kind of visualisation. But that graphic really did convey the message elegantly and efficiently! Kudos for good presentation.</p>

</div>
</div>


<div class="comment" id="comment-102605">
<p class="comment-meta" id="c102605">
<span class="comment-meta-author"><strong>Simon Reinhardt </strong></span>
<span class="comment-meta-date"><a href="#c102605">#</a> 2008-01-16</span>
</p>
<div class="comment-bulk">
<p>I think the confusion arises when you add XHTML 2.0 to the mix. And what would the picture look like if you added HTML+, HTML 2.0, HTML 3.2, HTML 4, HTML 4.01, XHTML 1.0, XHTML 2.0 and what not? Very confusing.</p>

</div>
</div>


<div class="comment" id="comment-102964">
<p class="comment-meta" id="c102964">
<span class="comment-meta-author"><strong>jgraham </strong></span>
<span class="comment-meta-date"><a href="#c102964">#</a> 2008-01-16</span>
</p>
<div class="comment-bulk">
<p>Oooohh prettiness :)</p>

<p>For strict accuracy, the arrows on each parser/serializer branch should probably go in both directions, but I'm not sure it matters much.</p>

</div>
</div>


<div class="comment" id="comment-102979">
<p class="comment-meta" id="c102979">
<span class="comment-meta-author"><strong>Wesley Upchurch </strong></span>
<span class="comment-meta-date"><a href="#c102979">#</a> 2008-01-16</span>
</p>
<div class="comment-bulk">
<p>Excellent!  Hopefully this visual helps to clear up some of the confusion.  Like Simon though I think the issue is what happens when we consider XHTML 2.0.</p>

</div>
</div>


<div class="comment" id="comment-103517">
<p class="comment-meta" id="c103517">
<span class="comment-meta-author"><strong>Karl Dubost <a class="commenter-profile" href="http://www.w3.org/People/karl/"><img alt="Author Profile Page" src="http://www.w3.org/QA/sununga/mt-static/images/comment/mt_logo.png" width="16" height="16" /></a></strong></span>
<span class="comment-meta-date"><a href="#c103517">#</a> 2008-01-17</span>
</p>
<div class="comment-bulk">
<p>Thanks everyone.</p>

<p>Why confusing for XHTML 2.0? It's another language which has for ancestor HTML 4 too and which uses an XML serialization, and probably schemas technology. I might create a table to clarify the different assets of each language. Docbook is also another language which helps to describe content and is serialized as XML.</p>

</div>
</div>


<div class="comment" id="comment-104912">
<p class="comment-meta" id="c104912">
<span class="comment-meta-author"><strong>Alastair Agutter </strong></span>
<span class="comment-meta-date"><a href="#c104912">#</a> 2008-01-19</span>
</p>
<div class="comment-bulk">
<p>Hi James,
With reference to Quality Assurance Standards. Could you please point me in the right direction on W3, or are we reaching the point where we can validate a standard in grammar and content. Can we? or have we a framework in place to display a Quality Assurance Marque. Where development responsibility has been demonstrated in HTML, CSS etc.</p>

<p>I welcome your esteemed advice and guidance.</p>

<p>Respectfully Yours </p>

<p>Alastair Agutter
Senior WWW Developer and Founder
Riverside Networks Computer Sciences Academy</p>

</div>
</div>


<div class="comment" id="comment-107259">
<p class="comment-meta" id="c107259">
<span class="comment-meta-author"><strong>Gregory J. Rosmaita </strong></span>
<span class="comment-meta-date"><a href="#c107259">#</a> 2008-01-26</span>
</p>
<div class="comment-bulk">
<p>the illustration must indeed be impressive from the feedback so far, but i wouldn't know, as there is no long description of the graphic, only the uninformative terse descriptor (a.k.a. alternative text) "HTML5 Serializations"</p>

<p>why is this?  is the graphic too complex for a textual description?  it is obviously intended to provide an "ah-hah!" eureka moment for those confused by the issue of serialization as it pertains to HTML5, but there is no equivalent "ah-hah" mechanism for those who cannot process the graphic used as the main content of this page.</p>

<p>is this a shortcoming of the blog interface (an inability to associate a long descriptor for the graphic) or is it due to simple carelessness?  either way, it is an inexcusable violation of the Web Content Accessibility Guidelines, versions 1 and 2, W3C Technical Recommendations upon which W3C web space has a well-defined dependency; if the W3C doesn't follow the Web Content Accessibility Guidelines, how can the W3C expect others to adhere to them?  this violation is particularly distressing as the perceptual black hole it creates appears on the W3C's own Quality Assurance blog...</p>

<p>no, this post is not "spot-on topic", but the issue it outlines is an important one -- i'm not asking for the proverbial thousand words which a picture is held to be worth, but at least for a description of that which others are praising -- even those who usually do not like that kind of visualisation</p>

<p>and as for the versioning question, HTML 4.01 was serialized as XHTML 1.0, not XHTML4 -- therefore, HTML5 should be serialized <strong>not</strong> as XHTML5, but as XHTML 1.5</p>

</div>
</div>


<div class="comment" id="comment-107600">
<p class="comment-meta" id="c107600">
<span class="comment-meta-author"><strong>Karl Dubost <a class="commenter-profile" href="http://www.w3.org/People/karl/"><img alt="Author Profile Page" src="http://www.w3.org/QA/sununga/mt-static/images/comment/mt_logo.png" width="16" height="16" /></a></strong></span>
<span class="comment-meta-date"><a href="#c107600">#</a> 2008-01-27</span>
</p>
<div class="comment-bulk">
<p>Hi gregory, </p>

<p>I will try to improve the graphics, you will tell me what it gives for you. and if it's more understandble. Note that I have not talked at all about XHTML 5. I'm just saying that there are two serializations of the same language HTML 5. One which is html and one which is XML.</p>

</div>
</div>


<div class="comment" id="comment-111417">
<p class="comment-meta" id="c111417">
<span class="comment-meta-author"><strong>Griff Ruby </strong></span>
<span class="comment-meta-date"><a href="#c111417">#</a> 2008-02-05</span>
</p>
<div class="comment-bulk">
<p>I think it would be inappropriate to call the XML variety of HTML 5 "XHTML 5"
What makes more sense to me is that just as HTML 4's XML variety is "XHTML 1.0" (and everyone accepts that the numbers are obviously different), so (given that there is already an "XHTML 1.1) calling it XHTML 1.5 would make the most sense.  And when there is an HTML 6 someday in the future its XML equivalent would be "XHTML 1.6" and so on.</p>

<p>Otherwise, as XHTML advances, it could get confusing:  XHTML 3 - OK, 4 - OK, 5 - Oops!  We already have an "XHTML 5" so what do we do now?</p>

</div>
</div>


<div class="comment" id="comment-112457">
<p class="comment-meta" id="c112457">
<span class="comment-meta-author"><strong>Bruce W Morlan </strong></span>
<span class="comment-meta-date"><a href="#c112457">#</a> 2008-02-10</span>
</p>
<div class="comment-bulk">
<p>It would be very nice, in the rush to build a rich environment into HTML,  if the developers would let the users (not all of whom have great bandwidth) request HTML 3.0 or HTML 1.0 as part of the HTTP:// call so that they could get the content in a more timely manner and with a minimum of angst over questions like "Do I really have to install yet another 'plug in'?". The great flash and sizzle that many of these plug-ins represent are often just Hollywood-style fluff that annoys people who need content.</p>

</div>
</div>


<div class="comment" id="comment-113409">
<p class="comment-meta" id="c113409">
<span class="comment-meta-author"><strong>Nicolas Krebs </strong></span>
<span class="comment-meta-date"><a href="#c113409">#</a> 2008-02-13</span>
</p>
<div class="comment-bulk">
<p>The following table may help people who do not understand all the meaning of "HTML 5, one vocabulary, two serializations" (read in fixed-lenght font)</p>

<p>text/html | application/xhtml+xml
----------|----------------------
HTML 2.0  |
HTML 3.2  |
HTML 4.01 | XHTML 1.0
          | XHTML 2
HTML 5    | HTML 5</p>

</div>
</div>


<div class="comment" id="comment-113701">
<p class="comment-meta" id="c113701">
<span class="comment-meta-author"><strong>Nicolas Krebs </strong></span>
<span class="comment-meta-date"><a href="#c113701">#</a> 2008-02-14</span>
</p>
<div class="comment-bulk">
<p>The following table may help people who do not understand all the meaning and consequences of "HTML 5, one vocabulary, two serializations" </p>

<pre>text/html | application/xhtml+xml
----------|----------------------
HTML 2.0  |
HTML 3.2  |
HTML 4.01 | XHTML 1.0
          | XHTML 2
HTML 5    | HTML 5</pre>

</div>
</div>


<div class="comment" id="comment-138274">
<p class="comment-meta" id="c138274">
<span class="comment-meta-author"><strong>Terry Morris </strong></span>
<span class="comment-meta-date"><a href="#c138274">#</a> 2008-05-01</span>
</p>
<div class="comment-bulk">
<p>Yes, this graphic is colorful and demonstrates the dual-nature of HTML 5. I think it's also helpful to see a visual overview of the various markup languages and their relation to each other. See my March 2007 blog posting with a <a href="http://webdevfoundations.blogspot.com/2007/03/next-version-of-xhtml-may-be-html-5.html" rel="nofollow">chart that includes HTML, XHTML, XML, etc.</a> .</p>

<p>Edit: I have fixed your link. Karl.</p>

</div>
</div>


<div class="comment" id="comment-182607">
<p class="comment-meta" id="c182607">
<span class="comment-meta-author"><strong>zerq </strong></span>
<span class="comment-meta-date"><a href="#c182607">#</a> 2009-07-07</span>
</p>
<div class="comment-bulk">
<p>Damn it i don't like this..</p>

<p>I mean on one side you have serialize to pure untainted XML...
on the other side you have serialize to dog turd (HTML/SGML)</p>

<p>Who's bright idea was it to bring back the dark ages of SGML?
We where moving into the blessed enlightenment of XML and then this happens!!!</p>

<p>WHY?!</p>

<p>What possible reason can there be for bring back this taint?!</p>

<p>I mean seriously what the hell is wrong with strict XHTML?!
I was looking forward to XHTML 2.0 not this crap!</p>

<p>This whole project strikes me as the worst possible idea anyone could possibly have had!</p>

<p>I mean its like auguring that we should "teach the controversy" (for those familiar with how creationism tries to sneak into the American school system).</p>

</div>
</div>


<div class="comment" id="comment-182653">
<p class="comment-meta" id="c182653">
<span class="comment-meta-author"><strong>Anton </strong></span>
<span class="comment-meta-date"><a href="#c182653">#</a> 2009-07-10</span>
</p>
<div class="comment-bulk">
<p>IMHO (for every sentence):</p>

<p>XML is a subset of SGML.  SGML includes all markup languages.  "XML serialization" just adds a few syntax rules to SGML.  The mistaken distinction here arises from XML parsers failing and tag soup being continually supported.</p>

<p>I personally see no problem with a web page failing when a tag doesn't have the proper syntax, just like in ANY OTHER programming language.  Sure it would break a lot of the web, but a lot of the web NEEDS to be updated as well.</p>

<p>If it were my job to create an image as the article shows (great image, btw), I would make a Venn diagram with SGML as a large circle, XML and HTML 4 as circles inside the SGML circle, with the XML+HTML overlap as XHTML.  HTML 5 on the other hand is just another circle inside the SGML circle that overlaps HTML4 and XML.  This new HTML 5 circle doesn't help simplify markup, but just stands as a replacement to HTML 4, as in the future the HTML 4 circle will fade away, leaving us with what we had before we had HTML 5.</p>

<p>Again, just my opinion though.</p>

</div>
</div>


<div class="comment" id="comment-182687">
<p class="comment-meta" id="c182687">
<span class="comment-meta-author"><strong>karl </strong></span>
<span class="comment-meta-date"><a href="#c182687">#</a> 2009-07-11</span>
</p>
<div class="comment-bulk">
<p>@zerq</p>

<p>What about this valid HTML 5 document?</p>

<pre>&lt;!DOCTYPE html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
&lt;head&gt;
    &lt;title&gt;Versatile document&lt;/title&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;p&gt;&lt;img src="foo" alt="a crazy image"/&gt;&lt;/p&gt;
    &lt;p&gt;So much things alike.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

</div>
</div>


<div class="comment" id="comment-543564">
<p class="comment-meta" id="c543564">
<span class="comment-meta-author"><strong>Matty </strong></span>
<span class="comment-meta-date"><a href="#c543564">#</a> 2011-10-09</span>
</p>
<div class="comment-bulk">
<p>@zerq
As far as I understand it (and beware confusion/misunderstandings on my part), the relevant ideas behind HTML5, expressed in your terminology, are that:</p>

<ol>
<li><p>You can be "moving into the blessed enlightenment of XML" (heh) if you like - and please encourage others to join you. Hence the existence of the XML serialisation of HTML5. The WHATWG are not attempting to delay the arrival of XML Nirvana.</p></li>
<li><p>The WHATWG are not trying to "bring back this taint" - rather, the tag soup never went away, neither in the content nor in the parsers in browsers, and as far as anyone can tell, is here to stay for reasons of backward compatibility, broken authoring tools and (more generally) humans being prone to error. Any proposal to 'break a lot of the web' (a la @Anton) is a non-starter. People would avoid any browser or other software that worked this way. My mum doesn't care whether the web pages she uses are valid or not - she cares that they <em>work</em> right now, and the WHATWG want them to continue to work.</p></li>
<li><p>What 'is wrong with strict XHTML' is that failure to get such content right, accompanied by so-called 'draconian' error handling in XML parsers in browsers yields a poor end-user experience with little to no graceful degradation.</p></li>
<li><p>Invalid content is arguably 'the worst possible idea anyone could possibly have had'. But it's not the WHATWG's idea - it's a fact on the web. So browsers must be forgiving to work around this. The WHATWG are describing what browsers <em>actually</em> do, not proscribing what they should do.</p></li>
</ol>

</div>
</div>


  <div class="comments-open" id="comments-open">
<h3 class="comments-open-header">Leave a comment</h3>

<div class="comments-open-moderated">
   <p>
   Note: this blog is intended to foster <strong>polite
   on-topic discussions</strong>. Comments failing these
   requirements and spam will not get published. Please,
   enter your real name and email address. Every
   individual comment is reviewed by the W3C staff.
   This may take some time, thank you for your patience.
   </p>
   <p>
   You can use the following HTML markup (a href, b, i,
   br/, p, strong, em, ul, ol, li, blockquote, pre)
   and/or <a href="http://daringfireball.net/projects/markdown/syntax">Markdown syntax</a>.</p>
</div>

<div id="comments-open-data">
<form method="post" action="http://www.w3.org/QA/sununga/beach.pl" id="comments-form">
<h4>Your comment</h4>
<div id="comments-open-text">
  <textarea id="comment-text" name="text" rows="20" cols="100"></textarea><br />
<label for="comment-text">Write your comment text here. Remember, keep the discussion on topic and courteous.</label>
</div>

<h4>About you</h4>
<div id="comment-form-name">
  <input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="137" />
<input type="hidden" name="__lang" value="en" />
<label for="comment-author">Your Name</label>
<input id="comment-author" name="author" size="30" value="" />
</div>
<div id="comment-form-email">
<label for="comment-email">Your Email Address</label>
<input id="comment-email" name="email" size="30" value="" />
</div>

<div id="comments-open-footer">
<input type="submit" accesskey="s" name="post" id="comment-submit" value="Submit" />

</div>
</form>
</div>
</div>


<p id="gentime">This page was last generated on $Date: 2011/12/16 03:02:39 $</p>

      </div><!-- End of "main" DIV. -->

<address>

This blog is written by W3C staff and working group participants,<br />
&nbsp;and maintained by <a href="/People/CMercier/">Coralie Mercier</a>.<br />
Authorized parties may <a href="/QA/new">log in</a> to create a new entry.<br/>
<span id="poweredby">Powered by Movable Type, magpierss and a lot of Web Technology</span>
    </address>


    <p class="copyright">
      <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> &copy; 1994-2011
      <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a>&reg;
      (<a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>,
      <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>,
      <a href="http://www.keio.ac.jp/">Keio</a>),
      All Rights Reserved.
      W3C <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
      <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>,
      <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
      and <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a>
      rules apply. Your interactions with this site are in accordance
      with our <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Public">public</a> and
      <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Members">Member</a> privacy
      statements.
    </p>

  </body>
</html>