How to select proper DOCTYPE for a webpage

Now a days, most of the web page authors have started using good editors such as Dreamweaver, UltraEdit, PSPad etc…

So they just don’t bother about what DOCTYPE their site is using.

Moreover, many Web Designers & Web Developers doesn’t know even what DOCTYPE stands for.

DOCTYPE means Document Type and DTD stands for  Document Type Defination.

It would be really helpful if you take care of choosing the perfect DOCTYPE for your web page.

DOCTYPE is nothing but just a declaration for web browser to use the proper set of rules. Else browser is likely to apply wrong rules & may render the page in a wrong way.

Without proper DOCTYPE declaration you may endup with the webpage without cross browser compatibility or a messed up layout design.

Also, without correct DOCTYPE, your code won’t get W3C Validation.

First let’s select weather to use HTML or xHTML

I’ve seen people who believes that xHTML doctype will always provide modern functionalities. That’s absolutely wrong.

xHTML doesn’t means that it’s something Xtra over HTML.

Infact in practical scenario HTML doctype will give you more flexibility and less browser compatibility issues than xHTML.

At the time of introducing xHTML, W3C visualized xHTML as a integrated XML with HTML

XHTML may be the future of the web, or it may not. But for now it’s not what we think . It’s standards are not yet clear.

Also, neither Internet Explorer (the most used browser worldwide) nor Firefox (the most favorite browser of regular Internet users) has adopted xHTML all standards. The rest browsers are still struggling.

moreover, You have to serve it to Internet Explorer with a MIME type of “text/html”, which means that IE treats it as invalid HTML and uses error-correction routines instead of simple standards.

You can serve it correctly to other browsers, but you must arrange content negotiation. When Firefox gets a 100%  XHTML to load , it can’t render the page incrementally and so you won’t see anything until the entire page gets loaded. (this was a bug, and is fixed for Firefox 3 now).

Some people thinks that using xHTML they can have a cleaner code. Which is just a myth.

Compared to xHTML, HTML 4.01 (strict) is more cleaner & flexible.

If you command good over HTML 4.01 then you can assume yourself at the top as HTML 5 is just on the way and you can easily upgrade yourself to code better & cleaner as per the latest standards.

So, I guess this may be too early to use xHTML for commercial purpose.

for your information,

As per W3C, benefits of migrating to XHTML are

  • Document developers and user agent designers are constantly discovering new ways to express their ideas through new markup. In XML, it is relatively easy to introduce new elements or additional element attributes. The XHTML family is designed to accommodate these extensions through XHTML modules and techniques for developing new XHTML-conforming modules (described in the XHTML Modularization specification). These modules will permit the combination of existing and new feature sets when developing content and when designing new user agents.
  • Alternate ways of accessing the Internet are constantly being introduced. The XHTML family is designed with general user agent interoperability in mind. Through a new user agent and document profiling mechanism, servers, proxies, and user agents will be able to perform best effort content transformation. Ultimately, it will be possible to develop XHTML-conforming content that is usable by any XHTML-conforming user agent.

Now let’s select Transitional, Frameset, or Strict type

TypeProsCons
Transitional– can get code easily validated by W3C
– you can use old html tags such as <font>
– you can define basic colors by name
– Dirty coding
Frameset– for designers who wants to create a site using the frames
– Supports best for Framed webpages
– Not preferred by modern definitions of HTML / xHTML
– User can’t bookmark pages properly
– Not preferred by SEOs as search engines can’t index site properly
Strict– Best support by almost all the leading web browsers.
– Least compatibility issues
– Clean code
– Best for one touch effect through site
– Hard for beginner
– Need to remove presentational element tags and MUST use CSS to style

List of Standard DTDs by W3C

DTDTypeDeclaration CodeWhen?
HTML 4.01Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
Habituate yourself to use this most of the time for all your commercial work
Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
When work is not commercial but just for fun, or RnD. Or you need to get it W3C validated as fast as possible without following the strict rules of HTML.
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">
Use this, only when you have frames in a page.

And use frames only if your 80 yrs. old client asks for frame based website.

HTML 3.2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Old version of HTML. You may loose lot of CSS & HTML features. But can finish up the basic HTML work faster.
HTML 2.0
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
For Very basic HTML page with least CSS.
DTDTypeDeclaration CodeWhen
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
XHTML 1.1 is an example of a larger build of the modules, avoiding many of the presentation features. While XHTML 1.1 looks very similar to XHTML 1.0 Strict, it is designed to serve as the basis for future extended XHTML Family document types, and its modular design makes it easier to add other modules as needed or integrate itself into other markup languages
XHTML 1.0Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Use this when you want really clean structural mark-up, free of any markup associated with layout. Use this together with W3C’s Cascading Style Sheet language (CSS) to get the font, color, and layout effects you want.
Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Many people writing Web pages for the general public to access might want to use this flavor of XHTML 1.0. The idea is to take advantage of XHTML features including style sheets but nonetheless to make small adjustments to your markup for the benefit of those viewing your pages with older browsers which can’t understand style sheets. These include using the body element with bgcolor, text and link attributes.
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Use this when you want to use Frames to partition the browser window into two or more frames.
XHTML
Basic 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
This version of XHTML provides a definition of strictly conforming XHTML 1.0 documents, which are restricted to elements and attributes from the XML and XHTML 1.0 namespaces. See Section 3.1.2 for information on using XHTML with other namespaces, for instance, to include metadata expressed in RDF within XHTML documents.

Upcoming Standards

DTDExpected Usage/Benifits
HTML 5.0
  • Defines a single language called HTML 5 which can be written in a “custom” HTML syntax and in XML syntax.
  • Defines detailed processing models to foster interoperable implementations.
  • Improves markup for documents.
  • Introduces markup and APIs for emerging idioms, such as Web applications.
xHTML 2.0In designing XHTML 2, a number of design aims were kept in mind to help direct the design. These included:

  • As generic XML as possible: if a facility exists in XML, try to use that rather than duplicating it.
  • Less presentation, more structure: use style sheets for defining presentation.
  • More usability: within the constraints of XML, try to make the language easy to write, and make the resulting documents easy to use.
  • More accessibility: some call it ‘designing for our future selves’ – the design should be as inclusive as possible.
  • Better internationalization: since it is a World Wide Web.
  • More device independence: new devices coming online, such as telephones, PDAs, tablets, televisions and so on mean that it is imperative to have a design that allows you to author once and render in different ways on different devices, rather than authoring new versions of the document for each type of device.
  • Less scripting: achieving functionality through scripting is difficult for the author and restricts the type of user agent you can use to view the document. We have tried to identify current typical usage, and include those usages in markup.
  • Integration with the Semantic Web: make XHTML2 amenable for processing with semantic web tools.