Choosing the proper DOCTYPE

March 6, 2009 by David Corvoysier

I have been recently asked to tell the differences between HTML 4.0, XHTML 1.0 and HTML 5.0, and I had to dig in the specifications to provide an answer. Doing this, I realized that I did not really pay attention to the DOCTYPE declarations in my web pages so far, possibly leading to unexpected behaviours in some browsers (see the very detailed article on Wikipedia about Quirks mode).

To be short, HTML documents must start with a DOCTYPE declaration that is used by the browser to choose the appropriate rendering. It allows in particular to distinguish between real HTML documents and XHTML documents served as text/html to non-XHTML browsers (though required by the XHTML specification, the DOCTYPE declaration is actually redundant with the namepace declaration if the document is served as application/xhtml+xml).

The current HTML specification is HTML 4.01 (1999). It defines three document types:

  • HTML 4.01 strict, that relies entirely on CSS for presentation
  • HTML 4.01 transitional, that still allows deprecated presentational markup
  • HTML 4.01 frameset, that must only be used to declare framesets

In a first attempt to replace HTML 4.01, the W3C has defined XHTML 1.0 (2000-2002), that redefines HTML 4.01 using a strict XML syntax. Unsurprisingly, XHTML 1.0 also defines three document types:

  • XHTML 1.0 strict, that is exactly HTML 4.01 strict with closing tags,
  • XHTML 1.0 transitional, that is exactly HTML 4.01 transitional with closing tags,
  • XHTML 1.0 frameset, that must only be used to declare framesets.

In a later standardization effort, the W3C produced XHTML 1.1 (WIP), that doesn’t add much, but defines only a strict DOCTYPE. It is no offense to the promoters of XHML 1.1 to say that it hasn’t yet been widely adopted (and to be honest it will probably go to oblivion soon since HTML 5 is on its way).

The upcoming HTML 5 specification takes a different approach and uses a single DOCTYPE for both HTML and XHTML documents (the DOCTYPE is optional for XHTML documents because it is redundant with their mime-type information: application/xhtml+xml).

To summarize, when developing a new page, the first thing you need to decide is if you want it to be HTML 5 or not.

If you go for HTML 5, then it is pretty straightforward: just add the following line at the top of your file:

<!DOCTYPE html>

If you want to address the legacy browsers, or if for any other reason you don’t want to use HTML 5, then you need to decide whether you are going to use HTML or XHTML. My recommendation is to always choose HTML unless you really need XHTML (for instance because you want to add inline SVG).

Then, in both cases, unless you really need to use the deprecated HTML syntax, use the strict DOCTYPE.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Please note that according to the W3C XHTML guidelines, the XML declaration (<?xml version="1.0" encoding="UTF-8"?>) should be omitted, as it triggers quirks mode in older versions of Internet Explorer. This is only a problem if you need to specify a different character encoding than UTF-8 (the default).

SVG inline in (X)HTML

February 1, 2009 by David Corvoysier

SVG is now supported by all web browsers except IE. Opera has the best SVG support, but Safari and Firefox are not far behind. I think it is now time to take advantage of the powerful SVG features.

What does SVG add to the web developer toolkit ?

Well, as its names indicates, SVG first provides a simple syntax to draw shapes that scale: it is thus particularly handy to draw screen layouts and buttons. I see some people starting to get interested …

But wait: SVG also includes a wide range of gradient, opacity and geometric transformations that can be applied not only to native SVG shapes, but also to images. This give you access to many fancy effects very hard to achieve with HTML alone, like for instance image reflection or fading.

Want more ? Check this out: SVG markup can be modified dynamically using javascript, allowing you to actually animate it. Who said cover-flow at the back of the class ?

Animation through javascript sucks on low-end devices ? Well, SVG also includes native animation capabilities (unfortunately only supported today by Opera).

Fair enough, but the whole web is built on top of HTML, and switching to full SVG is definitely an option.

Well, the cherry on the cake is that you don’t have to: SVG can be inserted inline into XHTML. How powerful that is ?

You will find detailed information on why and how it works on the SVG wiki. A method to have inline SVG supported by IE using the Adobe SVG viewer is also provided.

Here is an overview of what you need to do.

  • First, you need to use XHTML, because plain old HTML doesn’t support being extended by another markup language, and your SVG markup will be ignored by the browsers.
  • Second, you need to make sure that the SVG-aware browsers know this is XHTML, by delivering your content to them as application/xhtml+xml. You probably nevertheless still want to deliver your content to IE as text/html, so what you need is conditional mime-types based on the Accept header of the user agent.
    • it can be done at the HTTP server level. See example below for apache (example taken from the SVG wiki): 
      AddType text/html .xhtml
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
RewriteCond %{REQUEST_URI} \.xhtml$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - [T=application/xhtml+xml]
    • If you don’t have access to your web server configuration, you can still:
      • modify headers on the fly. See an example for PHP below: 
        if(preg_match("|application/xhtml\+xml|i",$_SERVER["HTTP_ACCEPT"]){
  header("Content-Type: application/xhtml+xml");
}
      • or insert meta tags in the HTML head to specify the proper mime-type. See another example for PHP: 
        if(preg_match("|application/xhtml\+xml|i",$_SERVER["HTTP_ACCEPT"]){
  echo "<meta http-equiv='Content-Type' content='application/xhtml+xml' />" ;
}
      • If you use WordPress, the simpliest way is to use the Content-Negotiation plugin
  • Third, put your SVG under an SVG tag
    • <div id="myDIV">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
	 xmlns:xlink="http://www.w3.org/1999/xlink"
	 viewBox="0 0 400 50"
	 id="myDIVBG">
	    <defs>
	      <linearGradient id="myGrad">
		<stop style="stop-color:#ff5b06;"
                        offset="0" />
		<stop style="stop-color:#ffb11a;"
                        offset="1" />
	      </linearGradient>
	    </defs>
	    <rect style="fill:url(#myGrad);"
	       width="400" height="50"
               x="0" y="0" rx="10" ry="10" />
    </svg>
    HTML Text with SVG background
</div>
  • Fourth, style your SVG with CSS
    • <style type="text/css">
#myDIV {
    position:relative;
    width:400px;
    height:50px;
}
#myDIV svg {
    position:absolute;
}
#myDIV svg:hover rect {
    fill: red !important;
}
#myDIV span {
    position:absolute;
    top:15px;
    left:40px;
    font-size: 16px;
    font-weight: bold;
}
</style>

The result should look like this:

HTML Text with SVG background

Please note in particular how the CSS styling allows the SVG to be perfectly integrated in the page:

  • the absolute positioning of the svg root element allows the next-coming HTML span to appear on top of the SVG background
  • the :hover behaviour allows a dynamic update of the SVG rect element fill attribute when the element is moused over

You will find more examples below:

UPDATE(2010): You can now inline SVG directly in HTML in most modern browsers.