Enlytend Solutions

  • Services
    • Search Optimization
    • Online Advertising – Adwords, Bing, Facebook
    • Search Optimization for Local Businesses
  • About
  • Blog
  • Contact
  •  CALL: 1-201-477-8853
You are here: Home / Blog / How To / What’s up, Doc(type)?

What’s up, Doc(type)?

August 31, 2007 By MG

web page browser problemsDoes your new web design look slick and professional in Firefox but more like a ransom note in Internet Explorer 7? Frustrated by the seemingly impossible task of trying to get your web site to look the same across multiple browsers?
Just a few years ago, back in the days of the dreaded Netscape 4, web developers had to write lines and lines of css “hacks” to make pages work across all popular browsers and platforms. While modern browsers still have their differences, the gaps have narrowed dramatically as they’ve become increasingly standards compliant.

If you’re still having major problems with cross-browser page rendering, it could be something as simple as your Doctype!

A doctype is a statement which should be the first line of all your web pages. I emphasize “should” because I’m surprised at the number of times I look at the source code for a page and find it missing! Lots of automated site building software is guilty of this omission, including older versions of Microsoft’s FrontPage.

What is a Doctype?

Simply put, the doctype is a statement which tells browsers how to interpret the code on the rest of the page. It tells the browser what “rules” to apply, including which html tags and attributes are to be considered valid.

What many people fail to realize is that using certain doctypes or none at all will tell modern browsers to drop back and emulate earlier versions of themselves. Commonly called “quirks mode” or “compatibility mode”, this can do some very strange things – for example it tell IE7 to emulate all the oddities that were present in IE5, like the “box model” issues!

Which Doctype to use?

If you want standards-compliant rendering across a number of browsers, there are 3 options I recommend for most web sites (sites using Frames and sites intended for mobile devices have their own considerations which I’m ignoring for now).

HTML4.01 Strict – Currently, this is my first choice for most new sites. What? No XHTML, you say?

Due in part to issues concerning the suitability of XHTML for ordinary web pages W3C has committed to the future of HTML and is working on development of the standards for HTML5.0. HTML is very much alive and well and perfectly suited to most web sites.

The proper doctype for HTML4.01 Strict is:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

HTML4.01 Transitional – “Transitional”, you say? Yes, this is a standards compliant doctype as long as you use the entire statement. The correct doctype for HTML4.01 Transitional is:

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

It is frequently abbreviated to:

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

THIS IS NOT THE SAME THING! The shortened “half doctype” version will throw browsers into quirks mode!

When would you choose HTML4.01 Transitional? Generally it’s useful if you have a table-based website layout or complex tables (it actually makes Firefox render in something called “almost standards” mode – you can learn more about that here). Or if you insist on using deprecated html tags like <center> or <font>.

XHTML – Transitional or Strict:

I don’t recommend XHTML for reasons I hinted at earlier (the analysis I referenced is a must-read, so I’ll link to it again), but if you insist on using it, here are the correct doctypes for XHTML1.0 transitional:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

or XHTML 1.1:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

Make sure you code to the standards of the version you use !

Note that if you put anything before the doctype, including an xml prolog or a blank line, IE will drop back to quirks mode rendering!

For more information on all of thesethese doctypes, see their respective dtd’s at W3C.org.

Legacy sites:

If you’re modifying a page which already “works” in compatibility mode, don’t go adding or changing the doctype unless you have plenty of time to retest and make the appropriate changes. If it ain’t broke, don’t fix it!

If your page STILL looks dramatically different across common browsers, it could be because of invalid code. I’ll talk about that some other time.

[tags]web sites, web development, doctype, browsers, web standards, web design[/tags]

Share this:

  • Click to share on Facebook (Opens in new window)
  • Click to share on Twitter (Opens in new window)
  • Click to share on Google+ (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • More
  • Click to share on Pinterest (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Pocket (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to email this to a friend (Opens in new window)

Filed Under: How To, Web development

Stay in touch!

Follow @enlytend on Twitter

Find Enlytend Solutions on Facebook

FInd us on Facebook

Tags

Adwords business listings citation spam Digital Marketing Domain Names domain parking how to internet marketing keyword research local search mobile seo panda search penalty selling a domain small business technical seo traffic drops yahoo business listing yahoo local

Get in touch!

Enlytend Solutions, LLC


River Edge, NJ 07661

  Phone:  1-201-477-8853
   Email Us

Get started!

Ready to talk to us about your project? Use our contact form to drop us a note and we'll get in touch with you as soon as possible!

Follow us

  • Facebook
  • Twitter

Copyright © 2021 · Enlytend Solutions, LLC · All rights reserved

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.