Why Use DOCTYPE HTML

Why Use DOCTYPE HTML
You know that without it, the browser will use quirks mode when rendering the page; you know that different browsers render different elements differently in quirks mode. So you would write a doctype like this:

Copy code
The code is as follows:

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

Fortunately, various web development tools are now powerful enough to support the insertion of template code, so you don’t need to type out this long and smelly doctype letter by letter. But if you've had enough of it, you might try this:

Copy code
The code is as follows:

<!DOCTYPE html>

Wow, very concise! The benefits are obvious: 1. You can easily write this doctype without worrying about making mistakes; 2. You save about 105 bytes of characters. For a site with tens of millions of daily PVs, it can save a considerable amount of traffic; 3. It is backward compatible. Yes, the html5 doctype is written like this, and modern browsers recognize it.

If you're like me and have always thought that not specifying a DTD will turn on the browser's weird mode , you're wrong! The correct statement should be that quirks mode will be enabled only when doctype is not defined, that is, you only need to define <!doctype html> to let the browser render the page in strict mode (standard mode) without specifying a certain type of dtd. Let's review that all browsers need two modes: quirks mode and strict mode (some people also call it standards mode). IE 6 for Windows/mac, Mozilla, Safari and Opera all implement both modes, but versions below IE 6 are always stuck in quirks mode. Here are some things you need to know about the two modes:

  1. Pages written before standardization had no doctype, so pages without a doctype are rendered in quirks mode.
  2. On the other hand, if a web developer adds a doctype, it means that he knows what he is doing. Most doctypes will turn on strict mode (standard mode) and the page will be rendered according to the standard.
  3. Any new or unknown doctype will start in strict mode (standards mode).
  4. Each browser has its own way to activate quirks mode. You can look at this list: http://hsivonen.iki.fi/doctype/

Note: You don't need to validate your page against your chosen doctype at all; the mere presence of the doctype tag is enough to enable strict mode (standards mode). If you still doubt what I'm saying, go to http://www.quirksmode.org/css/quirksmode.html#link2 to find out what you need to know. We only need a small piece of JavaScript code to get the answer, it is:

Copy code
The code is as follows:

mode=document.compatMode;

This code can be used to determine whether the current browser is in quirks mode or standards mode. The compatibility of this property is beyond doubt. If you have doubts, you can check http://www.quirksmode.org/dom/w3c_html.html#t11. You can visit http://wanz.im/demo/doctype-test.html in the browser you want to test and you can see the results. As far as I know, this does not activate quirks mode, even under IE6. If you have any new discoveries, please leave me a message.

<<:  Introduction to the use of MySQL performance stress benchmark tool sysbench

>>:  20 CSS coding tips to make you more efficient (sorted)

Recommend

Why is it not recommended to use an empty string as a className in Vue?

Table of contents Compare the empty string '&...

Linux kernel device driver Linux kernel basic notes summary

1. Linux kernel driver module mechanism Static lo...

Elements of user experience or elements of web design

System and user environment design <br />Th...

SQL ROW_NUMBER() and OVER() method case study

Syntax format: row_number() over(partition by gro...

js implements a simple calculator

Use native js to implement a simple calculator (w...

How to use async and await correctly in JS loops

Table of contents Overview (Loop Mode - Common) D...

Two ways to enable firewall in Linux service

There are two ways: 1. Service method Check the f...

Use shell script to install python3.8 environment in CentOS7 (recommended)

One-click execution To install Python 3.8 in a vi...

CSS implements horizontal scrolling navigation bar on mobile devices (also applicable to PC devices)

Function Origin I was recently working on an H5 t...

Native JavaScript message board

This article shares the specific code of JavaScri...

CSS3 Bezier Curve Example: Creating Link Hover Animation Effects

We will use CSS3 animated transitions to create a...

Mini Program to Implement the Complete Shopping Cart

The mini program implements a complete shopping c...

Detailed explanation of routes configuration of Vue-Router

Table of contents introduce Object attributes in ...

The difference between div and span in HTML (commonalities and differences)

Common points: The DIV tag and SPAN tag treat som...

Summary of ten principles for optimizing basic statements in MySQL

Preface In the application of database, programme...