Have you carefully understood Tags How it is defined How to use

Have you carefully understood<!DOCTYPE> Tags How it is defined How to use

Preface :
Today I was asked, "Have you carefully understood the <!DOCTYPE> tag?" I was stunned for a moment, because I first saw a suggestion on W3cschool to use XHTML Transitional DTD, and then I obediently set the HTML document type of Dreamweaver to XHTML 1.0 Transitional by default. After that, I have been using it until now as a matter of course. It's true that people become lazier as they get older, and subconsciously take many things for granted. Since I have been asked, I went to find some information and summarized it. I will just take notes~~

Definition of <!DOCTYPE> :
The <!DOCTYPE> declaration is placed at the very beginning of the document, before the <html> tag. This tag tells the browser which HTML or XHTML specification the document uses.
This tag can declare three DTD types, representing strict version, transitional version, and frame-based HTML version. (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.)

Usage of <!DOCTYPE> :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Analysis: In the above declaration, it is declared that the root element of the document is html, which is defined in the DTD whose public identifier is defined as "-//W3C//DTD XHTML 1.0 Strict//EN". The browser will know how to find a DTD that matches this public identifier. If it can't find it, the browser uses the URL following the public identifier as the location to look for the DTD.
- : Indicates that the organization name is not registered. The Internet Engineering Task Force (IETF) and the World Wide Web Consortium (W3C) are not registered ISO organizations.
+ is the default, indicating that the organization name has been registered.
DTD: Specifies the public text class, that is, the type of object being referenced. The default is DTD.
HTML : Specifies the public text description, which is a unique, descriptive name for the referenced public text. It can be followed by a version number. The default is HTML.
URL: Specifies the location of the referenced object.
Strict: Excludes all representative attributes and elements that W3C experts hope to phase out.

There are three types of HTML documents:
HTML 4.01 specifies three document types: Strict, Transitional, and Frameset.
a) If you need clean markup without cluttering the presentation layer, use the HTML Strict DTD type:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
b) Transitional DTDs can contain presentation attributes and elements that the W3C expects to be moved into style sheets. If your users are using browsers that do not support Cascading Style Sheets (CSS) and you have to use the presentation features of HTML, use the Transitional DTD type:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">
c) Frameset DTD is used for documents with frames. The Frameset DTD is identical to the Transitional DTD, except that the frameset element replaces the body element:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " http://www.w3.org/TR/html4/frameset.dtd">

Three XML document types :
XHTML 1.0 specifies three XML document types: Strict, Transitional, and Frameset.
a) If you need clean markup without cluttering the presentation layer, use the XHTML Strict DTD type:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
b) Transitional DTDs can contain presentation attributes and elements that the W3C expects to be moved into style sheets. If your users are using browsers that do not support Cascading Style Sheets (CSS) and you have to use the presentation features of HTML, use the Transitional DTD type:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
c) Frameset DTD is used for documents with frames. The Frameset DTD is identical to the Transitional DTD, except that the frameset element replaces the body element:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Choose the correct 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 XHTML DTD, but the document contains old-style HTML tags, it is inappropriate; similarly, if the DOCTYPE declaration specifies HTML DTD, but the document contains XHTML 1.0 Strict tags, it is also inappropriate.
If no valid doctype declaration is specified, most browsers will use a built-in default dtd. In this case, the browser will use the built-in DTD to try to display the tags you specified (but this is what happens when the page is written very poorly).
I looked at Jingdong, Taobao, and Blog Garden, and they all use this (I have always used this):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
However, I found that Baidu and Google used "<!doctype html>", so I checked the information carefully and found that HTML5 also uses this directly. However, because HTML 5 is not based on SGML, it does not need to reference DTD, but requires doctype to regulate the behavior of browsers (so that browsers can run as they should).

It is recommended to use "<!doctype html>" directly in the future. If you use <!doctype html>, the browser's standard compatibility mode will be enabled. In standard compatibility mode, it cannot be guaranteed to be compatible with other versions of Internet Explorer (ignore those before IE6). The document rendering behavior may be different from that of future Internet Explorers, but please feel free to use it~~

Tips :
XHTML 1 is the XML version of HTML 4.01 and is not a forward-compatible format.
The doctype in HTML 4.01 requires a reference to a DTD because HTML 4.01 is based on SGML.
SGML specifies a standard format for embedding descriptive tags in documents and specifies a standard method for describing document structure. The HTML format currently used on the WEB is an SGML document that uses a fixed set of tags.

<<: Website User Experience Design (UE)

>>: CSS to achieve floating customer service effect