Abby Posted September 12, 2010 Share Posted September 12, 2010 I'm new to serious web design, and I really need someone to explain when to use what type of DTD, and why. I installed a web developer toolbar on my browser (Firefox), and it shows errors on this page, for example. Here's the error it lists:Error: syntax errorSource File: about:blankLine: 1, Column: 63Source Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title></title></head><body></body></html>I tried using this instead, but it caused errors on the page.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">So I'm completely mystified by these dtds and what they all mean, and why. Can someone people explain it in layman's terms? If you can't explain it, then can you please tell me what doctypes I should use for each page in order for the end users to view the page with the least amount of errors? I know it depends on the page ... but what are the general guidelines?Thanks. Link to comment Share on other sites More sharing options...
chibineku Posted September 12, 2010 Share Posted September 12, 2010 The different DTDs determine which set of HTML elements are valid and how they're used and displayed. A strict DTD tends to get greater consistently across browsers and your CSS will be more robust. For example, if I use a strict DTD and change the padding of a div, the space around the content of the div increases, but the div stays the same size. If I increase the margin, the space around the div increases, but the size is the same. If I use a transitional doctype and change the padding of an element, it gets wider and taller by as much as the padding increase. If I change the margin, the div gets narrower. At least, that happens sometimes in IE - in other browsers, what happens when I make these changes is unpredictable. As a general rule, using a strict doctype, particularly XHTML 1.1 is the best practice. Your CSS changes will be easier because the results are predictable. Your site will look the same pretty much anywhere. I spent a frustrating hour trying to make simple changes to the layout of an ExpressionWeb template the other day until I checked the DTD and saw the evil word - transitional. I changed it to strict and had the page looking as I wanted it in 20 minutes. Link to comment Share on other sites More sharing options...
jeffman Posted September 12, 2010 Share Posted September 12, 2010 It's not just the DTD. You'll need to write standards-compliant markup or IE will drop into quirks mode and those differences you're trying to eliminate will be back to haunt you.I notice a lot of presentational attributes in your markup that need to be removed and changed to CSS. Even where they are permitted (such as height and width in an img tag) the values must be wrapped in quotes, and a unit should be specified, e.g.:<img src="/p.gif" width="5px" height="5px">Notice too that you've written a lot of self-closing tags (they have the / character before the > character). Those are not legal in HTML, which is your current DTD. They can be used (indeed, must be used where appropriate) only in XHTML. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 12, 2010 Share Posted September 12, 2010 DTD doctypes is explained herehttp://www.w3schools.com/tags/tag_DOCTYPE.aspWith transitional you can use old presentational styling such as <font></font> align="center" as in <div align="center"></div><center></center> and also attributes like target, as in <a href="blahblah.com" target="_blank"> to mention a few.strict allows non of these, so you must use css equivalent font-size, font-color, margin:0 auto; (for centring block elements), text-align: center; for inline elements, target and iframes are not supported in strict doctype at all.HTML closes elements such as img, hr, br like so <img ....> <hr>, <br>XHTML closes closes elements such as img, hr, br like so <img ..../> <hr />, <br />IE in quirks mode the total width of element includes the element, itself, any padding, and borders, while with other browses the width is the width of the element only.to avoid this you must have the correct declaration to bring you into standards compliance mode (the first icon in your web developers bar should have green tick to show this)HTML<!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//EN" "http://www.w3.org/TR/html4/strict.dtd">XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">without the url at the end of declaration in transitional you will be returned to quirks mode.looking at your site you have mixture of XHTML and HTML tags, mistakes in declarations (float: top; being one), try using the Tools -> validate local html menu option from your web developer toolbar, to highlight these errors and give you explaination why these errors are occurring. Link to comment Share on other sites More sharing options...
Abby Posted September 13, 2010 Author Share Posted September 13, 2010 With transitional you can use old presentational styling such as <font></font> align="center" as in <div align="center"></div><center></center> and also attributes like target, as in <a href="blahblah.com" target="_blank"> to mention a few.But I can't use those "old" stylings with a strict dtd?strict allows non of these, so you must use css equivalent font-size, font-color, margin:0 auto; (for centring block elements), text-align: center; for inline elements, target and iframes are not supported in strict doctype at all.Ah, interesting. Is there a list somewhere of what stylings are old? Because I won't know. I just started learning CSS this week (teaching myself), and I have absolutely no scripting background.(the first icon in your web developers bar should have green tick to show this)Ah.looking at your site you have mixture of XHTML and HTML tags, mistakes in declarations (float: top; being one), try using the Tools -> validate local html menu option from your web developer toolbar, to highlight these errors and give you explaination why these errors are occurring. The validator explanations are often murky and insufficient to me. My website has some javascript and perl script on it, and a bunch of other things I don't understand. It's working all right, but I wanted to redesign the menu (and make a few different menus), which leaves me at a loss. The whole thing was designed in 2003 by someone whom I'm not in regular contact with anymore.Thanks to everyone for your helpful information! Link to comment Share on other sites More sharing options...
ShadowMage Posted September 13, 2010 Share Posted September 13, 2010 Ah, interesting. Is there a list somewhere of what stylings are old? Because I won't know. I just started learning CSS this week (teaching myself), and I have absolutely no scripting background.Try the tag list on W3Schools. Anything marked as "deprecated" cannot be used in a Strict DTD, but more specifically look at the DTD column. It shows you which DTD's the tags are allowed in. Some elements (like frames) are not deprecated, but cannot be used in a Strict DTD.The validator explanations are often murky and insufficient to me. My website has some javascript and perl script on it, and a bunch of other things I don't understand. It's working all right, but I wanted to redesign the menu (and make a few different menus), which leaves me at a loss. The whole thing was designed in 2003 by someone whom I'm not in regular contact with anymore.If you're using inline JavaScript, you need to put CDATA comments in your code to 'hide' it from the validator. That would look like this:<script type='text/javascript'>//<![CDATA[....Your code here//]]></script>I'm not sure if the same concept would work for perl or not. Link to comment Share on other sites More sharing options...
jeffman Posted September 13, 2010 Share Posted September 13, 2010 Perl runs on the server, same as PHP, so it does not need to be hidden from the browser. Link to comment Share on other sites More sharing options...
Ingolme Posted September 13, 2010 Share Posted September 13, 2010 Ah, interesting. Is there a list somewhere of what stylings are old? Because I won't know. I just started learning CSS this week (teaching myself), and I have absolutely no scripting background.Any tag or attribute in HTML that gives color, backgrounds, font styles, element size, alignment...Everything that you would use to make your page pretty is not permitted when using a strict DTD. Link to comment Share on other sites More sharing options...
ShadowMage Posted September 13, 2010 Share Posted September 13, 2010 Perl runs on the server, same as PHP, so it does not need to be hidden from the browser.Ah, ok. I'm not familiar with Perl, I've heard of it and that's about it. Link to comment Share on other sites More sharing options...
jeffman Posted September 13, 2010 Share Posted September 13, 2010 Perl has been around since before the web, so it was never designed as a page processor. At first, if you were on a Unix box, and you didn't want to go through the hassle of compiling a CGI, Perl was the only real choice. PHP was originally written to simplify Perl CGI tasks. Not too long after that, it became a stand-alone interpreter, written (I believe) in C, leaving Perl behind. Link to comment Share on other sites More sharing options...
thescientist Posted September 13, 2010 Share Posted September 13, 2010 Any tag or attribute in HTML that gives color, backgrounds, font styles, element size, alignment...Everything that you would use to make your page pretty is not permitted when using a strict DTD.Also, if you validate your pages, then it will tell you what's allowed and what's not. Hence it's purpose for being. Link to comment Share on other sites More sharing options...
Abby Posted September 13, 2010 Author Share Posted September 13, 2010 Also, if you validate your pages, then it will tell you what's allowed and what's not. Hence it's purpose for being.But will it tell me why? In other words, will it tell me it's because I'm using the wrong dtd at the top of the page? Otherwise, I'll just be mystified, thinking, "But this webpage says that these tags are totally fine. Why does the validator think they're wrong?"Should I be using XHTML tags at all? I only started using them because this site says HTML tags are deprecated. Why is there a difference, and what's the purpose of this difference? Link to comment Share on other sites More sharing options...
thescientist Posted September 13, 2010 Share Posted September 13, 2010 Ok, here's the run down. If you are using XML within your application/web page, use an XHTML Strict DTD. If not, use the HTML 4.01 Strict DTD.Based on the DTD you are using, if you have errors on the page, the validator will tell you why relative to the DTD you are telling the page to validate against. Link to comment Share on other sites More sharing options...
boen_robot Posted September 13, 2010 Share Posted September 13, 2010 There's a difference as to whether a page displays at all and if it displays as intended.HTML, as implemented in browsers, is a very forgiving language. You have to make serious mistakes to throw it off into not displaying anything or make it display total garbage. However, when you write code with errors, the browser may recover from it in a way you didn't anticipate, eventually creating small problems that add up.The validator makes certain that your code is correct, and therefore, that all browsers, past present and future will read your code in the same way (whether they do the things in the same way is another question, but having them read what you want them to do is the first step).XHTML 1.0 is a version of HTML 4.01 that is supposed to be read with XML parsers. XML parsers are nothing like HTML parsers (the subprogram each browser uses to read your HTML file) - they are very unforgiving even to small (syntax) errors, and will stop displaying anything at the first sign of trouble, and show you an error message at that point.And here comes a little piece of history that should explain to you why you need the validator for all errors even for XHTML - regardless of what your code looks like, if the file is saved with an ".html" extension*, the browser will always use its HTML parser. You need to save the file with an ".xhtml" exntesion** to make the browser use its XML parser. Doing so however means your file won't work in IE8 and below, so what most people do is to save their file as ".html", and use the validator to validate the document as XHTML. When the time is right to switch to XHTML (IE9 supports it, so the time is coming...), you can just change the extension and have it "just work". In the meantime, having a valid XHTML 1.0 code be read as HTML doesn't create problems.There's also one other thing... Even XML parsers in browsers don't "validate" the document by default... they just check for syntax errors... it's a long story, but the bottom line is that even with ".xhtml" extension, the validator will be needed for some kinds of error checks - the kind of errors that are wrong because (you wanted the "Why?", right?) the (X)HTML specification has never intended things to be ordered/present the way you're ordering/using them.There's no reason not to use XHTML 1.0, but make sure to use the validator. There's no difference now, from your stand point, but there is a difference now from power users' stand point, and there will be a difference for you as soon as IE9 is the dominant IE version.* Also if with any extension it is "served with the text/html MIME type" (unless you deal with PHP, you don't need to know what that means).** Or make the file be "served with the application/xhtml+xml MIME type" (again, no need to know what that means unless you deal with PHP and the like). Link to comment Share on other sites More sharing options...
Abby Posted September 14, 2010 Author Share Posted September 14, 2010 This is all very informative. I'm not using XML on my site, and I don't even know what XML is. So basically, I should stick with good old HTML. I'm going to go back and make some changes. And finally start on a new page ... I was hoping to see my site overhauled in less than a month.I assume that files with the extension .HTML will work for many years to come? Link to comment Share on other sites More sharing options...
Abby Posted September 14, 2010 Author Share Posted September 14, 2010 One more question. Many pages on my website use a transitional, loose dtd (including my home page, here). Is there a better dtd I should use? One of you said strict dtd gets the best results, but my page is in Standards Compliance Mode--at least, in Firefox. I tried a strict dtd on one of the transitional/loose pages, and it messed up the margins and spacing around the page, especially around the menu, which is cgi. As I rebuild my website, I'd like to know when I should use a transitional, loose dtd, and when I should use a strict one. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 14, 2010 Share Posted September 14, 2010 I would suggest, if not using iframes (which i find annoying strict does not support, or offer some sort of working alternative) then go the strict route, else use transitional, i notice in your page you also use target="_blank" (another annoyance, that strict does not supprt it), this is not supported in strict but there is a javascript work around. if you require it.Do you use dreamweaver at all? it has a function to convert all old styling tags to new, and html to XHTML in one go. I personally prefer to use xhtml. Link to comment Share on other sites More sharing options...
boen_robot Posted September 14, 2010 Share Posted September 14, 2010 Let me repeat the last part of my last post... There's no reason not to use XHTML 1.0, but make sure to use the validator. There's no difference now, from your stand point, but there is a difference now from power users' stand point, and there will be a difference for you as soon as IE9 is the dominant IE version.So,Ok, here's the run down. If you are using XML within your application/web page, use an XHTML Strict DTD. If not, use the HTML 4.01 Strict DTD.Is a little misleading... If you want your document to be readable by XML parsers (those of other people; not necessarily you), you must use one of the XHTML DTDs, and be valid against it. If not, there's no difference whether you're using an XHTML DTD or an HTML 4.01 DTD, as long as you have any DTD and are valid against it.=> Use XHTML. There's no reason not to.As for Strict vs. Transitional... for existing pages, validate against Transitional first, and then try to move to Strict. That's why they call it "Transitional" - you're supposed to reach a minimum base line of code sanity, after which you can start to try and do things the "right" (Strict) way. For new pages, use Strict, and keep validating to it as you're developing - don't finish the thing before you start validating. Link to comment Share on other sites More sharing options...
jeffman Posted September 14, 2010 Share Posted September 14, 2010 When we all (eventually) migrate to HTML5, there will be no transitional mode. It will all be strict. If you expect to be doing this for a while, you might as well get into the habit now.As we noted in another thread, a transitional+loose DTD will trigger "almost standard" mode, even in IE, and the differences are very small. However, IE is prickly about HTML that does not comply with the DTD, and will easily slip into quirksmode, which messes up the box model. You don't want that. So, as everyone else is saying, be sure your page validates. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.