DTD – Document Type Definition

This defines the how the markup of the page should be read and how it should be validated.

If we examine a common dtd file included in traditional DOCTYPES:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

We see that this file defines how the onclick attribute should be handled/interpretted:

<!ENTITY % events
”onclick     %Script;       #IMPLIED'”
>

XHTML and HTML

XHTML is a much more accurately written markup language. It is based on XML hence the XHTML name. What this means is that it is not considered to be loosely-typed like HTML. So there are sets of rules that must be followed for a page to validate and even render.  I have been using XHTML for my entire time as a web developer and I consider this to be a professional standard.  Consistancy is key and the influence of XML in this regard is very apparent

So an example would be that certain tags are required by XHTML such as the <html> and <head> tag. As those should always be included in one’s HTML page a bigger difference are that all tags must be closed. A <p> must have an accompanying </p>.  Also <img> and other empty tags should be closed as well <img /> and <br /> are compact ways of doing so. One more major difference is that attributes must follow the format of attribute=”value”. Sometimes single quotes can technically be used but again be consistent and use double quotes for all values. A more in depth comparison may be found here:

Frameset, Strict and Transitional

Frameset – This was for frame based layouts.  Don’t use frame.  Don’t use a frameset DocType.

Strict – Disallows the use of deprecated elements and framesets are not allowed Transitional – This allows the use of deprecated tags which were mainly presentational tags such as center, font and u.  This also allows presentational attributes to be applied to elements such as <img align=”right”/> which would be more properly done with CSS to separate markup from presentation.

Browser Modes

Quirks Mode – This is a mode which browsers use to replicate the functionality and features of legacy browsers.  This was an attempt to try and ensure that old markup will still at least be functional in new versions of browsers.  It is my understanding that the DOCTYPE triggers this when an outdated DOCTYPE is being used. One should not trigger this intentionally on new projects as it would mean using deprecated features. Hopefully with a shift towards compartmentalized markup from styles and scripts this will not be needed one day.

Standard Mode – For all future development especially if one wants compartmental, application level markup standards mode is to be used.  This is the browser mode which allows browsers to act natively.  Sure there are still quirks across browsers and troubles in IE but this will not use conditional fixes for quirks on new and legacy pages.One can check if standard mod is being used with JS – console.log(document.compatMode);

Quirks mode will return: BackCompat
Standard mode will return: CSS1Compat

HTML 5 DOCTYPE

This has been significantly improved and simplified from XHTML 1.1 and HTML4:
<!DOCTYPE html>We still have the doctype but we no longer need to define a type unless one wants to. We must include html though so the browser knows it is in fact an HTML document.  Without HTML defined the browser will use quirks mode to interpret it as it would with legacy pages.

Sources / Additional Reading

http://reference.sitepoint.com/html/html-vs-xhtml
http://24ways.org/2005/transitional-vs-strict-markup
http://reference.sitepoint.com/html/html-vs-xhtml