I like to mix it up on my blog, sometimes posting experiments, and sometimes posting fundamental front end posts. This is a fundamental, but a crucial step in creating a website. Choosing the correct DOCTYPE for your site.
What is the Document Type Declaration?
A proper DOCTYPE is essential for the correct rendering and functioning of a website in compliant browsers. If you forget to declare a DOCTYPE, on use an incomplete one, then the browser will render in quirks mode, in which the browser will try and be backward compliant leaving you with a website that might as well have the hard hat under construction animated gif on it.
There are typically 3 types associated with each lang version. Strict, transitional, and frameset. Use Strict when you want a pure website that only uses the lang version’s current tags. Use transitional, when you have a site that you will be using some depreciated tags. Use frameset, when you include frames.
Pure Clean HTML
The HTML DTD are the most typical you’d find on websites. Use the HTML definition when writing plain old standard HTML. Great thing about this is by using standards there’s no surprises for any browsers when parsing your page.
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">HTML 5
I love the new HTML 5 DOCTYPE. Why? Because this is all it is.
<!DOCTYPE HTML>X is for Extreme
The X in XHTML actually is referring to the fact that XHTML documents are XML conforming. This means that XML tools can more easily validate and parse the HTML. Another advantage of XHTML is that it is as extensable as XML. Meaning you can create your own html tags and use them, here’s an example of what I mean.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>A Math Example</title>
</head>
<body>
<p>The following is MathML markup:</p>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<apply> <log/>
<logbase>
<cn> 3 </cn>
</logbase>
<ci> x </ci>
</apply>
</math>
</body>
</html>
This can be extremely useful when you are using an unofficial webstandard like microformats, foaf, etc…
Here are the declarations for XHTML.
XHTML 1.0 Strict
<?xml version="1.0" encoding="UTF-8"?>
<!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">XHTML 1.0 Transitional
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">XHTML 1.0 Frameset
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">XHTML 1.1
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">So which do I choose?
Let me answer this question with a question. What will be the focus of your site? When you are building a site that will be viewed on non-standard browsers (eg. some mobile browsers, the kindle, the wii) then XHTML is your best choice. When you are building a site that’s gonna be viewed in standard browsers, (eg. firefox, safari, ie, opera) then HTML is what you should be using.
To decide how to pick between Strict, transitional, and frameset, this really depends on your coding style. I think you should use Strict and in special circumstances use transitional and frameset. My favorite at the moment is the HTML 5 DTD, it’s extremely simple to remember. <!DOCTYPE HTML>
If you enjoyed reading this post, check out this post Getting Started with HTML 5.
