From my
experience, I can remember many cases where I knew for sure that I have written
a HTML document correctly with Javascript and CSS, still it is not rendered
properly in the browser. Few weeks back, I encountered the same problem and
like every time it is the DOCTYPE declaration which is the reason for this
mess. So. I thought of sharing my knowledge regarding DOCTYPE through this
post. DOCTYPE is a declaration that we usually find in the very beginning of an
HTML document (it applies to XHTML too). The first thing to remember here is
that DOCTYPE is not a HTML tag. It provides some information to the browser
regarding the version of HTML that has been used in the document. In other
words, DOCTYPE is a meta-information for the HTML document.
What happens if we don’t specify the
DOCTYPE declaration?
A DOCTYPE
declaration tells the browsers to render a HTML document in standards and compliant
mode. It ensures that the rendering of (X)HTML, CSS, and DOM is done in a
standard way. Browsers make many assumptions and guesswork while rending a
(X)HTML. If we do not specify any DOCTYPE declaration, browsers will use the
“Quirks” mode and render the (X)HTML according to its own proprietary logic. Even
if a (X)HTML has a valid DOCTYPE declaration but has validation errors against
that DOCTYPE, the browsers may not complain and continue render it. For
example, the (X)HTML below fails validation but it is rendered correctly in
browsers.
<!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>
<title> Test
</title>
</head>
<body>
<p>HTML
content..</p></br>
</body>
</html>
Only if we
have a valid DOCTYPE declaration and no validation errors with respect to the
declared DOCTYPE, we can rest assure that the (X)HTML document will be properly
rendered across browsers without writing any browser-specific tag. A list of
valid doctypes can be found here.
DOCTYPE in HTML 5
The doctype
declaration is significantly simplified in HTML 5. The valid declaration of
HTML 5 doctype is:-
<!DOCTYPE
html>
A simple (X)HTML document in html 5 will be as follows:-
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
The content of the Document
</body>
</html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
The content of the Document
</body>
</html>
Adding
a DOCTYPE declaration to (X)HTMl documents is always the best practice. Most of
tools we use to create (X)HTML documents do add a DOCTYPE declaration by
default and also checks for the validity of the document against the declared
DOCTYPE. The documents should only be published when there is no validation
errors against a declared DOCTYPE.
