The <!DOCTYPE> declaration should be the very first item in your HTML document, before the element. This declaration is not an HTML element. It is only an instruction to the web browser about what version of HTML the page is written in.
If the declaration is not made, the browser will do its best to render the page accordingly. If you’ve been designing web pages for a while now, you are aware of the difficulty in developing a page that looks the same in all browsers.
By setting the DOCTYPE, you can ensure that your web pages will be rendered in a similar format because this instructs the browser exactly how to handle the elements it finds in the document.
The <!DOCTYPE> declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup
language. Again, this is so that the browsers render the content correctly.
Parts of a DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">A DOCTYPE is made up of the following parts:
!DOCTYPE: It indicates to the user-agent that the enclosed information will define the type of document of the page.HTML: This tells the browser what element to expect as the top-level element. For HTML and XHTML documents this element would be<html>.PUBLIC: The most common DOCTYPES you will use will be publicly available. You can also specify a local DTD with theSYSTEMkeyword."-//W3C//DTD HTML 4.01 Transitional//EN": This is the Formal Public Identifier (FPI). This entire string is what identifies the DOCTYPE.
More on FPI
The FPI is made up of these parts:
-/+: A plus-sign indicates that the organization is registered with the ISO. A minus-sign indicates that it is not registered.W3C: This is the group that owns and maintains the DOCTYPE being used.DTD: This defines the type of DOCTYPE used.HTML 4.01 Transitional: This is the label that tells you what DTD is being used in readable form.EN: This is the language that the DTD is written in. It is not the language of the content of the page.http://www.w3.org/TR/html4/loose.dtd: This is an optional URL indicating where the DTD for this DOCTYPE can be found.
Sample DOCTYPEs:
HTML 2.0
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 2//EN">HTML 3.0
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">HTML 4.01
Strict DTD – contains all HTML elements and attributes, but does not include presentational or deprecated elements. Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Transitional – contains all HTML elements and attributes, including presentational and deprecated elements. Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Frameset DTD – equal to HTML 4.01 Transitional, but does allow the use of frameset content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0
Strict DTD – contains all HTML elements and attributes, but does not include presentational or deprecated elements. Framesets are not allowed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Transitional – contains all HTML elements and attributes, including presentational and deprecated elements. Framesets are not allowed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Frameset DTD – equal to XHTML 1.0 Transitional, but does allow the use of frameset content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1
Equal to XHTML 1.0. Strict, but allows you to add modules.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">XHTML 2.0
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd">HTML 5
HTML5 is not based on SGML and therefore does not require a reference to a DTD.
<!DOCTYPE html>Reminder: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.
