Skip to main content

DTD - The Document Type Declaration

A DTD is a Document Type Definition, also know as DOCTYPE. In a document served as text/html, the DOCTYPE informs the browswer how to interpret the content of the page.

If the the doctype is not declared, the browser assumes you don’t know how to code, and goes into "quirks mode". If you know what you are doing and include a correct XHTML DOCTYPE, your page will be rendered in "standards mode".




A DTD is a Document Type Definition, also know as DOCTYPE. In a document served as text/html, the DOCTYPE informs the browswer how to interpret the content of the page.

If the the doctype is not declared, the browser assumes you don’t know how to code, and goes into "quirks mode". If you know what you are doing and include a correct XHTML DOCTYPE, your page will be rendered in "standards mode".


All of the above declarations will inform the browser to render the browser in standards mode. When authoring document is HTML or XHTML, it is important to Add a Doctype declaration. The declaration must be exact — both in spelling and in case. And, the URL must be included. If not, you risk having your page rendered in quirks mode. A list of the DTD’s and how browsers handle them can be found at http://hsivonen.iki.fi/doctype/

There are other DTD’s, such as for MathML and "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"> for mobile. A list of valid DTDs is maintained at http://www.w3.org/QA/2002/04/valid-dtd-list.html

The XML declaration for XHTML web pages of is optional. Older browsers such as IE5 for the Mac choke on this. And, if you include it, IE6 renders in quirks mode, but IE7 renders in standards. So, for now, omit it. But, if you do include it, it must be the very first line, before the DTD


Why is quirks mode bad? Ever code a page and have the font inside your data tables be huge? That’s because in quirks mode browsers render td’s based on the browser default, not on the declared body default size. The box model is rendered differently and images as block instead of inline.

Why are DTD’s good? In addition to everything above, a DTD enables you to have valid code. To test validity, a page is compare to the rules for that document type. If you don’t have rules, how do you compare it? The DTD tells the validator what rules to use.

What is the difference between strict and transitional? Transitional allows depreciated tags and attributes to pass validation. The strict doctype is strict: depreciated tags and attributes will fail to validate under a strict doctype and may well display incorrectly as well. See Comparing XHTML and HTML, Strict and Transitional and Deprecated Elements and Attributes.

What does PUBLIC mean? In the above DOCTYPEs, all of them include the term "PUBLIC". If you are creating your own DTD then put your DTD on your sever and include the term "SYSTEM" with the path to your DTD file. On the other hand, if you are using PUBLIC DTD’s, such as those listed above, and the public identifier which starts with -//.

Comments

Popular posts from this blog

REST / AJAX calls from within a Jaggery script

<% var mySecureToken = FnMakeRequestCall("https://10.299.99.99:8245/token","POST","Basic RlN4S2RrZEpNN3VaYWhHN0NFcEtlaTZEa3RzYTpXbmUxd29seHp2UTNSQ2RZbXhUUTJ2WkJTd0Fh","application/x-www-form-urlencoded; charset=UTF-8",""application/json; charset=utf-8","grant_type=password&username=pcsadmin&password=pcsadmin");  print(mySecureToken); function FnMakeRequestCall(URL, METHOD, BASICAUTH, CONTENTTYPE, ACCEPTTYPE, INPUTDATA){ if(BASICAUTH){ //var VarBasicAuthCode = util.FnCreateBasicAuthentication(VARSKYSPARKUSERNAME,VARSKYSPARKPASSWORD); var VarBasicAuthCode = session.get('authToken'); } xhr = new XMLHttpRequest(); xhr.open(METHOD, URL); if(BASICAUTH){ xhr.setRequestHeader("Authorization" , VarBasicAuthCode); } xhr.setRequestHeader("Content-Type", CONTENTTYPE); xhr.setRequestHeader("Accept", ACCEPTTYPE); xhr.send(INPUTDATA); var VarRes

MySQL table and want to build a XML file with it in order to make a RSS feed.

<? php $dom = new DOMDocument() ; include "connection. php "; $queryz = "SELECT * FROM ticker"; $resultz = mysql_query($queryz) or die('Error, query failed'); $row = mysql_fetch_assoc($resultz); $ rss = $dom->createElement(' rss '); while($row = mysql_fetch_array( $resultz )) { $item = $dom->createElement("item"); $item->appendChild($dom->createElement("title", $row['item_title'])); $item->appendChild($dom->createElement("pubDate",$row['item_pubDate'])); $item->appendChild($dom->createElement("description",$row['item_description'])); $item->appendChild($dom->createElement("link",$row['item_link'])); $ rss ->appendChild($item); } $dom->appendChild($ rss ); $dom->save("myxml.xml"); OR <?php header('Content-Type: text/xml; charset=UTF-8'); $dom = new DOMDocument() ;

CSS Browser detection using jQuery instead of hacks

Browser sniffing is messy. There are a million ways to do it but none of them are particularly clean and most involve conditional statements such as "<!--[if condition]> HTML <![endif]-->" for IE and various other CSS selector hacks for other browsers. I've done a fair amount of browser sniffing with jQuery recently and it's really easy, useful for when you need to detect the browser and version number in your javascript. It occurred to me that it would be easy to detect the browser and then put something in the DOM that your CSS could use for conditional formatting. So I wrote a quick script in JavaScript/jQuery. How it works:   All you have to do is include the JavaScript file in the head of the page and it'll attach 2 classes to your body tag to say what browser and what version is being used so you've got 2 levels of granularity. Possible values are... .browserIE .browserIE6 .browserIE7 .browserIE8 .browserChrome .browserChrome1 .browse