HTML And XHTML Doctypes

23rd June 2008 - 3 minutes read time

Note: This post is over a year old and so the information contained here might be out of date. If you do spot something please leave a comment and we will endeavour to correct.

In order to validate any page of HTML or XHTML you will need a doctype. This is a string of text that sits at the top of the document and tells the browser exactly what markup standard has been used to create the page.

XHTML Strict

This doctype is used in an XHTML document when you are not using any framset or depreciated tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional

This doctype is used if your XHTML document contains depreciated tags like <b>.<.p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Frameset

Use this XHTML doctype if your document contains either frameset tags or depreciated tags, or both.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML Strict

Use this HTML doctype if your document contains no depreciated tags.

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

HTML Transitional

Also called loose, this doctype is to be used if your HTML document contains depreciated tags.

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

HTML Frameset

This doctype is used in a HTML document that contains frameset tags or depreciated tags or both.

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

Without these doctypes in place the browser will default to what is called "quirks mode" where certain CSS styles are looked at a little differently. If you are finding trouble with your stylesheet then try adding a doctype that fits your markup.

Alternatively, if you find that you want your page to validate and adding the doctype tag actually destroys the page then you can add what is called a "broken doctype". This is the same as any normal doctype, but with the URL pointing to the DTD missing. Here are two examples.

XHTML Strict Broken Doctype

This doctype is used in an XHTML document when you are not using any framset or depreciated tags, but still want the page to display in quirks mode and validate properly.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

HTML Strict Broken Doctype

This doctype is used in an HTML document when you are not using any framset or depreciated tags, but still want the page to display in quirks mode and validate properly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

(X)HTML

Add new comment

Related Content

The iframe srcdoc Attribute

I was working on a web page generation program recently and was looking for a way to present different versions of the same page with slight differences in the markup and styles. Although using the iframe element came to mind I wasn't keen on rendering out lots of different versions of the page and then referencing them individually in each iframe. I did think about creating using an API to send back each page on request but I thought that this might just overcomplicate the program.

Using The view-source Protocol

If you are running FireFox (or Chrome) then there is a handy little short cut you can use to view the source of a page you are looking at. If you add the text view-source on any web address then you will see the equivalent of viewing the source of a page (perhaps by pressing Ctrl+u). Although not entirely useful, it does have a couple of benefits, such as being able to view your code in another tab, rather than another window.

HTML Meta Refresh

To get a webpage to refresh every few seconds you can use a meta tag with the attribute http-equiv and a value of refresh. The number of seconds to delay can be put into the content attribute. This meta tag (as will all meta tags) goes into the head section of the document.

Here is an example that refreshes the page every 2 seconds.

<meta http-equiv="refresh" content="2" />

It is also possible to make the browser refresh to another page by including the string:

External JavaScript Include In HTML

To include a JavaScript file into a HTML page you can use the script tag with the src parameter pointing towards the source code file. However, there is a subtle difference between the script tag in HTML and XHTML. This is because the language attribute is not supported in XHTML, so if you just copy the code from HTML to XHTML the page won't validate. The solution here is to just leave it out.

For HTML

<script language="JavaScript" type="text/javascript" src="scripts/javascript.js"></script>

For XHTML

Linking An RSS Or Atom Feed to a HTML Document

Adding a hyper link for an RSS or Atom feed on your web page works, but that's not all you can do. By adding a link to the head section of the page you can allow your users an alternative method of picking up your feed.

To add an RSS feed use this.

<link rel="alternate" type="application/rss+xml" href="http://www.example.com/rssfeed.xml" />

To add an Atom feed use this.