DOCTYPE for learning

Some time ago I saw an article about Doctype in the garden: Correct Use of DOCTYPE reminds me of the same problem I encountered during DotNetNuke development. Indeed, this question is not big, not small. In DotNetNuke, you can select the default one. However, sometimes two portals are created at the same time, and there are two different skins. Their DOCTYPE is sometimes different. If you cannot figure out DOCTYPE, adjust CSS, it is difficult to get good results and compatibility.

Therefore, figuring out DOCTYPE is always helpful for development in the previous section. The following is my summary of some online materials. I will save them for future use and share them with you.

To describe Doctype, start with the mode used when the browser parses different documents,

• For the text/html content mode (Modes for text/html Content), there are three main Modes in this mode, the Mode Selection for text/html content depends on DOCTYPE sniffing (doctype sniffing)

 

• • Quirks mode): Different browsers implement different quirks. The quirks in Internet Explorer make IE behave the same as (IE5.5 contains non-standard features; in other browsers, the quirks are a small offset to the standard mode.
  • Standard mode): In this mode, the browser tries to properly process the compliant documents in a specified browser. Different browsers follow different stages, so the effect varies. It and the geek mode mainly affect the presentation of CSS content, but in some cases it also affects the interpretation and execution of JavaScript.
  • Quasi-standard mode (almost standards mode): In this mode, many browser features comply with the standards, but not all of them, the unstandard is mainly reflected in the processing of image gaps (the most obvious problem is when images are used in the table ).

 

• For the application/xhtml + xml Mode, do not use DOCTYPE in this Mode.
  • In Firefox, Safari, Chrome, and Opera, setting HTTP Content-type to application/xhtml + xml triggers the XML mode. To some extent, these browsers treat XML documents that comply with the standards as correctly as possible.
  • IE 6, 7, 8, and Mac IE 5 do not support application/xhtml + xml.

 

• Non-Web Modes (Non-Web Modes) is not discussed here. In actual applications, only a few engines have Non-web content mode.

 

 

In this way, we can clearly understand that DOCTYPE is mainly used when the web document is text/html content, and DOCTYPE can determine the mode that the browser uses when parsing the document. Therefore, the content of the following article is limited to three modes for text/html content. Different browser modes will certainly have different effects. The following describes the impact of browser mode in three aspects:

• Layout: The layout mode affects the CSS Layout ). For example, it is a strange place (quirk) to inherit a style from a table ). For Some browsers, the box model is changed to IE5.5. And so on. In Quasi-standard mode (for browsers that contain this mode), the height of cells that contain only images is different from the standard mode.
• Parsing (parsing): some strange things may affect the Parsing of HTML and CSS (parsing), and cause the Parsing of standardized pages to fail. These weird things are mainly caused by layout. However, it is worth noting that compared with the standard mode, the weird mode is mainly reflected in the CSS layout and parsing, rather than in HTML parsing.
• Script: although the weird mode is mainly related to CSS, there are still some scripts. For example, in Firefox's weird mode, attribute IDs in HTML can be referenced from the global scope of the script, just like IE. Compared with other browsers, the weird mode has a particularly significant impact on scripts in IE8.

Now let's take a look at how the browser determines the pattern (Doctype sniffing ):
The current browser uses doctype sniffing to determine the browser engine mode for text/html documents. This means that the mode will be selected based on the document declaration (document type declaration) at the beginning of the HTML document. (Not applicable to XML documents .) The generation of Doctype sniffing is based on the following actual situations: when doctype is sniffed out, when doctype is sniffed out, the vast majority of "weird" documents do not have a document type declaration, the old DTD is not referenced. HTML5 recognizes this fact and defines the doctype in text/html as a mode conversion function.
A typical pre-HTML5 Document Type Declaration contains the string "<! "DOCTYPE", the common identifier ("html") of the root element, the string "PUBLIC", a dtd public identifier enclosed in quotation marks, it may also contain a system identifier (a URL) of this DTD and the character "> ". These items are separated by spaces. This document type declaration is placed before the root element in the document.

• You can enable the standard mode by using any of the following document types:

<! -- Strict HTML 4.01 type -->
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.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">

• For the quasi-standard mode, you can use the transitional or frameset document type to trigger the trigger, as shown below:

 

<! -- HTML 4.01 transition type -->
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">

<! -- HTML 4.01 framework type -->
<! Doctype html public "-// W3C // dtd html 4.01 Frameset // EN" "http://www.w3.org/TR/html4/frameset.dtd">

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

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

Of course, there will be some minor differences between DOCTYPE declarations of the same mode and different ones, which will be mentioned below.

Now, you can go to the topic. DOCTYPE:

• What is DOCTYPE?

Simply put, doctype is a line of declaration located before the html tag, which tells the browser that the current page or document uses that specification, (HTML-4 de transition ou strict, XHTML, etc ...).
The more complete DOCTYPE statement is:
<! Doctype html public "type_de_HTML" "adresse_de_DTD">Where:

• • Type_de_HTML: indicates the version of HTML.
  • Adresse_de_DTD: Specifies the URL of the DTD (Document type declaration) to describe the legal structure, elements, and attributes of a Document.

• Why declare DOCTYPE?

It specifies the (X) HTML version used by the document, which is the most required information for parsing a document (processing the document) by a tool such as a browser. For example, DOCTYPE must be declared when we use Markup Validator to check the document structure (Syntax. In fact, I don't need to say much about the above nonsense.

• Different DOCTYPE declarations

• HTML5:

<!DOCTYPE html>

HTML5's new DOCTYPE tag is simpler. It does not bring the browser into Quirks mode)

• HTML4.01 transitional

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

• Document is html: cannot be treated as XML;
• No<marquee>,<embed>, Etc;
• These elementsarea,dt,dd,p,li,thead,tfoot,colgroup,col,tr,thEttdIs optional;
• Labels are case insensitive;
• For HTML properties, quotation marks can be omitted when the property value only includes (a-zA-Z0-9.
• <OPTION selected>Replace<OPTION selected="selected">
• The following elements or attributes are allowed (on the html page ):
  • BASEFONTAndFONT;
  • CENTER,U,STRIKEAndS;
  • BODYElement's BALINK,BACKGROUND,BGCOLOR,LINK,VLINK,TEXTAttribute;
  • Table ElementBGCOLOR,HEIGHT,NOWRAP,WIDTHAttribute;
  • Image and ObjectBORDER,HSPACE,VSPACEAttribute;
  • HRElementCLEAR,NOSHADE,SIZE,WIDTHAttribute;
  • Li ElementCOMPACT,TYPEAttribute, and ol ElementSTART,VALUEAttribute;
  • PREElementWIDTHAttribute;
• IFRAMEYes,FRAMESETAndFRAME Not allowed;

• HTML4.01 strict

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

And HTML4.01 different regions of transitionnel:

• The elements and attributes that are allowed are not allowed. They should be used in CSS;
• LinkedtargetAttributes are no longer allowed;
• IFRAME, FRAMESETAndFRAME Are not allowed.

• • HTML4.01 frameset

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

The rule basically matches HTML4.01 the transitionnel is the same,BODYElement no longer exists. It can contain multiple FRAME ElementsFRAMESET Element substitution.

• • XHTML1.0 transitionals:

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

The document can be processed as HTML or XML. Different syntax rules from HTML are as follows::

• All labels should be disabled;
• All Tag Element attributes should be in lower case;
• Only allow<option selected="selected">This writing method
• All quotation marks are required;

In short: available tags and HTML4.01 transitional is the same, but its syntax structure syntax is stricter.

• • XHTML1.0 strict:

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

And XHTML1.0 like transitionnel, syntax rules are strict,1.0 different regions of transitionnel and HTML4.01 Strict is exactly the same:

• The elements and attributes that are allowed are not allowed. They should be used in CSS;
• LinkedtargetAttributes are no longer allowed;
• IFRAME, FRAMESETAndFRAME Are not allowed.

In short: available tags and HTML4.01 strict is the same, but its syntax structure syntax must be stricter.

• • XHTML1.0 frameset

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

The rule is basically in line with XHTML1.0 The transitionnel is the same, BODYElement no longer exists. It can contain multiple FRAME Elements FRAMESET Element substitution. In short: basic andHTML4.01 frameset is the same, but its syntax structure syntax must be stricter.

• How to Select DOCTYPE

We recommend XHTML1.0 Strict;
If you use the iframe or target attribute, use XHTML1.0 transitional.
If you use frameset and frame, use XHTML1.0 frameset.
If you use HTML5, use it directly <! Doctype html>

• Finally, we recommend the Squelettor tool for creating the (X) HTML structure.