Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Dec 2010
    Location
    Sheffield, UK
    Posts
    138
    Thanks
    81
    Thanked 1 Time in 1 Post

    HTML Doctype Confusion

    Okay, when I first learn HTML, I basically learn from trial and error as I went along, and didn't really sit down to properly learn it as far as I can remember. As a result of this, I've missed out a lot, and therefore, I've decided to start from the basics for my own benefit. So here I am, (re-)learning HTML.

    Now, my question - the <!DOCTYPE> tag confuses me more than any other HTML tag I've ever come across, so I've come here to clear up any questions I have regarding it so I can use it confidently.

    Firstly, can someone explain to me why it's necessary to use a <!DOCTYPE> tag in your webpages? They work fine without them, don't they? I've read that it is so it can be validated against the standards of the W3C, but that's all I know. A little more detail would be appreciated.

    Secondly, after reading up on it, I'm still confused as to what exactly goes in my <!DOCTYPE> tag and how to type it out. For example, this is one kind of DOCTYPE I've seen used:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD      XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Yet I've also seen other variations, and from what I've read, there are different DOCTYPES to validate against - it's all so very confusing, which should I use in my webpages if I was going to use one?
    http://www.topcashback.co.uk/ref/hashim1

    ^
    Total earnings so far: £25.15
    A very generous cashback site worth checking out.


  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,680
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    First of all, the document type declaration is not an HTML tag, it’s an SGML declaration (look up Wikipedia on SGML if you really wanna get lost). Basically it defines what HTML actually is. There are multiple sources on the internet explaining what the doctype is an what it’s there for but I’m giving you a simplified explanation anyway:

    See the URL in the doctype you posted? http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd You can paste that into the address bar of your browser and download that file. It is a text document where all the elements and their attributes are defined that make up HTML. The doctype declaration tells the parser (e. g. the browser) what kind of document it actually is that you just called up. And there is not just the HTML doctype, there are also doctypes for MathML and SVG, for example.

    Now, if you don’t provide a doctype declaration the browser is good at guessing what document type you provide (e. g. by the file extension) but there is a difference. In the early days of HTML it didn’t matter much because HTML had a few simple elements for marking up text, and there was only one browser. But when the browser wars began every browser implemented their own custom elements which were not necessarily compatible in other browsers. This is when browser creators and other developers sat together and established the World Wide Web Consortium (W3C) which created a common standard HTML specification that was supposed to be followed. This specification is reflected in the document type definitions, there it is defined what is “valid” and “invalid” HTML.

    Now, with this standard specification browser creators considered all HTML without a doctype as old, non-standard HTML and they invented a browser switch with two modes, quirks mode and standards mode, for an advancement in technology while still maintaining backwards compatibility. Pages without doctype are rendered in quirks mode and those are rendered differently (which becomes especially obvious in older versions of Internet Explorer).

    For additional backwards compatibility (and ease for website developers), in HTML version 4 the W3C implemented three different HTML specifications/document types: strict HTML, transitional HTML and frameset HTML. The “strict” HTML specification has removed a lot of elements and attributes that were considered obsolete and it would require a lot of code rewriting in old websites for the web developers to adhere to the new standards. That’s why the transitional specification was introduced. It is, as the name implies, for the transition of old, non-standard HTML to standards compliant HTML. It was made for website developers to simply put it in their old websites to switch from quirks mode to standards mode and slowly make the transition to modern code without too much rewriting at once. The transitional doctype still allows a lot of presentational HTML attributes that were actually removed or not present in the strict specification. I won’t go into detail for the frameset specification since that’s something we shouldn’t even think about anymore. With the introduction of XHTML (HTML as a subset of XML, not of SGML) they just carried over the different specifications.

    That said, in current websites the only document type definition we want to use is the “strict” one (unless you get a website from 1995 on your desk that you are supposed to modernize gradually), either HTML or XHTML, depending on what you want to use. Therefore the only doctypes you need are:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    for “classic” HTML or
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    for XHTML.
    You can spot the difference in the doctype you posted and the ones above this sentence in the URLs used. There is also a list of standard doctypes where you can easily compare the differences.

    Now, we’re on the step to the next version of HTML, that is version 5. There they removed all the different specifications and there is just one “strict” specification. That’s why there is no need for the DTD URL anymore and the declaration is really short:
    Code:
    <!DOCTYPE html>
    Note that HTML 5 is still a working draft, though.

    I hope that clarifies a few things.

  • Users who have thanked VIPStephan for this post:

    Hashim1 (02-18-2012)

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Location
    Sheffield, UK
    Posts
    138
    Thanks
    81
    Thanked 1 Time in 1 Post
    Quote Originally Posted by VIPStephan View Post
    First of all, the document type declaration is not an HTML tag, it’s an SGML declaration (look up Wikipedia on SGML if you really wanna get lost). Basically it defines what HTML actually is. There are multiple sources on the internet explaining what the doctype is an what it’s there for but I’m giving you a simplified explanation anyway:

    See the URL in the doctype you posted? http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd You can paste that into the address bar of your browser and download that file. It is a text document where all the elements and their attributes are defined that make up HTML. The doctype declaration tells the parser (e. g. the browser) what kind of document it actually is that you just called up. And there is not just the HTML doctype, there are also doctypes for MathML and SVG, for example.

    Now, if you don’t provide a doctype declaration the browser is good at guessing what document type you provide (e. g. by the file extension) but there is a difference. In the early days of HTML it didn’t matter much because HTML had a few simple elements for marking up text, and there was only one browser. But when the browser wars began every browser implemented their own custom elements which were not necessarily compatible in other browsers. This is when browser creators and other developers sat together and established the World Wide Web Consortium (W3C) which created a common standard HTML specification that was supposed to be followed. This specification is reflected in the document type definitions, there it is defined what is “valid” and “invalid” HTML.

    Now, with this standard specification browser creators considered all HTML without a doctype as old, non-standard HTML and they invented a browser switch with two modes, quirks mode and standards mode, for an advancement in technology while still maintaining backwards compatibility. Pages without doctype are rendered in quirks mode and those are rendered differently (which becomes especially obvious in older versions of Internet Explorer).

    For additional backwards compatibility (and ease for website developers), in HTML version 4 the W3C implemented three different HTML specifications/document types: strict HTML, transitional HTML and frameset HTML. The “strict” HTML specification has removed a lot of elements and attributes that were considered obsolete and it would require a lot of code rewriting in old websites for the web developers to adhere to the new standards. That’s why the transitional specification was introduced. It is, as the name implies, for the transition of old, non-standard HTML to standards compliant HTML. It was made for website developers to simply put it in their old websites to switch from quirks mode to standards mode and slowly make the transition to modern code without too much rewriting at once. The transitional doctype still allows a lot of presentational HTML attributes that were actually removed or not present in the strict specification. I won’t go into detail for the frameset specification since that’s something we shouldn’t even think about anymore. With the introduction of XHTML (HTML as a subset of XML, not of SGML) they just carried over the different specifications.

    That said, in current websites the only document type definition we want to use is the “strict” one (unless you get a website from 1995 on your desk that you are supposed to modernize gradually), either HTML or XHTML, depending on what you want to use. Therefore the only doctypes you need are:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    for “classic” HTML or
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    for XHTML.
    You can spot the difference in the doctype you posted and the ones above this sentence in the URLs used. There is also a list of standard doctypes where you can easily compare the differences.

    Now, we’re on the step to the next version of HTML, that is version 5. There they removed all the different specifications and there is just one “strict” specification. That’s why there is no need for the DTD URL anymore and the declaration is really short:
    Code:
    <!DOCTYPE html>
    Note that HTML 5 is still a working draft, though.

    I hope that clarifies a few things.
    That's brilliant, Stephan, thanks for that - explains them in pretty much the detail I wanted. Also, should I use the Strict DOCTYPE always then, when creating my own webpages? If I did so, would it not limit the tags I could use?

    Also, one more thing - I can't for the life of me understand the difference between HTML and XHTML. Am I right in thinking that XHTML is just another version of HTML which is based on XML and a lot stricter in terms of syntax (i.e. correct nesting, properly-clased tags, etc.)? What would be the difference in me using XHTML in my webpages as opposed to ordinary HTML? As with the STRICT doctype, would it limit my use of certain tags?

    Thanks for all your help so far, and thanks in advance for any further help. It has so far helped clear up a lot.
    http://www.topcashback.co.uk/ref/hashim1

    ^
    Total earnings so far: £25.15
    A very generous cashback site worth checking out.


  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    No the strict doctype doesn;t limit what tags you can use. Unless you're referring to HTML5 specific tags, which are not yet fuly supported by all browsers.

    What strict does limit is sloppy poorly form markup.

    With that said, its always recommended to build new pages with the strict doctype. Transition doctypes were meant to transition older sites into a more modern semantic markup without breaking the layout so much. But new sites and pages should use the strict doctype. You can be assured that the html 4.01 strict doctype is fully supported with all modern browsers and will give you the best semantic markup. Provided you code it properly

    Remember the use the validator often!
    Teed

  • Users who have thanked teedoff for this post:

    Hashim1 (02-18-2012)

  • #5
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Basically the transitional doctypes allow you to use the HTML 3.2 tags for defining page appearance that were replaced by CSS back in 1997. The doctype was intended for those pages that already existed in 1997 where the owner wanted to start converting to using HTML 4 - the two versions of HTML are different enough that a doctype that allows both in the same page was required in order to avoid people being unable to actually convert pages - since it can take a long time to update a really big site.

    <!DOCTYPE HTML> is the short version of the SGML doctype for HTML 2 through HTML 4 and is an HTML tag in HTML 5 as HTML 5 no longer follows the markup standards. It can be used with any web page using any version of HTML except HTML 1.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #6
    New Coder
    Join Date
    Sep 2011
    Location
    United Kingdom
    Posts
    74
    Thanks
    2
    Thanked 3 Times in 3 Posts

    Question

    What is with the Doctype for <iframe> tags ?

    I have several <iframe> which are embed a external site. I thought that I can only few Frames if the Doctype is set to Transitional or Frameset. Have I been wrong ?

    I Changed my Doctype to strict but I still can see my iframe ?

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by clausrei View Post
    What is with the Doctype for <iframe> tags ?

    I have several <iframe> which are embed a external site. I thought that I can only few Frames if the Doctype is set to Transitional or Frameset. Have I been wrong ?

    I Changed my Doctype to strict but I still can see my iframe ?
    The browsers ignore the doctype in deciding what tags they accept. If you have a strict doctype and have not transitioned from <iframe> to <object> tags then the validator will give you an error but the browsers will still accept and process the page. It is considered poor practice to label a page as strict HTML 4 when the page still contains HTML 3.2 tags - the page should be labelled as transitional when you do that as you haven't yet finished transitioning the tags.

    When you do finish converting all your iframe tags to object tags then you canchange the doctype back (assuming everything else in the page is also valid HTML 4).

    The only thing that browsers actually use the doctype for is in testing whether the page actually has one or not. It was not common to include one when IE5 introduced CSS2 while it was still in draft. As the final CSS2 standard was different from the draft version IE5 supported Microsoft needed a way to support both in IE6 and so started testing for the existence of a doctype to choose between the two versions. Presumably once HTML 5 becomes an actual standard there will be a new doctype introduced to distinguish between that and the current draft as there will almost certainly be lots of changes before that becomes a standard. Having been caught out once with CSS2 Microsoft is not rushing to implement much of the HTML 5 draft as that will safe them a lot of effort in reworking things once all the unnecessary tags and attributes are dropped and the meanings of the others are changed to what actually makes sense for the final standard version.
    Last edited by felgall; 02-18-2012 at 10:52 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    clausrei (02-20-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •