/    Sign up×
Community /Pin to ProfileBookmark

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!

to post a comment
HTML

6 Comments(s)

Copy linkTweet thisAlerts:
@Kevin2Jan 07.2014 — 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"
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 08.2014 — 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! :-)
Copy linkTweet thisAlerts:
@rtretheweyJan 08.2014 — 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.
Copy linkTweet thisAlerts:
@Major_PayneJan 08.2014 — 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/general/but-it-doesnt-validate/
Copy linkTweet thisAlerts:
@PeterPan_321authorJan 08.2014 — 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?
Copy linkTweet thisAlerts:
@rtretheweyJan 08.2014 — 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.
×

Success!

Help @PeterPan_321 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.15,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...