Home > Developer > Web Develop
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 HTML5There 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 commentsNote: <! 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 StrictThis 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 TransitionalThis 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 FramesetThis 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 StrictThis 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 TransitionalThis 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 FramesetThis 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.1This 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:
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.
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 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.
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
