Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
218 lines (110 sloc) 11.5 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>The Long Road from XHTML to HTML | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="XHTML - A New Hope! I started developing websites in 2003. At that time, XHTML was the flavour of the season (or rather the official W3C &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="">twitter</a> <a class="rss" href="">RSS Feed</a> <a class="youtube" href="">Youtube Channel</a> <a class="github" href="">Github</a></h2>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
<nav class="article">
<a class="previous" href="/what-happened-to-the-design.html" title="What happened to the design?">&#x276C;</a>
<a class="next" href="/book-reviews-for-april-2009.html" title="Book Reviews for April 2009">&#x276D;</a>
<time datetime="2009-04-18T00:00:00+05:30" pubdate><span class='month'>Apr</span> <span class='day'>18</span> <span class='year'>2009</span></time>
<h1 class="entry-title"><a href="/the-long-road-from-xhtml-to-html.html">The Long Road from XHTML to HTML</a></h1>
<div class="entry-content"><h3>XHTML - A New Hope!</h3>
<p>I started developing websites in 2003. At that time, XHTML was the flavour of the season (or rather the official W3C recommendation to move forward from HTML 4.x) and <a href="">Deepak</a> introduced me to the world of web design with XHTML and CSS. It was even <a href="">written about favourably</a> by the <a href="">Godfather of Web Design</a>. The reasons that were given to adopt XHTML were these:</p>
<li>XHTML had a smaller set of rules (since it is based off XML).</li>
<li>Using XHTML will make your document well formed (not the tag soup HTML allows you to write).</li>
<li>XHTML will be future compatible.</li>
<li>XHTML lets you integrate content from other markup languages with XML namespaces (like SVG and MathML) </li>
<li>You can use standard XML tools to work with your XHTML documents.</li>
<p>This was in 2000-2003. With the gift of hindsight we know now that XML was not the future. The biggest disadvantage to using XHTML being, any user agent (e.g. the browser) when it comes across an unescaped ampersand (&amp;) in a URL or a mismatched character encoding in a trackback message, would cause the entire page to fail, and so most of today&#8217;s public web applications can&#8217;t safely be incorporated in a true XHTML page.</p>
<p>Internet Explorer has never supported XHTML (<a href="">not even IE 8</a>) making all arguments about standards compliance go down the drain. <a href="">XHTML is not HTML compliant if it is served as content type <code>text/html</code></a> (read more on <a href="">why sending XHTML as text/html is harmful</a>). Moreover, XHTML 2 is not compatible with XHTML 1.1, which throws the future compatibility argument out of the window. Others had doubts over XHTML and XHTML 2.0 in particular (<a href="">1</a>, <a href="" title="Why HTML">2</a>, <a href="" title="Eric's Archived Thoughts">3</a>, <a href="" title="A List Apart: Articles: Rated XHTML">4</a>, <a href="" title="Semantic obsolescence [dive into mark]">5</a>) which paved the way for <a href="">HTML 5</a>.</p>
<h3>HTML Strikes Back!</h3>
<p>HTML 5 takes an evolutionary path with focus on backwards compatibility along with some innovations. HTML 5 aims to replace XHTML 1.0 and HTML 4.0. HTML 5 and XHTML 2 are opposites in a way, as support for HTML 5 does not imply support for XHTML 2 (browsers need to support these separately).</p>
<p>HTML 5 defines 2 syntaxes - HTML syntax (which is compatible with HTML 4 and XHTML 1 documents (served as <code>text/html</code>)) and XML syntax which needs to be served as <code>application/xhtml+xml</code>. Even better, HTML syntax of HTML 5 allows MathML and SVG elements to be used inside a HTML document (reducing the need to use XML at all). </p>
<p>With HTML 5, you can continue using XHTML closing for empty elements (e.g. &lt;br/&gt;) and <a href="">it will still be acceptable in HTML syntax</a>.</p>
<p>HTML 5 defines different rules for user agents and authors. The user agents are required to be backwards compatible, but the authors are required not to use &#8220;deprecated&#8221; elements for HTML 5 conformance.</p>
<p>Safari, Opera, Firefox have openly declared support for HTML 5 (and Internet Explorer is on the team to draft the HTML 5 standard). XHTML 2 does not have any browser support and <a href="">Safari has explicitly opted out of drafting XHTML 2. </a></p>
<p>Mike Malone has written a <a href="">great review of XHTML 2 vs. HTML 5</a> and <a href="">it seems like HTML 5 will win this war.</a></p>
<p>Personally, I gave up on XHTML when I learnt to be more forgiving (and less of a pedant) about HTML documents (it is not their fault!). This blog though, is ironically XHTML 1.0 Strict.</p>
<h3>What should you do?</h3>
<p>If you are new to web design or working on large portals, my suggestion would be to use HTML 4 rather than XHTML. You <em>can</em> code well-formed HTML with HTML 4 and you don&#8217;t need XHTML to whip you into shape to do that. Better still, use HTML 5 - without using the newly introduced elements (as they are not supported universally).</p>
<h3>Read More</h3>
<li><a href="">Differences between HTML 5 and HTML 4</a></li>
<li><a href="">HTML 5 FAQ</a></li>
<p><em>UPDATE:</em> Dave Shea talks about why <a href="">he is switching to HTML 4.01</a>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
<time datetime="2009-04-18T00:00:00+05:30" pubdate><span class='month'>Apr</span> <span class='day'>18</span> <span class='year'>2009</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
. If you would like to update this post, <a href="">please send a pull request</a>.
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="">comments powered by Disqus.</a></noscript>
<aside id="articles">
<p><img class="avatar" src="" height=48> <a href="">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
<footer role="contentinfo"><p>
Copy to your heart’s content 2013 - Divya Manian -
<span class="credit">Powered by <a href="">Octopress</a></span>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = '';
var disqus_identifier = '';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<script src="/javascripts/octopress.js"></script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];