(X)HTML Standards: DocTypes, HTML vs. XHTML, and Strict vs. Transitional

The DocType is a piece of code that is placed at the very beginning of an (X)HTML document, just before the <html> tag. The HTML validator will use the DocType to determine which standard to use when validating the code. The DocType may also be used by the Web browser to determine its rendering mode. The DocTypes below are “long” DocTypes, which indicate that the browser should render the page in “standards” mode.

Common DocTypes

Standard DocType Notes
HTML
4.01		 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">		 Syling must
be in CSS,
not in HTML
Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">		 Styling can
be mixed
into HTML
Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">		 Considered
obsolete
XHTML
1.0		 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">		 Syling must
be in CSS,
not in HTML
Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">		 Styling can
be mixed
into HTML
Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">		 Considered
obsolete
HTML
5		 <!DOCTYPE html> Considered
Experimental

Note that when using the XHTML DocType, the following long form of the <html> tag must be used:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Basic differences between HTML and XHTML coding

  HTML XHTML
  Elements & attributes
are not case-sensitive		 All elements and attributes
must be lowercase
Examples <A HREF="index.html">Home</A> <a href="index.html">Home</a>
<A Href="index.html">Home</A>
<a href="index.html">Home</a>
Notes Note that values may be case-sensitive under either standard.
 
  HTML XHTML
  Not all elements must be closed All elements must be closed
Examples <p>Hello world.
<p>Goodbye world.		 <p>Hello world.</p>
<p>Goodbye world.</p>
<ul>
<li>Cats
<li>Dogs
</ul>		 <ul>
<li>Cats</li>
<li>Dogs</li>
</ul>
Notes In HTML most elements do need to be
closed, but for some elements (such as <p>
and <li>) using a closing tag is optional.		  
  For elements that have no natural closing tags
(for example, there is no </img> or </br> tag):
  No ending tag is used, and no slash is added. A slash is appended to the element.
Examples <br> <br />
<hr> <hr />
<img src="dog.gif" alt="dog"> <img src="dog.gif" alt="dog" />
<link rel="stylesheet"
src="css/styles.css"
type="text/css">		 <link rel="stylesheet"
src="css/styles.css"
type="text/css" />
<meta http-equiv="Content-Type"
content="text/html;
charset=UTF-8">		 <meta http-equiv="Content-Type"
content="text/html;
charset=UTF-8" />
In HTML5 use the following
for the <meta> tag:
<meta charset="UTF-8">		 When adding the slash, it is good
practice to also add a space
immediately before the slash.
Notes
 
  HTML XHTML
  Quotes are optional for most values All values must be in quotes
Examples <a href=index.html>Home</a> <a href="index.html">Home</a>
<a href="index.html">Home</a>
Notes In HTML, only values that contain special
characters (such as spaces, accent marks,
em dashes, etc.) must be in quotes. 		 
 
  HTML XHTML
  Loose syntax Tighter syntax
  Inline elements, or text content,
may be directly in the <body>.		 Inline elements must be
nested within block elements.
Examples <body>
Hello.
</body>		 <body>
<p>Hello.</p>
</body>
<body>
<a href="index.html">Home.</a>
</body>		 <body>
<p><a href="index.html">Home.</a></p>
</body>
Notes There are other syntax differences, but, practically speaking, this is the one you need to know.

Note that the syntax for HTML 5 is looser than for HTML 4.01.

Basic difference between Strict and Transitional standards

  Tansitional standard Strict standard
  Elements & attributes that are purely
presentational may be used		 Elements & attributes that are purely
presentational are deprecated and cannot be used
Examples <p align="center"> [The examples to the left cannot be used.
All styling is done in CSS.]
<font color="red">
<body bgcolor="white">
Notes There are a few exceptions to this logic.

For more information: