HTML DOCTYPE (Document Type Declaration) is an instruction that appears at the beginning of an HTML document, before the <html> tag.
- Its primary role is to tell the web browser which version of HTML the page is written in, ensuring that the browser renders the content correctly.
- It is not an HTML tag, but rather a special instruction that specifies how the browser should interpret the HTML.
- It is recommended to always use <!DOCTYPE html> at the top of your HTML file for HTML5.
For HTML5, the declaration looks like this:
< !DOCTYPE html >Note: The <!DOCTYPE> declaration is NOT case-sensitive.
How HTML Doctype tell the browser which version of html it is?
The <!DOCTYPE> declaration doesn’t directly specify which version of HTML is being used (like, "HTML5" or "HTML4"), but rather it tells the browser to use a specific rendering mode. It helps the browser determine how it should interpret the content.
There are two main modes:
- Standards Mode: The browser will render the page according to the modern web standards.
- Quirks Mode: The browser will render the page in a backwards-compatible manner, emulating older web behavior to handle legacy content.
Example of Using DOCTYPE in HTML5
Here, for example, we declare <!DOCTYPE html>, which triggers standard mode and tells the browser to use HTML5 specifications.
<!DOCTYPE html>
<html>
<body>
<p>welcome to my website</p>
</body>
</html>
What Happens Without <!DOCTYPE html>
Without <!DOCTYPE html>, your HTML code can still run, but it may face several significant drawbacks:
- Quirks Mode Activation: Browsers may switch to quirks mode, leading to outdated behaviors that cause inconsistent rendering compared to standards mode.
- Rendering Issues: CSS properties like box-sizing, margins, and widths may be interpreted differently, causing layout problems and misaligned elements that are difficult to debug.
- Cross-Browser Inconsistencies: Different browsers might render the page differently in quirks mode, making it hard to achieve cross-browser consistency.
- CSS and JavaScript Problems: Modern features like Flexbox, Grid, and certain JavaScript methods may not work correctly, causing compatibility issues.
- Unpredictable Behavior: Without <!DOCTYPE>, rendering becomes unpredictable, making debugging more challenging and leading to unpredictable page behavior when adding new features.
Doctype Declaration for Different Version of HTML and XHTML
| HTML Version | DOCTYPE Declaration |
|---|---|
| HTML 5 | <!DOCTYPE html> |
| HTML 4.01 Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| HTML 4.01 Transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| HTML 4.01 Frameset | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
| XHTML 1.0 Strict | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| XHTML 1.0 Transitional | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| XHTML 1.0 Frameset | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
| XHTML 1.1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
Best Practices When Using DOCTYPE
- Always Declare DOCTYPE: Always start an HTML document with a DOCTYPE declaration to ensure that the browser knows how to correctly render the page.
- Use HTML5 DOCTYPE for New Websites: For all new projects, use the HTML5 DOCTYPE as it is the most current and widely supported standard.
- Validate Your HTML: Use the W3C validation service to check if your HTML document adheres to the standards specified by the DOCTYPE.
