DOCTYPE declaration functions and usage

Source: Internet
Author: User
Tags color identifier

DOCTYPE is short for document type. It is used to describe the XHTML or HTML version you are using. The purpose of the DOCTYPE statement is to indicate the rule set used by the reader to interpret the mark in the document. Incorrect doctype statements often result in incorrect webpage display, or they cannot be displayed at all. This article describes in detail the role and usage of the DOCTYPE statement. Source: CSDN. NET

I. browser rendering mode and doctype
Some web pages are created based on standards, but many are not. Even if you cannot create a webpage that complies with the standard, you want the browser to correctly display those pages according to the standard. Currently, a large number of webpages are filled with a large number of non-standard code, which can still work normally. In fact, most of the Code designed for the old browser can be correctly displayed in the new browser (although the rendering method may be different ). Why? In fact, strictly following the latest standards will completely undermine the survival basis of those pages. This is of course unacceptable for any browser that wishes to make a difference.

Different rendering modes of different web pages
Modern browsers include different rendering modes to support both standard-compliant Web pages and web pages designed for older browsers. Among them, the Standards (standard) mode (that is, the strict presentation mode) is used to present webpages that follow the latest Standards, while the Quirks (inclusive) mode (that is, the loose presentation mode or compatibility mode) used to present web pages designed for traditional browsers. In addition, note that Mozilla/Netscape 6 adds an Almost Standards (approximate standard) mode to support webpages designed for an earlier standard version.

What is doctype switching?
The doctype statement placed on the top of the webpage is the key to enabling the browser to enter the correct rendering mode. The browser automatically switches to the appropriate rendering mode to correctly display the types of documents specified by the doctype declaration.

Theoretically, this should be a very intuitive switch. If doctype indicates that the current webpage is a document that complies with the standard (that is, HTML 4 + or XHTML 1 +), the browser will switch to the Standards mode. If doctype is not specified, or HTML 3.2 and earlier versions are specified, the browser switches to the Quirks mode. In this way, the browser can correctly display the documents that follow the standards, and will not completely discard the old-fashioned webpages that do not conform to the standards.

Doctype Switching
However, doctype switching is an imperfect solution. Even if you use a doctype declaration in the Web document, the browser may not display the webpage in the desired rendering mode. There are many reasons, including the doctype with incorrect forms, and what are their differences? Xml version = "1.0" encoding = "UTF-8"?>) Including the XHTML web page. However, both IE, Opera, and the old version of Safari want the first line of the document to be the doctype declaration. Therefore, if there is anything else (including XML prolog) before it, doctype cannot be identified. Therefore, the existence of XML prolog will enable IE, Opera, and Safari to enter the Quirks mode. XML prolog is not required, so you can safely omit it on the XHTML webpage. Note: You must include a charset attribute in the http-equiv meta tag to compensate for the missing encoding attribute in the XML prolog.

Lost URL or relative URL:
In the complete doctype declaration, you must include the URL of the Document Type Definition (DTD) file. If a URL is lost or a relative path (instead of a fully qualified Internet address) is specified, most browsers enter the Quirks mode, regardless of the mode specified by doctype.

Doctype with incorrect format:
The browser is very sensitive to the form and format of doctype declarations. If it cannot identify a doctype with a wrong form, it will forcibly enter the Quirks mode (for this reason, therefore, we recommend that you copy and paste a known and correct doctype to the document, instead of entering it in person ). A common cause for the format error of doctype is that a space is missing between the first part of doctype and the URL. Fold the doctype of a Two-row into a single row, and the space is often lost.

Doctype during the transition period:

When the browser processes the doctype during the transition period, inconsistency is the most likely to occur. IE and Opera use Standards mode; Netscape 6 and older versions of Safari use Quirks mode; Netscape 7, Mozilla 1, and Safari use Netscape's Almost Standards mode, it is a version with better fault tolerance in Standards mode.

Unknown doctype:

When processing unrecognized doctype, the browser is inconsistent. IE and Opera enter the Standards mode. In other words, it assumes that unrecognized doctype is a new standard that has not been integrated in the browser. On the contrary, Netscape 6 switches to the Quirks mode when encountering unrecognized doctype.

Doctype switching may be an effective way for the browser to enter the correct rendering mode and display the webpage correctly. The premise is that you have noticed the inconsistency between various browsers and can actively avoid various problems.





2. Use the correct doctype statement

We may ignore this point when we do pages (including humble users who are usually lazy and use the default browser). With the advent of the current webpage coding standardization boom, it is necessary for everyone to understand this detail and it will be useful. As the saying goes, no rule is not a square.

Although the doctype Declaration exists at the top of most Web documents, many people do not pay attention to it. It is one of the many details that can be easily handled by web creation software when you create a document.

Although doctype is ignored by many people, it is a necessary element in any web document that complies with the standards. Doctype affects code verification and determines how the browser displays your Web documents.

Function of doctype
The doctype statement specifies the rule set used by the reader to explain the markup in the document. In the case of Web documents, "reading program" is usually a program such as a browser or a checker, and "rule" is a document type definition (DTD) published by W3C).

Each DTD contains a series of tags, attributes, and properties that are used to mark the content of a web document. In addition, it includes rules that specify which tags can appear in other tags. Each web Recommendation Standard (such as HTML 4 frameset and XHTML 1.0 transitional) has its own DTD.

If the tag in the document does not follow the DTD specified by the doctype Declaration, this document may not be correctly displayed in the browser in addition to code verification. The browser is more tolerant than the validator for marking inconsistent questions. However, incorrect doctype statements often result in incorrect webpage display, or they cannot be displayed at all.

Select the correct doctype
To obtain the correct doctype declaration, the key is to match the DTD with the standards observed in the document. For example, if the document follows the XHTML 1.0 strict standard, the doctype Declaration of the document should reference the corresponding DTD. On the other hand, if the doctype declaration specifies the xhtml dtd, but the document contains HTML tags of the old style, it is not appropriate. Similarly, if the doctype declaration specifies the html dtd, but the document contains the XHTML 1.0 strict mark, which is also inappropriate.

Sometimes, a doctype declaration is not used at all. If no valid doctype declaration is specified, most browsers use a built-in default DTD. In this case, the browser will use the built-in DTD to try to display the tag you specified. For some temporary documents that are too busy to piece together (there are many such documents), you can indeed consider omitting the doctype declaration and accepting the default display of the browser.

You can write a doctype declaration from the beginning and point it to a selected DTD. However, since most Web documents need to follow an internationally recognized Web standard published by W3C, these documents usually contain one of the following standard doctype statements:


<! DOCTYPE html PUBLIC "-// IETF // dtd html 2.0 // EN">

In HTML 3.2:

<! Doctype html public "-// W3C // dtd html 3.2 Final // EN">

HTML 4.01 Strict:

<! Doctype html public "-// W3C // dtd html 4.01 // EN"

HTML 4.01 Transitional:

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"

HTML 4.01 Frameset:


<! Doctype html public "-// W3C // dtd html 4.01 Frameset // EN"

XHTML 1.0 Strict:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN"

XHTML 1.0 Transitional:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"

XHTML 1.0 Frameset:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Frameset // EN"

XHTML 1.1:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.1 // EN"

XHTML 1.1 plus MathML plus SVG:

"-// W3C // dtd xhtml 1.1 plus MathML 2.0 plus SVG 1.1 // EN"

In addition to the doctype declaration listed above, some documents with special requirements also use several other declarations.

The doctype declaration is usually the first line of the document, which must be prior to the

<? Xml version = "1.0" encoding = "UTF-8"?>

To ensure that the webpage is correctly displayed and successfully verified, it is critical to use the correct doctype. Doctype, which is opposite to the content, incorrect, or incorrectly formatted, is the culprit of many problems. In future columns, I will also explain how to diagnose and correct these problems.

When designing a webpage with DW, create a new file and see the following stuff at the beginning of the Code,

<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"

This is because DW automatically adds the DTD information on the webpage file page, which can be deleted. The default DTD used by the browser after deletion.










Start to make a site that meets the standards. The first thing is to declare the DOCTYPE that meets your needs.

View the original code on this page. You can see that the first line is:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "">

Open some standards-compliant websites, such as Macromedia, a well-known web design software developer, and Zeldman, a design master, to find the same code. The code for other standard websites (such as is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Frameset // EN" "">! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "">

The complete code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "">! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "">

What DOCTYPE should we choose?
The ideal situation is of course a strict DTD, but for most of our designers who are new to web standards, the Transitional DTD (XHTML 1.0 Transitional) is currently an ideal choice (including this site, is also a transitional DTD ). This DTD also allows us to use the identifiers, elements, and attributes of the presentation layer. It is also easier to pass W3C code verification.

Note: The "presentation layer identifier and attribute" mentioned above refers to the tags purely used to control the presentation, such as the table used for typographical layout and background color identifier. In XHTML, identifiers are used to represent structures rather than representations. Our purpose of transition is to ultimately separate data from representations.

For example, a human model changes clothes. Models are like data. clothes are the form of representation. Models and clothes are separated so that you can change clothes at will. In HTML4, data and performance are mixed, and it is very difficult to change the form at one time. It's a bit abstract. We need to gradually understand this concept in the application process.

The DOCTYPE Declaration must be placed at the top of each XHTML document, on top of all codes and identifiers.









Iv. official definition of DOCTYPE HTML PUBLIC

! DOCTYPE specifies the document type definition (DTD) that HTML documents follow ).

Added content for Microsoft Internet Explorer 6. You can use this statement to switch Internet Explorer 6 and later versions to standard compatibility mode.

HTML top-level element availability "Registration/organization/type tag // Definition Language" "URL"

Possible Value
Top-level element: specifies the type of top-level element declared in the DTD. This corresponds to the declared SGML document type. HTML default. HTML.

Availability: Specifies whether the FPI is a publicly accessible object or a system resource. Public default. Publicly accessible objects.

System: system resources, such as local files or URLs.

Registration: Specifies whether an organization is registered by the International Standardization Organization (ISO. + Default. The organization name is already registered.
-The organization name is not registered. The Internet Engineering Task Group (IETF) and the World Wide Web Association (W3C) are not registered ISO organizations.

Organization: indicates the owner! Doctype declares the name of the group or organization that creates and maintains the referenced DTD, that is, ownderid. IETF.

W3C: W3C.

Type: Specifies the public text class, that is, the referenced object type. Default DTD. DTD.

Definition: Specify the document type definition. Frameset framework set documentation.
Strict exclude representative attributes and elements that W3C experts want to gradually remove because style sheets are well-developed.
Transitional contains all content except the frameset element.

Language: Specifies the public text language, that is, the natural language encoding system used to create the referenced object. The language definition has been written in the ISO 639 language code (two uppercase letters ). En by default. English.

URL: Specifies the location of the referenced object.


This statement must appear at the beginning of the document and before the HTML Tag.

! The doctype element does not need to disable tags.

This element is available in the HTML of Microsoft Internet Explorer 3.0.

You can use this statement to switch to a strict standard compatibility mode in Internet Explorer 6 and later versions. If you want to enable this function, please include it at the top of your document! DOCTYPE Declaration: Specifies a valid tag in the Declaration. In some cases, you also need to specify the definition and/or URL.

Note that in standard compatibility mode, compatibility with other versions of Internet Explorer cannot be guaranteed. When the standard compatibility mode is enabled, the rendering behavior of the document may be different from that of the future version of Internet Explorer. If the content is fixed (for example, burned on a CD), this mode should not be used.


The following example demonstrates how to use it! DOCTYPE declares the DTD that the document complies with and switches Internet Explorer 6 and later to the standard compatibility mode. The declaration in the following example specifies the compliance with the HTML 4.0 DTD. The second statement specifies "Strict ". The first declaration is not specified. Both declarations will switch Internet Explorer 6 and later versions to the standard compatibility mode.

<! Doctype html public "-// W3C // dtd html 4.0 // EN">
<! Doctype html public "-// W3C // dtd html 4.0 Strict // EN">

The declaration in the following example specifies that the object complies with the "Transitional" HTML 4.0 DTD. The second declaration specifies the dtd url. The first declaration is not specified. The second statement will switch Internet Explorer 6 and later versions to the standard compatibility mode. The first statement does not.

<! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN">
<! Doctype HTML public "-// W3C // dtd html 4.0 transitional // en"

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.