HTML <!DOCTYPE> Tag
The <!DOCTYPE> declaration is a crucial instruction at the very beginning of an HTML document. It's not an HTML tag but a declaration that tells the web browser which version of HTML the document is written in. This helps the browser to understand and render the page correctly, avoiding potential rendering issues and ensuring compatibility. It's always the very first element in an HTML document.
Syntax
<!DOCTYPE html>
Attributes
The <!DOCTYPE> declaration has no attributes. It's a simple declaration indicating the document type. Different versions of HTML will have different variations of the declaration.
| Attribute | Value | Description |
|---|---|---|
| N/A | N/A | The <!DOCTYPE> declaration does not have any attributes. |
Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is a basic HTML page.</p>
</body>
</html>
More Examples
HTML5
The most common declaration is for HTML5, which is concise and straightforward:
<!DOCTYPE html>
HTML 4.01 Strict
This is an older declaration for HTML 4.01 strict version, which doesn't allow deprecated features:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
This allows deprecated features:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0 Strict
For strict XHTML (XML based HTML):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
For transitional XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Browser Support
The <!DOCTYPE html> declaration for HTML5 is supported in all modern browsers. Older and deprecated versions of the declarations may or may not be supported in the same manner across different browsers.
| Browser | Support |
|---|---|
| Chrome | Yes |
| Edge | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
| Internet Explorer | Yes, but may require specific declarations for older versions |
Notes and Tips
- Always use
<!DOCTYPE html>for HTML5: It's the most modern, widely supported, and concise declaration. - Case-insensitivity: The
<!DOCTYPE>declaration is case-insensitive, but it's a best practice to write it in lowercase for consistency. - Must be the first line: It's crucial to place
<!DOCTYPE>as the very first thing in your HTML document, even before the<html>tag. Otherwise, it can trigger quirks mode in some browsers which leads to rendering issues. - Not an HTML Tag: Keep in mind that
<!DOCTYPE>is not an HTML tag itself, rather it's an instruction to the browser. - Avoid using outdated DOCTYPEs: Unless you have a very specific need to use older versions of HTML, it's best to stick with the HTML5
<!DOCTYPE html>declaration. Using outdated doctypes may cause unexpected behavior. - No Closing Tag: The
<!DOCTYPE>declaration does not have a closing tag. - Simplicity: The simplicity of the HTML5 doctype ensures that browsers are less likely to encounter problems when rendering the document. It contributes significantly to cross-browser compatibility.
- Future-Proofing: While the declaration specifies HTML5, it is also designed to be forward-compatible, allowing for future updates to HTML standards without requiring changes.
