The HTML document type declaration

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

The HTML document type declaration is an essential part of an HTML document. It informs the browser about the HTML version used in the current document, ensuring the browser parses and renders the page in the correct mode. Different document type declarations correspond to different HTML specifications, directly affecting the page's rendering and compatibility.

What is a Document Type Declaration?

The document type declaration (DOCTYPE) is the first line of code in an HTML document, appearing before the <html> tag. It is not an HTML tag but an instruction that declares the HTML version of the document. The browser uses the DOCTYPE to determine which rendering mode to employ, such as Standards Mode or Quirks Mode.

<!DOCTYPE html>

The DOCTYPE declaration for modern HTML5 is very simple, requiring only the above code. In earlier versions like HTML4.01 or XHTML, the DOCTYPE declaration was more complex, requiring the specification of a DTD (Document Type Definition).

HTML5 DOCTYPE Declaration

HTML5 simplified the DOCTYPE declaration, making it easier to remember and use. Below is a complete HTML5 document example:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML5 Document Example</title>
</head>
<body>
    <p>This is an HTML5 document example.</p>
</body>
</html>

The HTML5 DOCTYPE declaration is case-insensitive, so the following is also valid:

<!doctype html>

HTML4.01 DOCTYPE Declaration

The HTML4.01 DOCTYPE declaration is more complex, with three types: Strict, Transitional, and Frameset.

Strict Mode

Strict mode excludes all presentational tags and attributes:

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

Transitional Mode

Transitional mode includes some presentational tags and attributes for migration from older versions:

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

Frameset Mode

Frameset mode is used for documents containing frames:

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

XHTML DOCTYPE Declaration

XHTML is HTML based on XML, and its DOCTYPE declaration is similar to HTML4.01 but includes an XML namespace.

XHTML 1.0 Strict Mode

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

XHTML 1.0 Transitional Mode

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

XHTML 1.1

The XHTML 1.1 DOCTYPE declaration is more concise:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Importance of the Document Type Declaration

The document type declaration directly affects the browser's rendering mode. If there is no DOCTYPE or an incorrect DOCTYPE is used, the browser may enter Quirks Mode, leading to inconsistent page rendering. Common issues include:

Box Model Differences: In Quirks Mode, IE's box model calculations differ from Standards Mode.
Style Rendering Differences: Some CSS properties behave differently in Quirks Mode.
Script Behavior Differences: Certain JavaScript APIs may behave differently in Quirks Mode.

How to Choose a Document Type Declaration

For new projects, it is recommended to use the HTML5 DOCTYPE declaration:

<!DOCTYPE html>

For legacy projects using HTML4.01 or XHTML, consider migrating to HTML5 gradually. If maintaining the old version is necessary, ensure the DOCTYPE declaration matches the document's actual specification.

Validating the Document Type Declaration

You can use the W3C validation tool to check if the document type declaration is correct:

Visit W3C Markup Validation Service
Enter the URL or upload an HTML file
Review the validation results

Common Errors and Solutions

Error 1: Missing DOCTYPE Declaration

<html>
<head>
    <title>Document Missing DOCTYPE</title>
</head>
<body>
    <p>This document has no DOCTYPE declaration.</p>
</body>
</html>

Solution: Always include the correct DOCTYPE declaration at the beginning of the document.

Error 2: Incorrect DOCTYPE Declaration

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Incorrect DOCTYPE Declaration</title>
</head>
<body>
    <p>This document uses an incomplete HTML4.01 Transitional DOCTYPE.</p>
</body>
</html>

Solution: Ensure the DOCTYPE declaration is complete or use the simplified HTML5 declaration.

Error 3: DOCTYPE Not on the First Line

<!-- This is a comment -->
<!DOCTYPE html>
<html>
<head>
    <title>DOCTYPE Not on the First Line</title>
</head>
<body>
    <p>This document has a comment before the DOCTYPE declaration.</p>
</body>
</html>

Solution: Ensure the DOCTYPE declaration is the first line of the document, with no content (including whitespace or comments) before it.

Document Type Declaration and XML Declaration

For XHTML documents, an XML declaration may sometimes precede the DOCTYPE declaration:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Note: The XML declaration can cause IE6 to enter Quirks Mode unless the document is served with the application/xhtml+xml MIME type. For compatibility, the XML declaration is often omitted.

Document Type Declaration and Character Encoding

While the DOCTYPE declaration itself does not specify character encoding, it is often used alongside the <meta> tag's character encoding declaration:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Character Encoding Example</title>
</head>
<body>
    <p>This document uses UTF-8 encoding.</p>
</body>
</html>

Ensure the character encoding declaration appears as early as possible in the <head> section, ideally right after the opening <head> tag.

Historical Document Type Declarations

Besides HTML4.01 and XHTML, earlier HTML versions also had their own DOCTYPE declarations:

HTML 3.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

HTML 2.0

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">

These older DOCTYPE declarations are rarely used today but may be encountered when maintaining very old websites.

Document Type Declaration and Frames

For pages using frames, HTML4.01 provides a dedicated frameset DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
    <title>Frameset Document</title>
</head>
<frameset cols="25%,75%">
    <frame src="menu.html">
    <frame src="content.html">
</frameset>
</html>

Note: HTML5 no longer supports <frameset>. Use <iframe> or other modern layout techniques instead.

Document Type Declaration and Mobile Devices

Modern mobile browsers support the HTML5 DOCTYPE declaration well. Below is an example of an HTML5 document optimized for mobile devices:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Device Example</title>
</head>
<body>
    <p>This is a page optimized for mobile devices.</p>
</body>
</html>

Document Type Declaration and Email

HTML emails typically use simplified HTML, but the DOCTYPE declaration remains important. Below is an example of an HTML email:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Email Example</title>
</head>
<body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>This is an HTML-formatted email.</td>
        </tr>
    </table>
</body>
</html>

Note: HTML emails often require table layouts and inline styles for optimal compatibility.

做个网站！

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

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

上一篇：标签、元素和属性的区别

下一篇：表头单元格(th)