Why use & lt ;! DOCTYPE & gt; Declaration. Use doctype to declare

Last Update:2014-10-23 Source: Internet

Author: User

Tags color identifier

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Why <! DOCTYPE> declaration. Use doctype to declare
Instance:

We often see code like this:

<! DOCTYPE html>

Note:At the top of the list, we can see a statement about "DOCTYPE" (document type), which tells the browser which specification is used to explain the specifications in this document. You know that without it, the browser uses the weird mode when rendering the page (Each browser has a difference in rendering each element in the weird mode, therefore, the effects of the same style on different browsers are different ).

Definition and usage

<! DOCTYPE> Declaration must be the first line of the HTML document, located before the

<! DOCTYPE> the declaration is not an HTML Tag; it indicates the web browser's instructions on which HTML version the page is written.

In HTML 4.01, <! DOCTYPE> declare to reference DTD because HTML 4.01 is based on SGML. The DTD specifies the markup language rules so that the browser can correctly render the content.

HTML5 is not based on SGML, so you do not need to reference DTD.

Tip:Always add to HTML document <! DOCTYPE> declaration so that the browser can know the document type.

Differences between HTML 4.01 and HTML5

There are three types in HTML 4.01 <! DOCTYPE> declaration. There is only one type in HTML5:

<!DOCTYPE html>

HTML element and document type (Doctype)

See this HTML element table, which lists the document types in which each element will appear.

Tips and comments

Note: <! DOCTYPE> declares that no end tag is available.

Tip:<! DOCTYPE> the statement is case insensitive.

Tip:Use the W3C validators to check whether you have compiled valid HTML/XHTML documents!

Common DOCTYPE declaration HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does not include explicit and obsolete elements (such as font ). Framesets is not allowed ).

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

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, including explicit and obsolete elements (such as font ). Framesets is not allowed ).

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

HTML 4.01 Frameset

This DTD is equivalent to HTML 4.01 Transitional, but allows the content of the framework set.

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

XHTML 1.0 Strict

This DTD contains all HTML elements and attributes, but does not include explicit and obsolete elements (such as font ). Framesets is not allowed ). Tags must be written in XML in the correct format.

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

XHTML 1.0 Transitional

This DTD contains all HTML elements and attributes, including explicit and obsolete elements (such as font ). Framesets is not allowed ). Tags must be written in XML in the correct format.

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

XHTML 1.0 Frameset

This DTD is equivalent to XHTML 1.0 Transitional, but allows the content of the framework set.

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

XHTML 1, 1.1

This DTD is equivalent to XHTML 1.0 Strict, but allows adding models (for example, providing ruby support for East Asian languages ).

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

Summary (when compiling HTML) document types:

<!DOCTYPE html>

Benefits of this statement:

You can easily write down this doctype without worrying about writing errors;
It is backward compatible (because the doctype of HTML5 is written in this way), and modern browsers know it.

Q: If no dtd is specified, the browser's weird mode will be enabled?

This is wrong! The correct statement should be that doctype is not defined to enable the weird mode. That is to say, you only need to define it to allow the browser to render the page in the strict mode (standard mode, you do not need to specify a type of dtd.

Review:

All browsers have two modes: Weird mode and strict mode (also known as standard mode ). Internet Explorer 6 for Windows/mac, Mozilla, Safari, and Opera both implement these two modes, but earlier versions of Internet Explorer 6 are always in the weird mode.

You need to know the following about the two modes:

You can look at this list: http://hsivonen.iki.fi/doctype/

Note:You do not need to verify your page based on your selected doctype. As long as the doctype tag exists, strict mode (standard mode) is enabled. If you still have doubts, go to http://www.quirksmode.org/css/quirksmode.html?link2to find the content of your thoughts.

We only need a short JavaScript code to get the answer, which is:

mode=document.compatMode;

This code can be used to determine whether the browser is in the weird or standard mode. The compatibility of this attribute is beyond doubt. If you are skeptical, you can check http://www.quirksmode.org/dom/w3c_html.html#t11.

Why does XHTML need to define DOCTYPE and NAMESPACE ~ Usage ~

DOCTYPE is short for document type. It is used to describe the XHTML or HTML version you are using.

The DTD (such as the xhtml1-transitional.dtd in the above example) is called the document type definition, which contains the document rules, the browser according to your definition of the DTD to explain your page identity and display.

To create a standard web page, the DOCTYPE Declaration is an essential part. Your logo and CSS will not take effect unless your XHTML determines a correct DOCTYPE.

XHTML 1.0 provides three types of DTD declarations:

* Transitional: a very loose DTD that allows you to continue using the HTML4.01 identifier (but in line with xhtml). The complete code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">

* Strict: a Strict DTD. You cannot use any identifier or attribute of the performance layer, for example, <br>. The complete code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "www.w3.org/..ct.dtd">

* Framework: a dtd designed specifically for the Framework page. If your page contains a framework, you need to use this DTD. The complete code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Frameset // EN" "www.w3.org/...et.dtd">

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 the ideal choice. Because this DTD also allows us to use the identifier, element, and attribute of the presentation layer, it is 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.

... The remaining full text>

Function of adding DOCTYPE to html

XHTML 1.0 provides three types of DTD declarations:
Transitional: requires a very loose DTD, which allows you to continue using the HTML4.01 logo (but it must conform to the xhtml syntax ). The complete code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">
Strict: a Strict DTD is required. You cannot use any identifier or attribute of the performance layer, such as <br>. The complete code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "www.w3.org/..ct.dtd">
Framework: a dtd designed specifically for the Framework page. If your page contains a framework, you need to use this DTD. The complete code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Frameset // EN" "www.w3.org/...et.dtd">
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 ). Because this DTD also allows us to use the identifier, element, and attribute of the presentation layer, it is 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.
Supplement
The DOCTYPE Declaration must be placed at the top of each XHTML document, on top of all codes and identifiers.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More