Detailed explanation of the function and usage of DOCTYPE declaration

1. Browser rendering mode and doctype

Some web pages are created to follow standards, but many are not. Even if you can't create standards-compliant web pages, you want browsers to display those pages correctly according to the standards. Currently, many web pages are filled with non-standard code and they still work normally. In fact, most code designed for older browsers will display correctly in newer browsers (although the rendering may be different). What is the reason for this? In fact, strictly following the latest standards would completely destroy the very basis for the existence of those pages. This is of course unacceptable for any browser that hopes to make a difference.

Browser rendering mode

Modern browsers include different rendering modes to support both standards-compliant web pages and web pages designed for older browsers. Among them, Standards mode (also known as strict rendering mode) is used to render web pages that comply with the latest standards, while Quirks mode (also known as loose rendering mode or compatibility mode) is used to render web pages designed for traditional browsers. Also, note that Mozilla/Netscape 6 has a new Almost Standards mode that supports pages designed for an older version of the standards.

What is doctype switching?
The doctype declaration placed at the top of your web page is key to getting the browser into the correct rendering mode. The browser automatically switches to the appropriate rendering mode to correctly display the document type specified by the doctype declaration.

In theory, this should be a pretty intuitive switch. If the doctype indicates that the current web page is a standard (that is, HTML 4+ or XHTML 1+) document, the browser will switch to Standards mode. If no doctype is specified, or if HTML 3.2 or older is specified, the browser switches to Quirks mode. This allows browsers to correctly display documents that follow standards without completely discarding old, non-standard web pages.

Doctype switching problem
However, doctype switching is an imperfect solution. Even if you use a doctype declaration in your web document, the browser may not display the web page in the rendering mode you expect. There are many reasons for this, including an incorrectly formed doctype and a different <?xml version="1.0" encoding="UTF-8"?>) header, including XHTML pages. However, IE, Opera, and older versions of Safari all expect the first line of the document to be a doctype declaration. So, if there is anything else before it (including XML prolog), the doctype won't be recognized. Therefore, the presence of XML prolog will put IE, Opera and Safari into Quirks mode. The XML prolog is not required, so you can safely omit it in your XHTML pages. Note: Be sure to include a charset attribute in the http-equiv meta tag to make up for the missing encoding attribute in the XML prolog.

Missing or relative URL:
A complete doctype declaration includes the URL of the corresponding document type definition (DTD) file. If the URL is missing, or is specified as a relative path (rather than a fully qualified Internet address), most browsers will enter Quirks mode, regardless of the mode specified by the doctype declaration.

Wrong doctype :
Browsers are very sensitive to the form and format of doctype declarations, and will force themselves into Quirks mode if they cannot recognize an incorrectly formed doctype (for this reason, we recommend copying and pasting a known correct doctype into your document rather than typing it in yourself). A common cause of a malformed doctype is a missing space between the first part of the doctype and the URL. Collapsing a two-line doctype onto a single line often loses that space.

Transitional doctype:
Inconsistencies are most likely to occur when browsers handle transitional doctypes. IE and Opera use Standards mode; Netscape 6 and older versions of Safari use Quirks mode; Netscape 7, Mozilla 1, and newer versions of Safari use Netscape's Almost Standards mode, which is a more fault-tolerant version of Standards mode.
Unknown doctype:
Browsers are also inconsistent in how they handle doctypes they don't recognize. IE and Opera will go into Standards mode; in other words, they assume that the unrecognized doctype is a new standard that has not yet been integrated into the browser. Netscape 6, on the other hand, switches to Quirks mode when it encounters an unrecognized doctype.
Switching doctypes can be an effective way to get your browser into the correct rendering mode and display your web pages correctly, provided you are aware of the inconsistencies between browsers and proactively avoid problems.

2. Use the correct doctype declaration

We may usually overlook this point when making web pages (including me, who is usually too lazy to write and uses the browser default). With the current trend of web page coding standardization, it is necessary for everyone to understand this detail, which will be useful. As the saying goes, there is no order without rules.

Although most web documents have a doctype declaration at the top, many people don't pay attention to it. It's one of the many details that Web authoring software takes care of sloppily when you create a new document. Although overlooked by many, the doctype is a required element in any web document that follows standards. The doctype affects code validation and determines how the browser ultimately displays your web document.

The role of doctype

The doctype declaration indicates what set of rules readers should use to interpret the markup in the document. In the case of Web documents, the "reader" is usually a program such as a browser or a validator, and the "rules" are the rules contained in a Document Type Definition (DTD) published by the W3C.

Each DTD includes a series of tags, attributes, and properties that are used to mark the content of a Web document; in addition, it also includes some rules that stipulate which tags can appear in which other tags. Each Web recommendation standard (such as HTML 4 Frameset and XHTML 1.0 Transitional) has its own DTD. If the markup in the document does not follow the DTD specified by the doctype declaration, the document will not only fail to pass code validation, but may also not be displayed correctly in the browser. Browsers are more forgiving than validators when it comes to markup inconsistencies. However, incorrect doctype declarations often cause web pages to display incorrectly, or cause them to not display at all.

Choose the right doctype

In order to obtain the correct doctype declaration, the key is to make the DTD correspond to the standard that the document follows. For example, assuming that the document complies with the XHTML 1.0 Strict standard, the document's doctype declaration should reference the corresponding DTD. On the other hand, if the doctype declaration specifies the XHTML DTD, but the document contains old-style HTML tags, this is inappropriate; similarly, if the doctype declaration specifies the HTML DTD, but the document contains XHTML 1.0 Strict tags, this is also inappropriate.

Sometimes, it is also possible not to use a doctype declaration at all. If no valid doctype declaration is specified, most browsers will use a built-in default DTD. In this case, the browser will use its built-in DTD to try to display the markup you specify. For some temporary, hastily thrown together documents (and there are many of them), you might indeed consider omitting the doctype declaration and accepting the browser's default display.

It is entirely possible to write a doctype declaration from scratch and have it point to a DTD of your choice. However, since most Web documents need to follow one of the internationally recognized Web standards published by the W3C, those documents usually contain one of the following standard doctype declarations:

HTML 2: <!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

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" " http://www.w3.org/TR/html4/strict.dtd ">

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

HTML 4.01 Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.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 ">

XHTML 1.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 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd ">

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

XHTML 1.1 plus MathML plus SVG: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" " http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd ">

In addition to the doctype declarations listed above, several other declarations are used by some documents with special requirements.

The doctype declaration is usually the first line of a document, before the <html> tag and other document content. Note that in XHTML documents, the doctype is occasionally preceded by an XML processing instruction (also called an XML prolog): <?xml version="1.0" encoding="utf-8"?>

To ensure that your web pages display correctly and pass validation successfully, using the correct doctype is critical. An incorrect or malformed doctype that is contrary to the content is the culprit for a large number of problems.

When designing a web page with DW, create a new file and you will see the following thing at the beginning of the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">This is the DTD information automatically added to the web page file page by DW, which can be deleted. After removing it, the browser will use the default DTD.
3. What kind of DOCTYPE to choose

When you start making a standards-compliant site, the first thing you need to do is declare a DOCTYPE that suits your needs.

Looking at the original code of this page, you can see that the first line is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

If you open some sites that meet the standards, such as the famous web design software developer Macromedia and the personal website of design master Zeldman, you will find the same code. Other sites that meet the standards (such as k10k.net) have the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">br >. The complete code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd ">

What DOCTYPE do we choose?
The ideal situation is of course a strict DTD, but for most of us designers who are new to web standards, the transitional DTD (XHTML 1.0 Transitional) is currently the ideal choice (including this site, which also uses a transitional DTD). Because this DTD also allows us to use the logo, elements and attributes of the presentation layer, it is also easier to pass the W3C code verification. Note: The "presentation layer identifiers and attributes" mentioned above refer to tags that are purely used to control presentation, such as tables used for typesetting, background color identifiers, etc. In XHTML, tags are used to represent structure rather than to implement presentation. The purpose of our transition is to eventually separate data from presentation.

For example: a mannequin changes clothes. Models are like data, and clothes are the form of expression. Models and clothes are separate, so you can change clothes at will. In HTML4, data and presentation were mixed together, and it was very difficult to change the presentation form at once. Haha, it’s a bit abstract. We need to gradually understand this concept in the application process.

Replenish
The DOCTYPE declaration must be placed at the top of every XHTML document, above all code and markup.

4. This is how the official definition of DOCTYPE HTML PUBLIC is defined

!DOCTYPE

--------------------------------------------------------------------------------

Specifies the Document Type Definition (DTD) that an HTML document conforms to.

What's new in Microsoft® Internet Explorer 6? You can use this declaration to switch Internet Explorer 6 and later to standards-compliant mode.

grammar

HTML Top-Level Elements Availability "Registration // Organization // Type Tag // Definition Language" "URL"

Possible value

Top-level element: Specifies the top-level element type declared in the DTD. This corresponds to the declared SGML document type. HTML default. HTML.

Availability: Specifies whether the Formal Public Identifier (FPI) is a publicly accessible object or system resource. PUBLIC The default. Publicly accessible objects. SYSTEM System resources, such as local files or URLs.

Registered: Specifies whether the organization is registered with the International Organization for Standardization (ISO). + Default. Organization name is already registered. - The organization name is not registered. The Internet Engineering Task Force (IETF) and the World Wide Web Consortium (W3C) are not registered ISO organizations.

Organization: Specifies the name of the group or organization responsible for the creation and maintenance of the DTD referenced by the !DOCTYPE declaration, ie, the OwnerID. IETF IETF. W3C W3C.

Type: Specifies the public text class, that is, the type of object being referenced. DTD default. DTD.

Label: Specifies the public text description, which is a unique, descriptive name for the referenced public text. It can be followed by a version number. HTML default. HTML.

Definition: Specifies the document type definition. Frameset Frameset document. Strict excludes all the typical attributes and elements that W3C experts want to phase out because style sheets are already well established. 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 definitions are written as ISO 639 language codes (uppercase two letters). EN Default. English.

URL: Specifies the location of the referenced object.

Notes

This declaration must appear at the beginning of the document, before the html tag.

The !DOCTYPE element does not require a closing tag.

This element is available in HTML in Microsoft® Internet Explorer 3.0.

You can use this declaration to switch to strict standards compliance mode in Internet Explorer 6 and later. To turn this on, include a !DOCTYPE declaration at the top of your document, specifying valid tags and, in some cases, definitions and/or URLs.

Note: In standards-compatibility mode, compatibility with other versions of Internet Explorer is not guaranteed. When standards-compliant mode is turned on, document rendering behavior may differ from future versions of Internet Explorer. If the content is fixed in nature (eg burned on a CD), this mode should not be used.

Example

The following example demonstrates how to use the !DOCTYPE declaration to specify the DTD that a document conforms to and switches Internet Explorer 6 and later to standards-compliant mode. The declarations in the following examples all specify compliance with the HTML 4.0 DTD. The second declaration specifies "Strict". The first declaration is unspecified. Both of these declarations will switch Internet Explorer 6 and later to standards-compliant mode.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

The declarations in the following examples all specify compliance with the "Transitional" HTML 4.0 DTD. The second declaration specifies the URL of the DTD. The first declaration is unspecified. The second declaration will switch Internet Explorer 6 and later to standards-compliant mode. The first statement will not.

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