fixing-html-with-html5.html 21 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='conformance, html, html5, quality, specification' />
    <meta name="description" content="Is there a way to improve the HTML ecosystem in a way that creates more adoption of HTML 5? From parsing to serialization to fixing, how do we recover broken Web documents?" />
    <meta name="revision" content="$Id: fixing-html-with-html5.html,v 1.52 2011/12/16 03:03:02 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 And The Hear-Write Web - W3C Blog</title>

   <link rel="start" href="http://www.w3.org/QA/" title="Home" />
   <link rel="prev" href="http://www.w3.org/QA/2008/09/slideshow-must-go-on.html" title="The Slideshow Must Go On" />
   <link rel="next" href="http://www.w3.org/QA/2008/10/understanding-http-put.html" title="Understanding HTTP PUT" />

   <!--
<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/09/fixing-html-with-html5.html"
    trackback:ping="http://www.w3.org/QA/sununga/mt-tb.cgi/223"
    dc:title="HTML 5 And The Hear-Write Web"
    dc:identifier="http://www.w3.org/QA/2008/09/fixing-html-with-html5.html"
    dc:subject="HTML"
    dc:description="Is there a way to improve the HTML ecosystem in a way that creates more adoption of HTML 5? From parsing to serialization to fixing, how do we recover broken Web documents?"
    dc:creator="Karl Dubost"
    dc:date="2008-09-26T06:44:29+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/09/slideshow-must-go-on.html">&laquo; The Slideshow Must Go On</a> |
                        <a href="http://www.w3.org/QA/">Main</a>
                        | <a href="http://www.w3.org/QA/2008/10/understanding-http-put.html">Understanding HTTP PUT &raquo;</a>
                     </p>

                        <h2 class="entry-header">HTML 5 And The Hear-Write Web</h2>
                           <div class="entry-body">
                              <p>HTML 5 working draft defines a parsing algorithm which is robust enough that it will not break for the most common types of errors. Many computing engineers and Web designers think that this feature encourages bad quality for documents. Point taken. But let's look a bit further at what proposes HTML 5 in terms of input and output.</p>

<p><a href="http://flickr.com/photos/victoriapeckham/266268495/"><img style="margin:1em;float:left;" src="http://farm1.static.flickr.com/83/266268495_209a6bfbbb_m.jpg" alt="How do we understand typos. "/></a> I do mistakes very often. English is not my mother tongue. I try to fix spelling mistakes as much as possible. Still, my English grammar is still behind. Oh, not looking for any excuses, I do mistakes in French too. But I'm glad that our brains have a very robust parsing mechanism which helps us to recover from broken sentences (bad spelling and clumsy grammar). Just imagine for the experiment, that your brain was not able to parse any sentences that would not be grammatically correct. How many sentences in our daily conversation are 100% correct? Not that much. </p>

<p>At W3C, we take meetings minutes (a lot) of discussions happening over a phone. During these teleconferences, there are people from different nationalities, different accents, different levels of English and on top of that in different time zones (fatigue). Still the scribe (minute taker) writes down, most of the time, correct English sentences after parsing them. The scribe creates a serialization of what he heard, but modifies it to be correct.</p>

<p>An HTML 5 Tidy library could do the same thing. It could parse a broken document and create a DOM following the <a href="http://www.w3.org/TR/html5/parsing.html#parsing" title="HTML 5">HTML 5 parsing algorithm</a>. Then it could serialize it (writes it down) following the <strong>HTML 5 content model</strong>. That would create a conformant HTML 5 document.</p>

<p>This is an important part of the process. <strong>What you hear is not what you write</strong>. You are stricter, once you have recovered the meaning. The same way what the HTML 5 Tidy library has parsed is not what it will serialize. Let's take a practical example with the infamous <code>center</code> element.</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;title&gt;a broken document&lt;/title&gt;
  &lt;center&gt;&lt;p&gt;I want to be in the center of the page.&lt;/p&gt;&lt;/center&gt;
&lt;/html&gt;
</code></pre>

<p>The innerHTML view (using <a href="http://livedom.validator.nu/" title="HTML5 Live DOM Viewer">HTML 5 Live DOM viewer</a>) is:</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;a broken document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;center&gt;&lt;p&gt;I want to be in the center of the page.&lt;/p&gt;&lt;/center&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>But the document will be invalid and the message given by the <a href="http://qa-dev.w3.org/wmvs/HEAD/" title="The W3C Markup Validation Service">experimental HTML 5 validator instance</a> will be</p>

<pre><code>Validation Output:  1 Error
#  Error  Line 4, Column 7: The center element is obsolete..
</code></pre>

<p>Why? Because nowhere in the content model of HTML 5, the center element is defined. You can't write an HTML 5 conformant document containing the <code>center</code> element. An HTML 5 Tidy library would emit only elements which are compatible with the HTML 5 content model. In this case that could be</p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;a broken document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;I want to be in the center of the page.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Some people will argue that everyone will want different rules. Indeed that is possible. Some will want to have double quotes around attributes, some single quotes. And if we take into account the set of documents which have complex mixed markup, it will indeed create a lot of headaches. But it's why I think it would be interesting to define a set of basic rules for emitting HTML 5 after it has been parsed.</p>

<p>Some might propose solutions of the following type for the <code>center</code> element. </p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;a broken document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p style="text-align:center;"&gt;
      I want to be in the center of the page.
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Daniel Glazman <a href="http://www.glazman.org/weblog/dotclear/index.php?post/2008/09/25/HTML-attributes-inline-styles-or-style-rules" title="HTML attributes, inline styles or style rules - &lt;Glazblog/&gt;">proposed recently</a> something quite similar for HTML attributes, inline style or style rules.</p>

<p>Are there any engineers which would be ready to take the challenges of designing an HTML 5 Tidy Library (and the canonic rules to fix the output) using the content model of HTML 5? I <a href="http://www.w3.org/QA/2008/09/top-500-html5-validity.html" title="Alexa Global Top 500 against HTML 5 validation - W3C Q&amp;A Weblog">showed</a> recently that there will be <strong>less</strong> document validating with the HTML 5 doctype than with their current doctype.  Henri Sivonen <a href="http://www.w3.org/QA/2008/09/top-500-html5-validity.html#c166027" title="Henri's comment on QA blog">rightly commented</a> that HTML 5 content model was stricter than previous versions of HTML. This will not leverage the adoption of conformant HTML 5. </p>

<p>An HTML 5 Tidy Library (even not perfect) would help people to move forward. If there are no benefits, people will continue to use HTML 4.01 and/or XHTML 1.0 because, in the end it doesn't matter, </p>

<ul>
<li>it will still be parsed correctly by browsers. </li>
<li>Authors can use the existing XHTML books out there, rely on their years of experience of the language and business practices, </li>
<li>and, last but not least, they will benefit of the tools which fix their invalid content.</li>
</ul>

                           </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 September 26, 2008  6:44 AM in <a href="http://www.w3.org/QA/archive/technology/html/">HTML</a>, <a href="http://www.w3.org/QA/archive/web_spotting/opinions_editorial/">Opinions &amp;amp; Editorial</a>, <a href="http://www.w3.org/QA/archive/w3cqa_news/technology_101/">Technology 101</a>, <a href="http://www.w3.org/QA/archive/w3cqa_news/tools/">Tools</a><br />
<span class="separator">|</span> <a class="permalink" href="http://www.w3.org/QA/2008/09/fixing-html-with-html5.html">Permalink</a>
                                 | <a href="http://www.w3.org/QA/2008/09/fixing-html-with-html5.html#comments">Comments (10)</a>
                                 | <a href="http://www.w3.org/QA/2008/09/fixing-html-with-html5.html#trackback">TrackBacks (0)</a>
</p>


<h3 class="comments-header" id="comments">Comments</h3>
<div class="comment" id="comment-166061">
<p class="comment-meta" id="c166061">
<span class="comment-meta-author"><strong>estelle </strong></span>
<span class="comment-meta-date"><a href="#c166061">#</a> 2008-09-26</span>
</p>
<div class="comment-bulk">
<p>in the case of redefining the CENTER element to be an inline style, the question arises as to the cascade.  My suggestion for such an example would be </p>

<pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;a broken document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div style="text-align:center;"&gt;
      &lt;p&gt;I want to be in the center of the page.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Suggestion: convert deprecated inline elements, such as FONT, to SPANs, and block level elements, such as CENTER, to DIVs.  </p>

</div>
</div>


<div class="comment" id="comment-166073">
<p class="comment-meta" id="c166073">
<span class="comment-meta-author"><strong>S </strong></span>
<span class="comment-meta-date"><a href="#c166073">#</a> 2008-09-28</span>
</p>
<div class="comment-bulk">
<p>Couldn't you just write:</p>

<pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;a broken document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p align="center"&gt;
      I want to be in the center of the page.
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>Or is that obsolete too?</p>

</div>
</div>


<div class="comment" id="comment-166305">
<p class="comment-meta" id="c166305">
<span class="comment-meta-author"><strong>Blair </strong></span>
<span class="comment-meta-date"><a href="#c166305">#</a> 2008-10-03</span>
</p>
<div class="comment-bulk">
<p>The align attribute is deprecated in HTML 4.01.  Most modern HTML viewers do recognize it and will render your example as intended (and will doubtless continue to do so for the foreseeable future).</p>

<p>But with the movement to use HTML for structure and CSS to control the actual presentation, creating a style attribute is preferable.</p>

</div>
</div>


<div class="comment" id="comment-167009">
<p class="comment-meta" id="c167009">
<span class="comment-meta-author"><strong>salzi </strong></span>
<span class="comment-meta-date"><a href="#c167009">#</a> 2008-10-17</span>
</p>
<div class="comment-bulk">
<p>I would love to get this back:</p>

<pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;a broken document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;I want to be in the center of the page.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

<p>In my point of view, that is the only clean way. As you said before, everyone will want different rules. The discussion about convert deprecated element and so on, will never end.</p>

<p>With this solution, you would get HTML 5 Code, nothing more, nothing less. If the reslut doesn't fit you expectances, you can find out what is missing and find a solution for it (i.e. using stlye="" attributes)</p>

</div>
</div>


<div class="comment" id="comment-167897">
<p class="comment-meta" id="c167897">
<span class="comment-meta-author"><strong>Lee Goddard </strong></span>
<span class="comment-meta-date"><a href="#c167897">#</a> 2008-10-27</span>
</p>
<div class="comment-bulk">
<p>To avoid losing potentially-significant mark-up, I would appreciate an option to allow inline elements such as 'font' to become spans, perhaps with a class attribute of 'font.' Equally, block-level elements might become divs.</p>

</div>
</div>


<div class="comment" id="comment-168564">
<p class="comment-meta" id="c168564">
<span class="comment-meta-author"><strong>David </strong></span>
<span class="comment-meta-date"><a href="#c168564">#</a> 2008-11-12</span>
</p>
<div class="comment-bulk">
<p>I would prefer to get the clean html 5 markup back with no presentation (styles, or otherwise) in it at all. If important markup will be removed I can always copy the old markup before running tidy.</p>

</div>
</div>


<div class="comment" id="comment-168580">
<p class="comment-meta" id="c168580">
<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="#c168580">#</a> 2008-11-13</span>
</p>
<div class="comment-bulk">
<p>I can see the benefits of translating the style information or to just get the clean markup. I guess for some people, the step for fixing their code without the style information will be too high. For example, if you remove all center and do not replace them by anything, the layout will be destroyed and they will feel that the Web standards are inferior to their own choices.</p>

</div>
</div>


<div class="comment" id="comment-169134">
<p class="comment-meta" id="c169134">
<span class="comment-meta-author"><strong>steven christopher </strong></span>
<span class="comment-meta-date"><a href="#c169134">#</a> 2008-11-22</span>
</p>
<div class="comment-bulk">
<p>i would prefer the font's to become family font src="......./...../ etc
the "pre" tags to become "fixed"(fxd) body background to become = "bbgsrc="color" or "img".html etc
do away with the &lt;div> tags and just use &lt;br />
also it's about time we do away with all the old html and stick to 3.2 and upwards. out with old ! in with the new !</p>

</div>
</div>


<div class="comment" id="comment-181782">
<p class="comment-meta" id="c181782">
<span class="comment-meta-author"><strong>Larry Masinter </strong></span>
<span class="comment-meta-date"><a href="#c181782">#</a> 2009-05-19</span>
</p>
<div class="comment-bulk">
<p>It makes more sense to specify first what writers should write, and then secondly give advice about what hearers are expected to understand to be compatible with what is currently written. </p>

<p>The current HTML5 specification intentionally doesn't do that: it defines how hearers are supposed to listen, and, as an afterthought, gives some restrictions as to what should be written.</p>

</div>
</div>


<div class="comment" id="comment-182392">
<p class="comment-meta" id="c182392">
<span class="comment-meta-author"><strong>Izek </strong></span>
<span class="comment-meta-date"><a href="#c182392">#</a> 2009-06-16</span>
</p>
<div class="comment-bulk">
<p>DIVs don't like to center block level content just so you know (Such as other DIVs.) Text-align:center won't always work.</p>

</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="233" />
<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:03:02 $</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>