The <!DOCTYPE> document type declaration

Author：Chuan Chen 阅读数：12674人阅读分类： HTML

The <!DOCTYPE> tag is the first tag in an HTML document, used to declare the document type and version. It informs the browser about the HTML specification the current document follows, ensuring the page is rendered in standards mode. If not declared correctly, the browser may enter quirks mode, leading to inconsistent styling and layout behavior.

Purpose of `<!DOCTYPE>`

<!DOCTYPE> is not an HTML tag but a directive. Its core function is to trigger the browser's standards mode, avoiding compatibility issues associated with quirks mode. Modern browsers select different rendering engine behaviors based on <!DOCTYPE>:

Standards Mode: Strictly adheres to W3C standards for parsing the page.
Quirks Mode: Emulates non-standard behaviors of older browsers (e.g., IE5's box model).
Almost Standards Mode: A middle ground where only some features are handled in the old way.

For example, the following code declares an HTML5 document type:

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
  </head>
  <body>
    <p>This is a page rendered in standards mode.</p>
  </body>
</html>

Common Document Type Declarations

Historically, HTML has had many versions, each with its own <!DOCTYPE> declaration. Here are some typical examples:

HTML 4.01 Strict

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

Disallows deprecated tags (e.g., <font>)
Requires separation of structure and styling

XHTML 1.0 Transitional

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

Allows some presentational tags
Requires XML syntax (e.g., self-closing tags must include /)

HTML5

<!DOCTYPE html>

Simplified syntax, case-insensitive
Forward-compatible with all modern browsers

Impact of Quirks Mode

When <!DOCTYPE> is omitted or declared incorrectly, the browser enters quirks mode. Key differences include:

Box Model Calculation:
- Standards Mode: width includes only the content area
- Quirks Mode: width includes padding and borders

<!-- Example: Box model comparison -->
<style>
  .box {
    width: 100px;
    padding: 20px;
    border: 5px solid;
  }
</style>
<div class="box"></div>

In standards mode, total width is 150px (100 + 202 + 52)
In quirks mode, total width is 100px (padding and borders squeeze inward)

Table Cell Height:
- In quirks mode, empty cells are not displayed by default
- In standards mode, cell space is preserved

Special Cases

Certain scenarios require special attention to document type declarations:

Inline SVG or MathML

HTML5's <!DOCTYPE html> supports direct embedding of SVG:

<!DOCTYPE html>
<html>
<body>
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="red" />
  </svg>
</body>
</html>

Legacy System Compatibility

To support IE6-8, use the following declaration to force the latest rendering engine:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  </head>
</html>

Validation and Debugging Tools

Use the W3C Validator to check if the document type is correct:

curl -F "file=@index.html" -F "output=json" https://validator.w3.org/nu/

In browser developer tools, check the current mode via document.compatMode:

console.log(document.compatMode); 
// Returns "CSS1Compat" for standards mode
// Returns "BackCompat" for quirks mode

Historical Version Comparison

Document Type	Declaration Example	Features
HTML 2.0	`<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">`	Early, simple specification
HTML 4.01 Frameset	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "...">`	Supports frameset structure
XHTML 1.1	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "...">`	Strict XML syntax requirements

Modern Development Practices

Always use the HTML5 declaration:
```
<!DOCTYPE html>
```
Even if the project uses XHTML syntax (e.g., self-closing tags), declaring XHTML type is unnecessary.
Avoid mixed case: While <!doCtYPe> works, it's recommended to use lowercase consistently:
```
<!doctype html>
```

Template file example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Template</title>
</head>
<body>
  <!-- Content -->
</body>
</html>

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：国际化与本地化支持

下一篇：<html>-HTML文档根元素