The different HTML and XHTML doctype (document type) declarations and their standards

The different HTML and XHTML doctype (document type) declarations and their standards

W3C World Wide Web Consortium Logo Image

Out of all of the different doctype declarations, HTML 5, the upcoming newer HTML standard, has the simplest doctype declaration. Even with HTML 4.01, there needs to be a doctype declaration with your HTML documents to conform to W3C’s standards as they are published. There are also other standards such as XHTML 1.0 (Extensible Hyper Text Markup Language). The primary differences in use between HTML and XHTML is the requirement that all tags are closed in XHTML; even for tags that do not otherwise have a closing tag, such as the <img> tag.

Correct XHTML 1.0 Transitional Syntax:
<img src=”http://www.eukhost.con/images/logo.png” />
<img src=”http://www.eukhost.con/images/logo.png” alt=”Web Hosting Logo” />
<p>Paragraph</p>
<p>Paragraph</p>
<font face=”Verdana”>Text</font>

Correct XHTML 1.0 Strict Syntax:
<img src=”http://www.eukhost.con/images/logo.png” />
<img src=”http://www.eukhost.con/images/logo.png” alt=”Web Hosting Logo” />
<p>Paragraph</p>
<p>Paragraph</p>

Correct HTML 4.01 Transitional Syntax:
<img src=”http://www.eukhost.con/images/logo.png”>
<img src=”http://www.eukhost.con/images/logo.png” />
<img src=”http://www.eukhost.con/images/logo.png” alt=”Web Hosting Logo”>
<p>Paragraph
<p>Paragraph
<p>Paragraph</p>
<p>Paragraph</p>
<font face=”Verdana”>Text</font>

Correct HTML 4.01 Strict Syntax:
<img src=”http://www.eukhost.con/images/logo.png”>
<img src=”http://www.eukhost.con/images/logo.png” />
<img src=”http://www.eukhost.con/images/logo.png” alt=”Web Hosting Logo”>
<p>Paragraph
<p>Paragraph
<p>Paragraph</p>
<p>Paragraph</p>

There are two XHTML doctype declarations you can make use of. XHTML Transitional is not as strict as XHTML Strict is; with XHTML strict, all images must make use of alt tags and you cannot open hyperlinks in new windows using target=”_blank”. The other differences between XHTML Transitional to Strict is the Transitional doctype permits use of presentational HTML elements.

Can I close <img> tags in HTML 4.01 Strict or Transitional?

Yes. It is still correct HTML 4.01 syntax; although the W3C syntax validator will issue a warning not to do so if you do – but it is correct syntax nonetheless.

What are the differences between HTML 4.01 Transitional and HTML 4.01 Strict?

The difference is similar to the differences between XHTML Transitional and XHTML Strict. If you don’t want to fully comply with the strict requirements of HTML 4.01, you can make use of the Transitional doctype; otherwise, use HTML 4.01 Strict. The primary differences between HTML 4.01 Transitional and Strict is that the Transitional doctype permits use of presentational HTML elements such as <font> and <s>; whereas HTML 4.01 Strict does not – you are expected to use CSS for presentational requirements with HTML 4.01 Strict and XHTML 1.0 Strict.

Doctype declarations and examples of conformance vs. non-conformance.

HTML5 Standard Logo

HTML 5 Doctype Declaration.

The HTML 5 doctype declaration is very simple compared to XHTML 1.0 and HTML 4.01.

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>UK Web Hosting Blog</title>
</head>
<body>
<p>eUKhost Web Hosting Blog</p> <!– Conforms –>
<p>eUKhost Web Hosting Blog <!– Conforms –>
<font family=”Verdana”>Welcome</font> <!– Does Not Conform –>
</body>
</html>

HTML 4.01 Transitional Doctype Declaration.

HTML 4 Standard Logo Image

Again, HTML 4.01 Transitional include presentational HTML elements such as <font> and <s>.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-type” content=”text/html;charset=UTF-8″>
<title>UK Web Hosting Blog</title>
</head>
<body>
<p>eUKhost Web Hosting Blog <!– Conforms –>
<p>eUKhost Web Hosting Blog</p> <!– Conforms –>
<font face=”Verdana”>Welcome</font> <!– Conforms –>
</body>
</html>

HTML 4.01 Strict Doctype Declaration.

HTML 4 Standard Logo Image

And of course, HTML 4.01 Strict does not include presentational HTML elements such as <font> and <s>.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=”Content-type” content=”text/html;charset=UTF-8″>
<title>UK Web Hosting Blog</title>
</head>
<body>
<p>eUKhost Web Hosting Blog <!– Conforms –>
<p>eUKhost Web Hosting Blog</p> <!– Conforms –>
<font face=”Verdana”>Welcome</font> <!–Does Not Conform –>
</body>
</html>

XHTML 1.0 Transitional Doctype Declaration.

XHTML Logo Standard Image

<!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”>
<head>
<title>UK Web Hosting Blog</title>
</head>
<body>
<p>eUKhost Web Hosting Blog <!– Does Not Conform –>
<p>eUKhost Web Hosting Blog</p> <!– Conforms –>
<font face=”Verdana”>Welcome</font> <!– Conforms –>
</body>
</html>

XHTML 1.0 Strict Doctype Declaration.

XHTML Logo Standard Image

<!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”>
<head>
<meta http-equiv=”Content-type” content=”text/html;charset=UTF-8″ />
<title>UK Web Hosting Blog</title>
</head>
<body>
<p>eUKhost Web Hosting Blog <!– Does Not Conform –>
<p>eUKhost Web Hosting Blog</p> <!– Conforms –>
<font face=”Verdana”>Welcome</font> <!–Does Not Conform –>
</body>
</html>

Warning Triangle Image IconImportant note with using <!DOCTYPE> declarations.

It is important to declare the doctype using the <!DOCTYPE html> element. In HTML 5, this is all you need; although with XHTML 1.0 and HTML 4.01, you need to also specific the DTD (Document Type Definition). If you don’t use the <!DOCTYPE html> syntax for any kind of HTML document, some browsers will default to a quirks mode which is to ensure that websites developed many years ago for older browsers render as properly as possible. So it is important you specify the doctype declaration.

Ben Stones

Sharing

1 Comments

Leave your comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.