craft-of-html.html 19.6 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, qa, quality, validation, w3c' />
    <meta name="description" content="HTML is a practical art. In a professional context, it requires precise and extensive skills. As with many popular crafts, the vast majority of people do it on their own, but only a few do it for a living. The quality of products varies a lot.
" />
    <meta name="revision" content="$Id: craft-of-html.html,v 1.96 2011/12/16 02:58:31 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>The craft of HTML - W3C Blog</title>

   <link rel="start" href="http://www.w3.org/QA/" title="Home" />
   <link rel="prev" href="http://www.w3.org/QA/2007/08/iphone_developer_guidelines_pr.html" title="iPhone Developer Guidelines Promote One Web, Open Standards" />
   <link rel="next" href="http://www.w3.org/QA/2007/08/html_community_roundup.html" title="Web spotting roundup: the WASP lead edition" />

   <!--
<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/2007/08/craft-of-html.html"
    trackback:ping="http://www.w3.org/QA/sununga/mt-tb.cgi/66"
    dc:title="The craft of HTML"
    dc:identifier="http://www.w3.org/QA/2007/08/craft-of-html.html"
    dc:subject="HTML"
    dc:description="&lt;a href=&quot;http://www.w3.org/html/&quot;&gt;HTML&lt;/a&gt; is a &lt;strong&gt;practical art&lt;/strong&gt;. In a professional context, it requires precise and extensive skills. As with many popular crafts, the vast majority of people do it on their own, but only a few do it for a living. The quality of products varies a lot.
"
    dc:creator="Karl Dubost"
    dc:date="2007-08-08T03:10:04+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/2007/08/iphone_developer_guidelines_pr.html">&laquo; iPhone Developer Guidelines Promote One Web, Open Standards</a> |
                        <a href="http://www.w3.org/QA/">Main</a>
                        | <a href="http://www.w3.org/QA/2007/08/html_community_roundup.html">Web spotting roundup: the WASP lead edition &raquo;</a>
                     </p>

                        <h2 class="entry-header">The craft of HTML</h2>
                           <div class="entry-body">
                              <p><a href="http://www.w3.org/html/">HTML</a> is a <strong>practical art</strong>. In a professional context, it requires precise and extensive skills. As with many popular crafts, the vast majority of people do it on their own, but only a few do it for a living. The quality of products varies a lot.</p>

<p>Bruno Pedro has recently published <cite><a href="http://bugleak.com/2007/08/top-blogs-fail-w3c-markup-validation/">Top blogs fail W3C Markup Validation</a></cite>. He has taken the top 20 list of popular weblogs and puts them through W3C validator. None passed markup validation. Then the author is encouraging people to take care of validation. The comments following the article express either frustration, anger or support. This article is a good illustration of the misunderstanding about HTML validation.</p>

<p><strong>HTML validation is not a goal. HTML validation is a means.</strong></p>

<p>Jeffrey Zeldman, <cite><a href="http://www.businessweek.com/innovate/content/aug2007/id2007086_670396.htm">the King of Web Standards</a> (Business Week)</cite>, in one of his <a href="http://www.zeldman.com/2007/08/07/businessweek-king-of-webstandards/">weblog entry</a> comments on the invalid top 20, <q cite="http://www.zeldman.com/2007/08/07/businessweek-king-of-webstandards/">And lest a BusinessWeek article lull us into complacency, let us here note that the top 20 blogs as measured by Technorati.com fail validation--including one blog Happy Cog designed. (<em>It was valid when we handed it off to the client</em>.)</q> (my emphasis). A while ago, I had already written about <cite><a href="http://www.w3.org/QA/2006/01/failed_commitments.html">Failed Commitments?</a></cite>.</p>

<h3 id="failure">Acknowledging failure</h3>

<p>We, all of us, fail sometimes. The Web has been even designed for  failures. <a href="http://www.w3.org/Provider/Style/URI">Cool URIs don't change</a>, but they can break. The Web is not collapsing when a URI is broken. The same way, when an HTML page is invalid, browsers still <a href="http://www.w3.org/QA/2007/07/why-html-5-matters.html">try to recover</a>  and render the content anyway.</p>

<p><a href="http://validator.w3.org">Checking validation</a> of your web pages after publication (when available on the Web) is most of the time too late. It is far better to create all the necessary control and checking steps in the publishing process, in the Web site development process, <strong>to maintain the quality of your products</strong>. It is one of the main points of the Web Standards Do, <a href="http://www.w3.org/QA/2007/07/the_way_of_web_standards#standardo_virtue_rectitude">use tools and processes to fix issues before they hurt</a>. </p>

<h3 id="help">How can you help?</h3>

<p>When you are a developer of a content management system, of an authoring tool, of a small widget, be sure to create all the function to sanitize the content in production <strong>and</strong> input. Maintaining the quality of your content is a better goal than a one time validation.</p>

<h3 id="reference">Reference of tools</h3>

<ul>
    <li><a href="http://rudd-o.com/projects/wp-validator/">Wordpress XHTML Validator</a> by <a href="http://rudd-o.com/wp-content/uploads/resume/english.html" title="Manuel Amador's résumé">Manuel Amador Briz</a> </li>
    <li><a href="http://golem.ph.utexas.edu/~distler/blog/MTValidate.html">MTValidate Plugin</a> by <a href="http://golem.ph.utexas.edu/~distler/" title="About Jacques Distler">Jacques Distler</a></li>
    <li><a href="http://www.w3.org/QA/Tools/LogValidator/">LogValidator</a> by <a href="http://www.w3.org/People/olivier/">Olivier Théreaux</a></li>
</ul>

<p>Please share your references, tools and techniques.</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 August  8, 2007  3:10 AM 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/w3cqa_news/tools/">Tools</a><br />
<span class="separator">|</span> <a class="permalink" href="http://www.w3.org/QA/2007/08/craft-of-html.html">Permalink</a>
                                 | <a href="http://www.w3.org/QA/2007/08/craft-of-html.html#comments">Comments (11)</a>
                                 | <a href="http://www.w3.org/QA/2007/08/craft-of-html.html#trackback">TrackBacks (0)</a>
</p>


<h3 class="comments-header" id="comments">Comments</h3>
<div class="comment" id="comment-59551">
<p class="comment-meta" id="c059551">
<span class="comment-meta-author"><strong>Joe Clark </strong></span>
<span class="comment-meta-date"><a href="#c059551">#</a> 2007-08-08</span>
</p>
<div class="comment-bulk">
<p>You mean “means,” not “mean.”</p>

</div>
</div>


<div class="comment" id="comment-59573">
<p class="comment-meta" id="c059573">
<span class="comment-meta-author"><strong>Bruno Pedro </strong></span>
<span class="comment-meta-date"><a href="#c059573">#</a> 2007-08-08</span>
</p>
<div class="comment-bulk">
<p>Thanks for the reference to Bug Leak.</p>

<p>The goal of my article was to expose the lack of commitment people show regarding W3C Standards.</p>

<p>I believe the W3C should launch a campaign to promote their standards across all the top blogs and Web sites.</p>

<p>Top bloggers are a great vehicle to spread a message, if it's done properly. </p>

</div>
</div>


<div class="comment" id="comment-59749">
<p class="comment-meta" id="c059749">
<span class="comment-meta-author"><strong>Olivier Wehner </strong></span>
<span class="comment-meta-date"><a href="#c059749">#</a> 2007-08-09</span>
</p>
<div class="comment-bulk">
<p>Yes, I agree, HTML is rather a craft than a science (and I don't mean that pejorative). Tag soup is the curse of HTML but also the key to its wide spread. As with english, if you pardon the comparison, that a non native like me will hardly ever speak perfectly, though being, in general, understood, and generously tolerated. Accepting the nececssity(!) of flaws does not imply to stop striving for perfection. Professionals (and tools) <b>should</b> not diverge from the letters of the spec, but we <b>must</b> respect the ignorance of the noobs. It could be us (and occasionally is).</p>

<p>I am not advocating tag soup or vendor "features", but the whole Html 5 story came up because of XHTML becomming too "scientific". W3C gotta KISS the frog.</p>

</div>
</div>


<div class="comment" id="comment-59797">
<p class="comment-meta" id="c059797">
<span class="comment-meta-author"><strong>Ken Barbalace </strong></span>
<span class="comment-meta-date"><a href="#c059797">#</a> 2007-08-10</span>
</p>
<div class="comment-bulk">
<p>One thing I have found particularly frustrating is that it is extremely difficult to get Blogger to render valid code.  I've made great strides at making my blog, which is hosted by Blogger, as clean as I could, but there are still short comings.  It is really frustrating seeing a company as large as Google not making more of an effort to ensure that their properties better support W3C HTML/XHTML/CSS specifications.</p>

</div>
</div>


<div class="comment" id="comment-60509">
<p class="comment-meta" id="c060509">
<span class="comment-meta-author"><strong>thacker </strong></span>
<span class="comment-meta-date"><a href="#c060509">#</a> 2007-08-14</span>
</p>
<div class="comment-bulk">
<p>The most valuable tool that I use for HTML/XHTML validation and including 508/WCAG 1, 2 and 3 compliance during development ... CSE HTML Validator. Includes a plugin for Firefox -- this helps in identifying any error during a preview of any code or adjustments to it. As far as machine accessibility validation, it does as good a job as Hiawatha Island's AccVerify product and at a miniscule financial cost compared to AccVerify, 130 bucks, USD .. a steal.  However, AccVerify and Watchfire's WebExact are used to provided audit trails for accessibility. Acunetix's Web Vulnerability Scanner is a good basic application for security checks of complied Web applications and content. Checking for security vulnerabilities is as important as ensuring valid markup conformance.</p>

</div>
</div>


<div class="comment" id="comment-61984">
<p class="comment-meta" id="c061984">
<span class="comment-meta-author"><strong>Rudd-O </strong></span>
<span class="comment-meta-date"><a href="#c061984">#</a> 2007-08-24</span>
</p>
<div class="comment-bulk">
<p>Brutal, guys.  Thanks for pointing to one of my projects.</p>

</div>
</div>


<div class="comment" id="comment-65259">
<p class="comment-meta" id="c065259">
<span class="comment-meta-author"><strong>Eps </strong></span>
<span class="comment-meta-date"><a href="#c065259">#</a> 2007-09-14</span>
</p>
<div class="comment-bulk">
<p>The world is more complicated than this article takes into account. Sometimes the situation is such that following a W3C standard isn't even an option.</p>

<p>An example situation (from my personal experience): most ussualy a web-maker makes websites for other people and most ussually the situation with those people is one of the two:

They have no idea of a design at all and expect you to make one.

They have either a very clear idea of the design or some major ideas.

The second is the more difficult, because they basically deside over the result without knowing anything about the means of achieving it (HTML) and its limitations, let alone any of the standards. The pain is that most of W3C's best standards limit the number of implementable design elements (take HTML 4.01 Strict for example - the mere fact that you are limited to div tags as the top-most elements means you can only either use horizontally seperated or absolutely positioned content to ensure multi-browser support).

Try then, to explain to the customer, that you cannot do something that generally works just because you want to follow some sort of standard. You can't - "The customer is always right".
</p>

<p>So I guess it would be a good idea to share some focus on this reality in the web-development trade - the customer and his demands</p>

</div>
</div>


<div class="comment" id="comment-75738">
<p class="comment-meta" id="c075738">
<span class="comment-meta-author"><strong>bbburgess </strong></span>
<span class="comment-meta-date"><a href="#c075738">#</a> 2007-10-25</span>
</p>
<div class="comment-bulk">
<p><em>be sure to create all the <strong>fonction</strong> to sanitize the content in production and input</em></p>

<p>Spell checking can help too.</p>

</div>
</div>


<div class="comment" id="comment-75747">
<p class="comment-meta" id="c075747">
<span class="comment-meta-author"><strong>karl dubost, w3c </strong></span>
<span class="comment-meta-date"><a href="#c075747">#</a> 2007-10-25</span>
</p>
<div class="comment-bulk">
<p>Indeed. Fixed my spelling mistake. :) It was indeed red underlined by the spelling checker. I should have opened more my eyes, I guess ;)</p>

</div>
</div>


<div class="comment" id="comment-170331">
<p class="comment-meta" id="c170331">
<span class="comment-meta-author"><strong>office clearance london                   </strong></span>
<span class="comment-meta-date"><a href="#c170331">#</a> 2008-12-16</span>
</p>
<div class="comment-bulk">
<p>Thanks for this article, it's great. So great that we've made it 'sticky' on The Webmaster Forums. Now we don't have to repeat ourselves, just send people to this article!</p>

</div>
</div>


<div class="comment" id="comment-170698">
<p class="comment-meta" id="c170698">
<span class="comment-meta-author"><strong>probate valuation london </strong></span>
<span class="comment-meta-date"><a href="#c170698">#</a> 2008-12-23</span>
</p>
<div class="comment-bulk">
<p>Great list, it helps clear up much of the htacess mystery and confusion that comes from creating such files.</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="72" />
<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 02:58:31 $</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>