CodeNique - What Are DOCTYPEs?

What Are DOCTYPEs?

By Budda • May 16, 2008 • 11:55 PM

Print This Page

Email This Page

Bookmark This Page

Your Ad Here

Now lets talk about the <!DOCTYPE> command. The majority of your web pages if not all should begin with a <!DOCTYPE>. A <!DOCTYPE> is a command and not an HTML or XHTML tag that lets the browser know which DTD your web page complies with as well as what to expect from your web page. The <!DOCTYPE> command also tells validators how to judge your code in order to check its syntax which then signals the beginning of the actual code which starts with the <html> tag. The <!DOCTYPE> is short for document type declaration.

The <!DOCTYPE> contains two methods for pointing to DTD information. The first one is a publicly recognized document identifier. I will show you one example of the way a public identifier is defined below.

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Let me explain in more detail what the public identifier means starting with the word html, which states that your web page begins first with the <html> tag, and the word PUBLIC just means that it's XHTML 1.0 standard and is publicly available. The "-//W3C//DTD XHTML 1.0 Transitional//EN" part means that you are using XHTML version 1.0 and that it is written in English which is what EN stands for.

Now the second part is a specific URL in case the browsing device does not recognize the public identifier. I will show you one example of the URL below.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

Now when you declare a <!DOCTYPE> with a URL at the top of your web page it usually put's the browsers in standards mode, which allows you to use standards compliant code which allows you to have more control over the way your web page is displayed. Now if there is no proper <!DOCTYPE> deceleration or if you leave it out. The browser will assume that your web page is old fashioned and relies on browser bugs that will eventually be obsolete and displays it in that way which is called quirks mode (Opera has no quirks mode).

Now if you use non-standard HTML tags. There will be no point in specifying a <!DOCTYPE> which in turn enables browsers to use quirks mode. All you have to do is just close your web page in opening and closing HTML tags.

Now it's good to remember that the word <!DOCTYPE> is always typed in uppercase letters, both in HTML and in XHTML web pages this is because the <!DOCTYPE> came from another language called SGML.

Now you are probably wondering what are DTD's. Well DTD is short for Document Type Definition. DTD's are specification documents that define every element, attribute, and entity along with the rules for their use that make up HTML, XHTML, XML or any other language that was created with SGML. There are three versions of DTD's which are Strict DTD, Transitional DTD, and Frameset DTD.

Now if you are creating an XHTML page you can use an XML declaration which looks like <?xml?> but its not required in all XML documents; however XHTML document authors are strongly encouraged to use XML declarations in all their documents. Such a declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16 and no encoding was determined by a higher-level protocol.

The XML version deceleration uses a special XML processing directive. Generally these XML directives begin with <? and end with ?>, but other then that they look like typical tags in your document. In order to declare that you are using XML version 1.0 just place the directive in the first line of your document. I will show you an example of how to do this below.

<?xml version="1.0"?>

You will also need to use the encoding attribute which its value should reflect your local character set. The default value is UTF-8 which is short for (8-bit Unicode Transformation Format). There are many different types of character encodings.

Here is how the full XML declaration looks like when complete in the example below.

<?xml version="1.0" encoding="UTF-8"?>

Whew!!, that was a lot of info. First I will show you where to place the <!DOCTYPE> at. Then I will show you how to code all these declarations which must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult. Then I will list most of the commonly used recommended declarations that you can use for your web pages.

Here is where you place the <!DOCTYPE> at.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Welcome To HTML & XHTML</title> </head> <body> </body> </html>

Now I will list the most of the commonly used recommended declarations you can use for your web pages.

HTML 4.01 - Strict, Transitional, Frameset:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 - Strict, Transitional, Frameset:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 - DTD:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML 2.0 - DTD:

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2 - DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

MathML 1.01 - DTD:

<!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd">

MathML 2.0 - DTD:

<!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/mathml2.dtd">

XHTML + MathML + SVG - DTD:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

SVG 1.0 - DTD:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

SVG 1.1 Full - DTD:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

SVG 1.1 Basic - DTD:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">

SVG 1.1 Tiny - DTD:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">

XHTML + MathML + SVG Profile (XHTML as the host language) - DTD:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

XHTML + MathML + SVG Profile (Using SVG as the host) - DTD:

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg:svg PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

HTML & XHTML

CSS

JAVASCRIPT

WEB COLOR