Tong-Pak-Fu
Admin
Number of posts : 229
Registration date : 2007-03-24
 |  Subject: Document Type Declaration  Sat Mar 24, 2007 10:56 pm | |
| Most web author doesnt know what DOCTYPE does or what they are. In a lot of cases, web pages don't have a DOCTYPE element at all.This articles will discuss about the most important part of Hypertext Markup Language - The Document Type Declaration (DTD) or DOCTYPE. Table of Content: 1. Part I * Why is DTD Important? o Browser War o The Consequence o The Problem o The Solution o Render Mode o How to test it o What the diferrences? 2. Part II * The Doctype o Wrong Doctype o List of doctype o Deprecated HTML 4.0 Tag 3. Part III * Validation Tools o HTML and XHTML Validator o Web Accessibility Validator o Related Articles 4. Summary Why is DTD important? Lets turn the clock back in year 1995-1997, The Time when the Browser War started. Just after Internet Explorer taken over Mosaic Browser (The original IE) and the first commercial release of Cascading Style Sheet (CSS). On that time both Netscape Navigator 4 & Internet Explorer 4 had flood the browser with specific features & stylesheet model and far away from the W3c Standardardisation. Because of these changes many web developer had to write a specific code for base on browser type.Thus flooding the net with non web compliance site. quotation like "best view this browser" & "best with these" is very common at that time. and the first browser war end in 98 when Netscape give the source to open source project called Mozilla. The Consequence a. Different proprietary features. such as the HTML tags <layer>, , <marquee>, <blink>
b. Typical browser-only "features" ie ActiveX and Microsofts DHTML implementation. 'style=fiter()'..
c. Incorrect use of attributes: size, face, bordercolor, marginwidth, marginheight, topmargin, leftmargin
When u have either of the thing above..
* Your pages dont comply with W3C recommendations, or were written to accommodate certain bugs, It will look right in the old browsers, but might not look right in the new browsers.
* Your pages "do" comply with W3C recommendations but might not look right in the old browsers, but will look right in the new browsers.
The Problem
Browser vendors were aware that both authors and visitors will blame the browser if the old pages, which used to look fine in the old browser, all of a sudden dont look right in the new browser. Therefore, compliance with W3C recommendations became a problem too.
Do we write web pages to conform to the W3C standards, or write them to account for browser bugs?
Solution
Microsoft (MAC IE Team) and Mozilla start the initiative. The solution was rendering modes or doctype sniffing. The first mode, known as quirk or compatible mode, renders the pages like the old fashion way. The second mode, known as standard or compliant mode, renders them like the pages should be rendered according to W3C recommendations. The technical details about these modes can be found below.
To trigger the Render Mode, both Microsft and Mozilla decided to use the document type declaration, If the document type declaration is of type A, then switch into standard mode. If the document type definition is of type B, or if no document type definition is found, then switch into quirk mode.
Render or Layout Mode
To address the conflicting goals of backwards compatibility and W3C conformance, contemporary browsers have two or three layout modes.
* Quirks Mode / backCompat
In the Quirks mode the browsers violate W3C Recommendations in order to achieve backwards compatible layout. Different browsers implement different quirks. Therefore, “Quirks mode” is not a single target. For example, Mozilla focused on imitating Netscape 4.x initially. Windows IE 6, on the other hand, is focused on imitating Windows IE 5.
The point of the Quirks mode is avoiding “breaking” old pages. If you are authoring new pages now, you are supposed to comply with the relevant specifications (CSS 2.1) and target the Standards mode.
* Standard Mode / strict
In the Standards mode the browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser.
* Almost Standard Mode
Mozilla, Safari and Opera 7.5 also have a third mode known as “the Almost Standards mode”, which implements the vertical sizing of table cells traditionally according to the CSS2 specification. Mac IE 5, Windows IE 6, Opera prior to 7.5 and Konqueror do not need an Almost Standards mode, because they don’t implement the vertical sizing of table cells rigorously according to the CSS2 specification. In fact, their Standards modes are closer to Mozilla’s Almost Standards mode than to Mozilla’s Standards mode. It is important to remember that even though the various browsers have conceptually similar modes, the corresponding modes of the different browsers are not identical.
How to test it
So how do you know if the browser renderthe page correctly? If you are using Firefox right click on the page and select View Page Info. and check the 'Render Mode', for others type of browser MSIE, OPERA or Gecko You will need to write the below code on your address bar (ctrl+l).
code
java script:alert(document.compatMode)
if the alertbox return backCompat it meant the page is render in quirk mode. otherwise it will return CSS1Compat for standard mode.
Example of quirk mode & standard mode : http://www.w3.org/International/articles/s...w.en.php#quirks
What is the difference
1. Standard Mode
* all elements will inherit styles, including table elements, which have a hard time inheriting text colors and styles in quirky mode.
* font-size: medium text will be the same size as unstyled text.
2. Quirk Mode
* In quirky mode, unstyled text is the same size as small.
There may be other differences, but they are not likely to be documented.
* Internet Explorer Box model bug
* Older version of Opera Browser (<7), doesnt react to quirks modes.
Note: neither the HTML 4.01 specification nor ISO 8879 (SGML) says anything about using the document type declaration as a layout mode switch. Doctype sniffing is based on the observation that at the time doctype sniffing was devised the vast majority of quirky documents either didn’t have a document type declaration or they referenced an old DTD
I hope this explain alot of point why you'll need to declare the right Doctype. DTD is the key component of true compliant web pages. All your html element, markup, and stylesheet wont validate and parse correctly without them.
The Doctype
Lets begin with the basic, if you aren't familiar with the DOCTYPE element, it's quite simply an element used to declare what language (and its level) a document uses, and optionally what document type definition (DTD) is to be used in its handling. In other words, the document type. For example, a fully compliant HTML4 document would bear this doctype:
ecma
<DOCTYPE>
On the other hand, a "loose" or transitional HTML4 document could have:
ecma
<DOCTYPE>
"http://www.w3.org/TR/REC-html40/loose.dtd">
These element, by the way, usually appear on the very first line of a document. lets break the code apart..
* <!DOCTYPE html PUBLIC - The Generic Indentifier,
* //W3C - signature.. Public Identifier ie "Microsoft", "Netscape", "Sun Microsystems Corp"
* DTD HTML 4.01 - The Markup Language version & Document standard.
* EN - Language
* http://www.w3.org/TR/html4/strict.dtd the filesource.
Wrong Doctype
Dreamweaver 4 has some issue with declaring the doctype. below is an example of wrong doctype declaration.
ecma
<DOCTYPE>
The URI of the DTD is pointed to relative path DTD/xhtml1-strict.dtd. Where it should be written like the below code.
ecma
<DOCTYPE>
unless you intent to save the DTD/xhtml1-strict.dtd in your server directory. the rules might change this just to point out that lot of the web pages out there had this same problem.Probably result of WYSWYG editor or direct copy from w3c site.
List of Doctype and Rules
source from http://www.w3c.org
*
HTML 4.01
o Strict
Document validates as HTML 4.01 Strict (may not contain deprecated markup) and works with the CSS2. frames and link target are not allowed. also element like images, animations, audio, video should have a text equivalents. (alt)
+ The HTML 4.01 Strict document type declaration
ecma
<DOCTYPE>
+ Example html 4.01 Strict
html
<DOCTYPE>
<HTML>
<HEAD>
<TITLE>HTML 4.01 Strict</TITLE>
</HEAD>
<BODY>
<P>...some text...
</BODY>
</HTML>
were so called strict because many of presentational components like is handle through style sheets.
o Transitional
HTML 4 Transitional includes all elements and attributes of HTML 4 Strict but adds presentational attributes, deprecated elements, and link targets is allowed. works with the CSS2
+ The HTML 4.01 Transitional document type declaration
ecma
<DOCTYPE>
+ Example html 4.01 Strict
html
<DOCTYPE>
<HTML>
<HEAD>
<TITLE>HTML 4.01 Strict</TITLE>
</HEAD>
<BODY>
<P>...some text...
</BODY>
</HTML>
o Frameset
HTML 4 Frameset is a variant of HTML 4 Transitional for documents that use frames. The only differences is The FRAMESET element replaces the BODY in a Frameset document.
An HTML document that describes frame layout (called a frameset document) has a different makeup than an HTML document without frames. A standard document has one HEAD section and one BODY. A frameset document has a HEAD, and a FRAMESET in place of the BODY.
The FRAMESET section of a document specifies the layout of views in the main user agent window. In addition, the FRAMESET section can contain a NOFRAMES element to provide alternate content for user agents that do not support frames or are configured not to display frames.
Elements that might normally be placed in the BODY element must not appear before the first FRAMESET element or the FRAMESET will be ignored.
+ The HTML 4.01 Frameset document type declaration
ecma
<DOCTYPE>
+ example html 4.01 frameset document
html
<DOCTYPE>
<HTML>
<HEAD>
<TITLE>A frameset document</TITLE>
</HEAD>
<FRAMESET>
<FRAMESET>
<FRAME>
<FRAME>
</FRAMESET>
<NOFRAMES>
...some text...
This page contain frame
...some text...
</NOFRAMES>
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
*
XHTML 1.0
o <DOCTYPE>
o <DOCTYPE>
o <DOCTYPE>
*
XHTML 1.1 DTD
o <DOCTYPE>
Deprecated HTML 4.0 Tag
A number of elements and attributes are deprecated in HTML 4.0 as an indication that other methods of accomplishing the same task are preferred. This presentational elements and attributes are deprecated in favor of style sheets where you can have more control over your elements.
1. | |
|
