The role of DOCTYPE

Source: Internet
Author: User

Before using DW or vs to write HTML, doctype default appearance, did not understand its role, in watching HTM5, said DOCTYPE also made some changes, just know the role of the original DOCTYPE is more important, on-line learning Information simple summary, for later review

Browser is divided into two modes, one is the standard mode, one is the strange mode, the use of tools to develop HTML automatically generated by the standard mode. Both of these patterns are distinguished by the definition of DOCTYPE.

What is Doctype,doctype is a document type declaration of a standard generic markup language that tells the standard generic markup Language parser what document type definition (DTD) to use to parse a document

DOCTYPE is the first concept of XML, in XML it is defined by a specific syntax, as a metadata, to describe the elements allowed in the XML document, as well as the composition of the elements, rules, etc.

DOCTYPE in the HTML role is to trigger the browser's standard mode, if the HTML omitted doctype, the browser will go into the quirks mode of the strange state also known as compatibility mode, in this mode, some styles, layout and standard mode differences, HTML standard, DOM standards only specify the behavior of the standard mode, not the quirks mode, so different browsers in the quirks mode of processing is also different, the application of quirks is difficult, so need to use caution

There are three modes of DOCTYPE in HTML4

Strict mode: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "Http://" >.

Transition mode: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://" >.

Frame mode: <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 frameset//en" "Http://" >.

Because the browser is fault-tolerant, in fact, the use of these three models is not very strict, the browser can correctly resolve the user's desired results, so

In HTML5, DOCTYPE is simplified into <!. DOCTYPE html>

But for backwards compatibility, extensibility, and so on, HTML5 also defines several other combinations

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.0//en" >


<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" >


<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://" >

<! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://" >

<!doctype HTML System "About:legacy-compat" > (Doctype,about:legacy-compat, which is compatible with the historical legacy of the old age, note that this text is case-sensitive)

The composition of the DOCTYPE is described below:

    1. A paragraph of text, namely <! DOCTYPE, not sensitive to case.
    2. 1 or more spaces.?
    3. Character HTML, same case insensitive.?
    4. 1 or more spaces.?
    5. Character public, case insensitive.?
    6. Continue with one or more spaces.?
    7. A pair of quotation marks or single quotation marks (must match before and after), with a public ID in the quotation marks.
    8. Optional content:

? 1 or more spaces.

? A pair of quotation marks or single quotation marks (must match before and after), enclose a public ID with the preceding

The corresponding system ID.?

9.1 or more spaces.?

10. End tag, i.e. >.

There is a strict correspondence between the public ID and the system ID, and if the specified system ID cannot have a public ID, then the 8th optional content above will not exist. HTML5 completely abandoned the transition and frame-type doctype in HTML4, while integrating the DOCTYPE declaration of XHTML


For the role of DOCTYPE, in the real browsing, only play the role of triggering the standard mode of the browser. Although according to the standard, in an HTML document, DOCTYPE can have other elements, such as several comments, a little space, but in the current state, is not so ideal:

For IE6 to IE9, if there is a comment before doctype, it goes into quirks mode.

For IE6, if an XML declaration exists before DOCTYPE, it goes into quirks mode.

Standard mode and weird mode

As for the performance of the standard mode and the strange pattern,

In the standard mode, the width of the page element is determined by the addition of the width of padding, border, and width;

In the weird mode, the width itself includes the widths of padding and border.

In addition, the standard mode of block-level elements of the classic Center method: set width,margin:0px auto; Not working correctly in weird mode

(organized from the network)

The role of DOCTYPE

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.