www.webdeveloper.com
Results 1 to 7 of 7

Thread: Surprising importance of DOCTYPE! What happened here?

  1. #1
    Join Date
    Jun 2004
    Location
    Tampa, Florida
    Posts
    77

    Exclamation Surprising importance of DOCTYPE! What happened here?

    I knew the DOCTYPE tag was there to tell the browser something about the rule sets it should use to process the HTML. But I never realized how much it could muck things up, and I wonder if someone can explain what happened here.

    I was on a few cool sites that lets you generate free navigation menus, some with javascript and some with CSS. One that was done 100% in CSS was on a site called "purecssmenu.com", and I really liked it. So I plugged in some menu data and let it generate some code for me, in a samle HTML file.

    Well I have a pretty dated editor, Homesite 5.5 I think, and I used it to try my new menu, creating a default HTML document, then putting all the CSS style stuff in the <head> tag and the html stuff where I wanted the menu in my page.

    Well it worked fine in Firefox, but in IE 8 or IE 9, the dropdown menus would not work. then i noticed that the sample HTML code created for me by the site had a DOCTYPE like this...

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

    When I put that into my rest page, everything worked perfectly in IE. But now, compare that to the default DOCTYPE generated by my Homesite...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    So the only difference is that the one that works actually contains a link to w3c.org. Well like I said, I never paid a huge amount of attention to the DOCTYPE tag, but now that i see the wrong one will break my navigation functionality if I don't get it right, I'm concerned! What if there's some kind of netsplit and a visitor gets to my page, but w3.org can't be reached? And what if I start using HTML 5 for the the new <video> or <audio> tags? Will changing the DOCTYPE to reference HTML 5 start causing problems too?

    I guess I need to understand and pay more attention to this TAG!

  2. #2
    Join Date
    Oct 2013
    Posts
    547
    Well. Hmmm. The dirty little secret is that no browser ever -- ever -- "called home" to check on the DTD for a DOCTYPE. That's what makes the HTML5 DOCTYPE so much more honest: <!DOCTYPE html>. What's happening is that IE is being IE. It is seeing what it determines is a "malformed" DOCTYPE and went schizoid on you. AKA "Quirks Mode"

  3. #3
    Join Date
    Jun 2004
    Location
    Tampa, Florida
    Posts
    77
    So its safe from here on in to just say <!DOCTYPE html>? I did notice that everything worked fine with that too, I was just afraid someone's older browser might get confused.

    Yeah that was an eye opener to me too! "Call Home"!! That's funny! But I'm surprised! If anything I'd always found IE way more tollerant of "malformed" code then some other browsers I like better. Well live and learn i guess! Thanks! :-)

  4. #4
    Join Date
    Mar 2011
    Posts
    1,147
    Well, let's be fair about this. Every major browser defaults to its own "Quirks Mode" unless presented with a complete or qualifying <!DOCTYPE>, not just IE. IE gets the most attention in this area because its (original) Quirks Mode used a non-standard box model, which caused significant layout issues.

    The bottom line is that it's just best practice to use a <!DOCTYPE> that sets browsers to "Standards Compliance Mode" so that they're all at least *trying* to render the page properly according to the W3C standard. If you add a 'reset' stylesheet or create/include your own equivalent, you get very uniform presentation across all browser families.

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    You are missing the URI in the second doctype which is required. Your web editor must be way out dated if that is the doctype generated. A good free editor is CoffeeCup's HTML Editor. You can choose which default doctype you want to use. The w3c.org recommends these doctypes. If in doubt about your HTML/CSS coding, try validating first:

    Why Validate?: http://validator.w3.org/docs/why.html
    CSS Validator: http://jigsaw.w3.org/css-validator/
    HTML Validator: http://validator.w3.org/#validate_by_uri+with_options
    But It Doesn't Validate: http://net.tutsplus.com/articles/gen...esnt-validate/

  6. #6
    Join Date
    Jun 2004
    Location
    Tampa, Florida
    Posts
    77
    I know I tend to overthink backward compatibility. Now certainly for a new site, sure I'll just say <!DOCTYPE html> and be done with it. The glaring worry that comes to mind is this... I have some much older websites that have become pretty popular, and some time ago I started adding my own music compositions, as well as my Videos, by jumping on the FLASH bandwagon. Well now that so many people are browsing on Androids and I-phones, all those features don't work. So I was educating myself about HTML 5, and video and audio conversions, so eventually I could upgrade all my pages that formerly just used FLASH. But if I have to change my <!DOCTYPE> tag to enable HTML5, what will that do to older visitors?

    I know the prevailing wisdom is to just ignore users with browsers 4 or more years old. But I'd rather support back as far as I can. Maybe I have to duplicate these pages, one for HTML 4, and another for HTML5?

  7. #7
    Join Date
    Mar 2011
    Posts
    1,147
    HTML 5 is backwards compatible with older browsers insofar as older browsers will be set to Standards Compliance Mode, but they will obviously lack native support for the new HTML elements and more advanced CSS 3 properties. But it's really only versions of IE < 9 that are the issue, and there are add-ons and scripts that will bring support for a good deal of HTML 5 and CSS 3. Chrome, Firefox, and Safari have supported HTML 5 for a few years now so you don't need to worry about them.

    Overall, there's no reason to wait to update your websites to HTML 5.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles